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?

 
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
fotogenic 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!!