Forums

Bootstrap 4 css and other display errors

Permalink 8 users found helpful
Below are a few fixes for several issues when creating a bootstrap 4 theme for concrete5 v8.

Fix for the dashboard side bar acting inline instead of stacking each element.

div.ccm-panel-content ul.nav, div.ccm-panel-content menu {
    display:block;
}


This next one drove me crazy. There is an issue with the way layouts are presented in edit mode. Specifically with the div that is added via the `layouts.js` core javascript file. Here's the fix.

#ccm-theme-grid-edit-mode-row-wrapper {
    display: flex;
    width:100%;
}
 
tallacman replied on at Permalink Reply
tallacman
Thanks for this.
stewblack23 replied on at Permalink Reply
stewblack23
Good to know.
dbleisch replied on at Permalink Reply
dbleisch
Great, thanks!
cd13sr replied on at Permalink Reply
Are you providing your theme with the Bootstrap JS too? $this->providesAsset('javascript', 'bootstrap/*');

Do you experience any issues with JS?

Thanks!
hrcv replied on at Permalink Reply
hrcv
This could be usefull to make the popover menus visible also on editing mode.

.ccm-edit-mode-block-menu.popover, .popover  {visibility: visible;}
PixelFields replied on at Permalink Reply
PixelFields
Thank you, very useful!

I also found this helps with the positioning of the radio buttons and checkboxes on the edit panels:

.ccm-ui .radio input[type="radio"], .ccm-ui .radio-inline input[type="radio"], .ccm-ui .checkbox input[type="checkbox"], .ccm-ui .checkbox-inline input[type="checkbox"] {
    width: auto;
}


and this fixes the inline input group checkbox (such as on editing a page list and you want to truncate the description:

.ccm-ui .input-group-addon {
    width: 10%;
}