When you enable "flex" in a sub-theme "scss/[name_of_subtheme].scss":

// Set flex to true to enable the new Foundation 6 flex grid.
$flex: true;
@include foundation-everything($flex);

or in "scss/_settings.scss":
$global-flexbox: true;

Admin Toolbar not rendering correctly as the following shots:

Admin Toolbar not rendering correctly when enable "flex"

CommentFileSizeAuthor
#6 FlexVerticalMenu-2920825-6.patch553 bytesserg2
Admintoobar_with_flex.png51.15 KBsteveoriol

Comments

steveoriol created an issue. See original summary.

hongpong’s picture

hongpong commented

Thank you for reporting this steveoriol, if you can find a way to change the CSS to fix this that would be really great.

steveoriol’s picture

steveoriol
Location Grenoble 🇫🇷
commented

Hello HongPong,

I tried to overwrite the template 'core/themes/stable/templates/navigation/menu--toolbar.html.twig' and juste remove the "menu" class inside the root ul tag:

(on ligne 33)

      <ul{{ attributes.addClass('toolbar-menu').removeClass('menu') }}>

and it'is working for me...
But I do not see why the class 'menu' appeared here so what is not there in the stable theme?

hongpong’s picture

hongpong commented

Is anyone else getting menu items 'floating' within rows instead of forming full rows, in conjunction with 'toolbar' code module? Maybe the Foundation _menu.scss is to blame on this.

EDIT. this seems to work. would suggest we put into _drupal.scss: 

.toolbar-tray-horizontal li.hover-intent ul li {
  float: none;
  width: 100%;
}
serg2’s picture

serg2 commented

I am pretty sure there has been a regression somewhere as I do not remember this being an issue.

The CSS causing the issue is in this block:

.menu {
    margin: 0;
    list-style-type: none;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
}

Specifically it is the display: flex which is causing the problem and can be fixed in by changing to display:block .
As far as I can see the best solution at the moment is to add:

.toolbar-menu {
    display: block;
}

I will try to figure out where the regression occurred first.

serg2’s picture

serg2 commented
StatusFileSize
new FlexVerticalMenu-2920825-6.patch553 bytes

Attached is a patch which adds the following CSS fix to the Drupal specific scss. :

.toolbar-menu {
    display: block;
}

This seems the most appropriate fix.

serg2’s picture

serg2 commented
Status: Active » Needs review
hongpong’s picture

hongpong commented

this seems reasonable to me, I think we should put it in soon unless someone objects. where is the .menu coming from that you observed serg2?

serg2’s picture

serg2 commented

When comparing against the admin theme (Seven) there are some minor differences in the use of Stable/Classy but I do not think it comes from there. When have made a few changes to the menu templates to aid sub-menu and active trails but do not see it added there either. Then we have a patches and reverts around the toolbar but again do not see it. At this point i decided that it was easier just to fix ;)

Before committing this please do a visual check against the lastest dev, both with flex enabled in SCSS and not, worried about regressions.

serg2’s picture

serg2 commented
Status: Needs review » Postponed

I cannot reproduce with the current dev.

If someone can, please re-open noting the versions and the scss configurations.

sim_1’s picture

sim_1
she/her
commented
Status: Postponed » Closed (cannot reproduce)

Closing this issue after 2 years of being unable to reproduce.