Master-Detail show an initial page in detail area

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?

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;
}
2 Likes

Is it still so in version 6?

A bit late to the party, I know, but this is just what I wanted, and it works for me in F7-Vue ver. 6 and thank you for that. I had to switch the css selectors around, though :slight_smile: