I'm using a Moscone Flipped layout to show a right sidebar which is sometimes (deliberately) empty. When that is the case, I'd like the main content to be displayed full width.
What would be the neatest - or most correct - way to achieve this? Using a custom layout? Or css? Or something else?
I've spent a while on this and found no good solutions yet so wondered if this is standard and I'm missing something.
Thanks
Martin
If you use CSS Flexbox Layout, you can do with simple styles. In this example, if one or two side columns are excluded from the layout, the central column will occupy all the remaining width:
<div class="l-middle">
<aside class="l-sidebar l-sidebar-first">
<!-- content -->
</aside>
<main class="l-content" role="main" aria-label="Main content">
<!-- content -->
</main>
<aside class="l-sidebar l-sidebar-second">
<!-- content -->
</aside>
</div>.l-middle {
display: flex;
flex-wrap: wrap;
}
.l-content {
width: 50%;
flex-grow: 1;
padding: 0 1rem;
}
.l-sidebar {
width: 25%;
padding: 0 1rem;
}
@media screen and (max-width: 768px) {
.l-content, .l-sidebar {
width: 100%;
}
}This will work correctly if there are conditions in the Layout for hiding empty side columns (not difficult to add yourself):
<?php if (!empty($content['sidebar1'])): ?>
<aside class="l-sidebar l-sidebar-first">
<?php print $content['sidebar1']; ?>
</aside>
<?php endif; ?>It may be helpful to know what's being displayed in the sidebar. A field? another node? As others have said, probably the easier way to go is to create two layouts, one with Moscone flipped and the other with Boston or something else, and use a layout condition to decide when one or the other will be shown.
Alternatively, with a bit more work, I have solved this in the past by creating a new template tpl.php file (placed in the theme's template folder) for Moscone, and using the variables passed to the template to show or hide a section of the template as follows
<div class="l-middle row">
<?php if (!empty($content['sidebar'])) : ?>
<div class="l-sidebar l-sidebar-first tenuto-wrapper-fixed">
<div class="tenuto-scrolling-side">
<?php print $content['sidebar']; ?>
</div>
</div>
<main class="l-content col-md-9 col-md-push-3" role="main" aria-label="<?php print t('Main content'); ?>">
<?php print $content['content']; ?>
</main>
<?php else : ?>
<main class="l-content col-md-12" role="main" aria-label="<?php print t('Main content'); ?>">
<?php print $content['content']; ?>
</main>
<?php endif; ?>
</div>I've created a separate layout and made it visible when a certain field on the node is true.
I used Field Visibility Condition to expose this field to the layout.
You can add the other layout and set it to only be shown on the page where the menu is empty.
Other than changing the layout, I'm not aware of any easy solution.
You could make sure the content that doesn't need the menu has the same path, this should make it easier if there are multiple pages.
Hope this helps.
I'm sure others will give more detailed answers...
I've created a separate layout and made it visible when a certain field on the node is true.
I used Field Visibility Condition to expose this field to the layout.
It may be helpful to know what's being displayed in the sidebar. A field? another node? As others have said, probably the easier way to go is to create two layouts, one with Moscone flipped and the other with Boston or something else, and use a layout condition to decide when one or the other will be shown.
Alternatively, with a bit more work, I have solved this in the past by creating a new template tpl.php file (placed in the theme's template folder) for Moscone, and using the variables passed to the template to show or hide a section of the template as follows
<div class="l-middle row">
<?php if (!empty($content['sidebar'])) : ?>
<div class="l-sidebar l-sidebar-first tenuto-wrapper-fixed">
<div class="tenuto-scrolling-side">
<?php print $content['sidebar']; ?>
</div>
</div>
<main class="l-content col-md-9 col-md-push-3" role="main" aria-label="<?php print t('Main content'); ?>">
<?php print $content['content']; ?>
</main>
<?php else : ?>
<main class="l-content col-md-12" role="main" aria-label="<?php print t('Main content'); ?>">
<?php print $content['content']; ?>
</main>
<?php endif; ?>
</div>Have you looked at this contrib layout. I believe this is supposed to solve the problem.
https://backdropcms.org/project/harris_flexible
"This layout is similar to Harris layout with collapsing sidebars. If there is no content in any of the sidebars, the main content region will expand to full width."
Thanks for the suggestions. In the end I used the harris_flexible layout - it did exactly what I wanted.
Brilliant. Just what I was looking for!
If you use CSS Flexbox Layout, you can do with simple styles. In this example, if one or two side columns are excluded from the layout, the central column will occupy all the remaining width:
<div class="l-middle">
<aside class="l-sidebar l-sidebar-first">
<!-- content -->
</aside>
<main class="l-content" role="main" aria-label="Main content">
<!-- content -->
</main>
<aside class="l-sidebar l-sidebar-second">
<!-- content -->
</aside>
</div>.l-middle {
display: flex;
flex-wrap: wrap;
}
.l-content {
width: 50%;
flex-grow: 1;
padding: 0 1rem;
}
.l-sidebar {
width: 25%;
padding: 0 1rem;
}
@media screen and (max-width: 768px) {
.l-content, .l-sidebar {
width: 100%;
}
}This will work correctly if there are conditions in the Layout for hiding empty side columns (not difficult to add yourself):
<?php if (!empty($content['sidebar1'])): ?>
<aside class="l-sidebar l-sidebar-first">
<?php print $content['sidebar1']; ?>
</aside>
<?php endif; ?>
Have you looked at this contrib layout. I believe this is supposed to solve the problem.
https://backdropcms.org/project/harris_flexible
"This layout is similar to Harris layout with collapsing sidebars. If there is no content in any of the sidebars, the main content region will expand to full width."