Adjustment control panel "semi-hidden buttons"

We do not yet have adoptation for gantry template framework.

What style you use in emerald global congif?

Hello Teophile, I had a quick look into GANTRY5 / HYDROGEN default template and EMERALD control panel.
Sergey is right, currently there are no specific GANTRY5 templates with gantry grid and classes etc.

You might leave the Default (Bootstrap 2) setting enabled.

Background info

As far as I can tell, GANTRY5 loads also his own Bootstrap v2 CSS file. Always. I do not see any configuration to disable it. Apart from editing a TWIG page template. Really strange by all the vast configuration options. Even the Atom "Frameworks" does not help or change the Bootstrap file.

Issue & Culprit

Anyway, the culprit is a base CSS rule in the GANTRY5 nucleus.css
This file sets box-sizing: border-box; for the HTML tag and all ::before ::after classes
Actually a common setting, but a problem for the Bootstrap v2 Grid ;)
As far as I know, Bootstrap v3+ did also change to this behavior… and people upgrading from v2 had many layout issues.

So, Emerald is not to blame here. It is a result of the GANTRY5 css and its own bootstrap css file.

How to fix

I believe you can fix it by adding the following lines to your custom css.
Either in GANTRY5 template style/outline -> Page Settings -> Assets -> CSS
Or Page Settings -> Atoms -> Custom CSS

.row-fluid div[class^="cpbut span"] {
    box-sizing: initial;
}

What it does

It should reset the box-sizing and calculation back to Bootstrap 2 behavior. It applies to Emerald CPanel Buttons only. Other elements are not effected.

Result

Tank you

Teophile Thank you

You're welcome! Glad it worked out for you.

@Sergey

Maybe that box-sizing rule could be part of the Emerald template's inline styles?
As far as no other extensions make use of class .cpbut, it should be fairly save.
It should even work with a simpler rule:

.cpbut {
    box-sizing: initial;
}

or

.cpbut {
    box-sizing: content-box;
}

or stay more specific?

.row-fluid div[class^="cpbut span"] {
    box-sizing: initial;
}

BTW, I have played with a new GANTRY template variant. I tried to use Gantry grid classes, which are based on CSS flexbox. It is a VERY basic implementation.
Actually it makes not much difference to Bootstrap v2 behavior. It shrinks on medium screens and stacks in 1 column on narrow screens. It's just another technique. By default the gantry grid row has no gutter/spacing. All this has to be added through extra classes or flexbox properties. Benefits are centering and evenly spacing etc.

General question: Does it really make sense to use the gantry grid and a separate view template at all? Gantry seem to include and utilize Bootstrap v2 anyways.

pepperstreet BTW, I have played with a new GANTRY template variant. I tried to use Gantry grid classes, which are based on CSS flexbox. It is a VERY basic implementation.

Actually it makes not much difference to Bootstrap v2 behavior. It shrinks on medium screens and stacks in 1 column on narrow screens. It's just another technique. By default the gantry grid row has no gutter/spacing. All this has to be added through extra classes or flexbox properties. Benefits are centering and evenly spacing etc.

General question: Does it really make sense to use the gantry grid and a separate view template at all? Gantry seem to include and utilize Bootstrap v2 anyways.

@Sergey

Here is my GANTRY5 grid/flexbox template for EM10 Control Panel.
I have used the gantry grid/box classes.
I have added inline CSS for button "box-sizing" issue.
Also extra classes for each button "row". Its flexbox CSS controls the spacing.

gantry.default.php

pepperstreet @Sergey

Here is my GANTRY5 grid/flexbox template for EM10 Control Panel.

I have used the gantry grid/box classes.

I have added inline CSS for button "box-sizing" issue.

Also extra classes for each button "row". Its flexbox CSS controls the spacing.

gantry.default.php

Awwesome!!!