Setting z-index higher than 1000
Permalink
I'm currently working on a number of new templates and themes based on bootstrap 3 etc and seem to continually run into problems with the z-index and C5 ediiting system.
I believe concrete5 uses z-index of 1000 for its interface etc and bootstrap uses z-index above 1000 quite often which causes problems with editting etc with C5.
I find I need to go through any bootstrap templates and associated css files and renumber the z-index of numerous items yet still ensure they maintain their order. (I generally minus 100 from the templates z-indexes ie 1040 become 940 etc.)
Its not hard but does get tedious at times.
Is it possible to increase C5 z-indexes from 1000 to 2000 or even 9999 etc so it doesn't conflict with bootstrap.
I believe concrete5 uses z-index of 1000 for its interface etc and bootstrap uses z-index above 1000 quite often which causes problems with editting etc with C5.
I find I need to go through any bootstrap templates and associated css files and renumber the z-index of numerous items yet still ensure they maintain their order. (I generally minus 100 from the templates z-indexes ie 1040 become 940 etc.)
Its not hard but does get tedious at times.
Is it possible to increase C5 z-indexes from 1000 to 2000 or even 9999 etc so it doesn't conflict with bootstrap.
Primarily its on the edit side.
For example on the current theme I am trying to convert that uses standard Bootstrap 3 recommendations and the CSS within the bootstrap and associated files uses z-index above 1000. (Bootstrap site recommends NOT to change these values).
this can be found athttps://getbootstrap.com/docs/4.0/layout/overview/#z-index...
I believe this is the same for version 3 bootstrap as well.
I change these values to below 1000 and they mostly work.
The problems is the bottom user menu buttons - Login etc. They don't appear. This maybe a separate issue but I've only run into it with later bootstrap templates
I have had similar issues before with earlier versions of Concrete 5 and you can tell that those actually appear underneath the top menu. Current version hides it better under the top menu.
I did manage to do a quick and nasty hack by adding:
to my main style.css.
This at least shows the menu but doesn't actually show any of the concrete5 message etc., or background, border etc etc.
The point is if bootstrap is using 1000+ z-index then why not use 10000 (or higher) for C5 to ensure this and other frameworks work okay.
I don't think bootstrap will change their ways for 1 CMS framework. No matter how good it is?
Anyway if you have any ideas a better css code etc I could use it would be good.
Thanks again.
For example on the current theme I am trying to convert that uses standard Bootstrap 3 recommendations and the CSS within the bootstrap and associated files uses z-index above 1000. (Bootstrap site recommends NOT to change these values).
$zindex-dropdown-backdrop: 990 !default; $zindex-navbar: 1000 !default; $zindex-dropdown: 1000 !default; $zindex-fixed: 1030 !default; $zindex-sticky: 1030 !default; $zindex-modal-backdrop: 1040 !default; $zindex-modal: 1050 !default; $zindex-popover: 1060 !default; $zindex-tooltip: 1070 !default;
this can be found athttps://getbootstrap.com/docs/4.0/layout/overview/#z-index...
I believe this is the same for version 3 bootstrap as well.
I change these values to below 1000 and they mostly work.
The problems is the bottom user menu buttons - Login etc. They don't appear. This maybe a separate issue but I've only run into it with later bootstrap templates
I have had similar issues before with earlier versions of Concrete 5 and you can tell that those actually appear underneath the top menu. Current version hides it better under the top menu.
I did manage to do a quick and nasty hack by adding:
#ccm-account-menu { position: relative; float: right; }
to my main style.css.
This at least shows the menu but doesn't actually show any of the concrete5 message etc., or background, border etc etc.
The point is if bootstrap is using 1000+ z-index then why not use 10000 (or higher) for C5 to ensure this and other frameworks work okay.
I don't think bootstrap will change their ways for 1 CMS framework. No matter how good it is?
Anyway if you have any ideas a better css code etc I could use it would be good.
Thanks again.
I think that's your problem right there: you're trying to use Bootstrap 4.
As far as I can tell Bootstrap 3 (used for C5 UI) doesn't have those z-index variables (https://getbootstrap.com/docs/3.3/css/#less)
As I see it, you have 3 options:
1- play with those z-index values until you find a combination that works for you and doesn't break C5 UI
2- you make sure your theme's bootstrap files are only loaded for viewing and C5 own Bootstrap files are loaded when editing (but that might not work well for your theme)
3- You drop Bootstrap 4 and stick with Bootstrap 3
As far as I can tell Bootstrap 3 (used for C5 UI) doesn't have those z-index variables (https://getbootstrap.com/docs/3.3/css/#less)
As I see it, you have 3 options:
1- play with those z-index values until you find a combination that works for you and doesn't break C5 UI
2- you make sure your theme's bootstrap files are only loaded for viewing and C5 own Bootstrap files are loaded when editing (but that might not work well for your theme)
3- You drop Bootstrap 4 and stick with Bootstrap 3
Bootstrap 2.3.2 and 3.3.7 and 4 all use z-indexes above 1000.
I downloaded all version from GetBootStrap.com and confirmed the z-indexes used.
The z-indexes used are as I stated earlier.
Near every bootstrap based template I use, uses the standard bootstrap.css.
Hence the need to change the standard bootstrap.css in each template.
In the variable.less it also states :
I downloaded all version from GetBootStrap.com and confirmed the z-indexes used.
The z-indexes used are as I stated earlier.
Near every bootstrap based template I use, uses the standard bootstrap.css.
Hence the need to change the standard bootstrap.css in each template.
In the variable.less it also states :
//-- Z-index master list // // Warning: Avoid customizing these values. They're used for a bird's eye view // of components dependent on the z-axis and are designed to all work together. // // Note: These variables are not generated into the Customizer. @zindex-navbar: 1000; @zindex-dropdown: 1000; @zindex-popover: 1060; @zindex-tooltip: 1070; @zindex-navbar-fixed: 1030; @zindex-modal-background: 1040; @zindex-modal: 1050;
That's weird, you'd think they'd mention that in there doc.
Anyway, I check Concrete5 and for its elemental theme as well as for its UI, those z-index variables all have the default values, the same you posted here so i'd say you can safely discard those z-index that are present in both v3 and v4 version.
That leaves:
z-index-dropdown-backdrop
z-index-fixed (although it is the same value as z-index-navbar-fixed from v3 so I'd say this one replaces that one)
z-index-sticky
Anyway, I check Concrete5 and for its elemental theme as well as for its UI, those z-index variables all have the default values, the same you posted here so i'd say you can safely discard those z-index that are present in both v3 and v4 version.
That leaves:
z-index-dropdown-backdrop
z-index-fixed (although it is the same value as z-index-navbar-fixed from v3 so I'd say this one replaces that one)
z-index-sticky
What's more, most themes in the marketplace are Bootstrap-based using stock Bootstrap and they don't have that issue.
Could you tell us more? What elements of Bootstrap are conflicting for instance?