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, 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?
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/*');
Did I do something wrong - is there a trick to getting the full bootstrap js file loaded, while leaving the editor working?
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
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
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.
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/*');
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
this works, but seems odd that z-index can't be used at all.
As for the bootstrap, you are correct! Thank you.
Thad
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
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!!
You rock, thank you for your contributions to these posts!!
can you please show me your website link.