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