block "Design & Custom Template" toolbar doesn't work with boostrap.js

Permalink
I created a new theme from initilizr.com HTML5 boilerplate with Boostrap.

I ran into some issues with z-index (can't move a block if z-index != auto), which I was able to work around, but it would be nice if a z-index < X value wouldn't break things.

The issue now causing grief is the "Design & Custom Template" toolbar on a block won't function - the toolbar shows up, but except for Cancel/Save none of the buttons do anything. I tracked this down to bootstrap.min.js (removing it made the toolbar work). However, removing bootstrap.min.js caused my mobile nav to stop functioning. I added
$this->requireAsset('javascript', 'bootstrap/*');
, but the mobile menu still does not work.

Did I do something wrong - is there a trick to getting the full bootstrap js file loaded, while leaving the editor working?

View Replies: View Best Answer
Pluto replied on at Permalink Reply
Pluto
hello thadmiller
can you please show me your website link.
thadmiller replied on at Permalink Reply
Site URL ishttp://garrett.tkpups.com (currently in development).

Currently I am not including the bootstrap.min.js (commented out in the footer) so I can customize individual blocks, so the mobile (width < 768px) navigation is not behaving correctly .

thanks,
Thad
MrKDilkington replied on at Permalink Best Answer Reply
MrKDilkington
Hi thadmiller,

The concrete5 UI requires z-index to make sure the blocks you drag are visible above other page elements.

In looking through your CSS, you have elements with z-index set higher than what is required for display. This could be stepping on the concrete5 UI CSS.

You may be trying to require a Bootstrap file that concrete5 doesn't have.
https://www.concrete5.org/documentation/developers/5.7/appendix/asse...

Instead, you could provide the asset.
$this->providesAsset('javascript', 'bootstrap/*');
thadmiller replied on at Permalink Reply
Hi MrKDilkington,

My max z-index is 25 (not that high, IMO); however, as I said any z-index (other than auto) breaks the move functionality. During my troubleshooting, I found the issue was the "z-index:5" on my ".inner-content", but even setting "z-index:0" (can't get lower than 0, right) caused the block drag/move to not function. You can see my workaround on the main.css line 74
html.c5-edit-mode .inner-content {z-index:auto;}


this works, but seems odd that z-index can't be used at all.

As for the bootstrap, you are correct! Thank you.

Thad
chrisb replied on at Permalink Reply
Thank you @MrKDilkington! I know this is an old thread but enabling that line in the page_theme.php file worked like a charm.

You rock, thank you for your contributions to these posts!!