Master-Detail show an initial page in detail area


#1

Hi, I am using the Master-Detail layout and I would like to show some general content in the detail area before any item is selected. That detail area is currently just blank. How can I show a page in that area that would be replaced when a master list item is clicked?


#2

You can just add custom element as the View’s child:

<div class="page-detail-placeholder">Select something on left</div>

And style it like:

.page-detail-placeholder {
  display: none;
}
.view-master-detail .page-detail-placeholder {
  display: block;
  position: absolute;
  left: var(--f7-page-master-width);
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}