Foundation-sites: [6.2.0] top-bar-right doesn't work with foundation-flex

Created on 15 Mar 2016 · 14Comments · Source: foundation/foundation-sites

The alignment of the top-bar-right class doesn't work correctly when including the foundation-flex.min.css file.

How can we reproduce this bug?

Create a div with class "top-bar".
Inside top-bar create a div with class "top-bar-title" (or "top-bar-left").
Inside top-bar create a div with class "top-bar-right".

What did you expect to happen?
The div with class top-bar-right aligns to the right.

What happened instead?
The div with class top-bar-right align to the center of the top-bar.

Test case:
JSFiddle

scss 🐛bug

Source

hylke94

👍1

Most helpful comment

Had the same issue today. Already wanted to open a PR. Time to release 6.2.2 :stuck_out_tongue_winking_eye:

DaSchTour on 2 May 2016

👍3

All 14 comments

The same issue is on a "row align-justify" div. The second div doesn't align to the right, but somewhere in the middle (JSFiddle).
"align-spaced" also doesn't work properly.

hylke94 on 15 Mar 2016

It happens to me too, any workaround?

lucianosemerini on 15 Mar 2016

You can fix like this:

.top-bar .top-bar-left, .top-bar .top-bar-right { flex: none; }

sculler on 1 Apr 2016

🎉2

Is this issue fixed in the 6.2.1 release of yesterday?

hylke94 on 9 Apr 2016

Nope. The top-bar-right is now full-width (beside the top-bar-left/title) and aligns to the left. And the "row align-justify" acts like "row align-spaced".

hylke94 on 11 Apr 2016

😕2

Had the same issue today. Already wanted to open a PR. Time to release 6.2.2 :stuck_out_tongue_winking_eye:

DaSchTour on 2 May 2016

👍3

As shown in this JSFiddle, above 'fix' doesn't fix the issue completely. The alignment is somewhat better, but now they also align towards the middle...

The same for the second issue, alignment in a 'align-justify' row...

hylke94 on 15 May 2016

Check out the solution given by sculler.

It worked for me!

cabelodomato on 23 Jun 2016

Not in my JSFiddle tests...

How is your code, @cabelodomato ?

hylke94 on 23 Jun 2016

@hylke94 ,
Seems :before/:after pseudo-elements are the breakers. You should remove non-flex Foundation from Resources.

Lesha-spr on 29 Jun 2016

@Lesha-spr
That fixed the 'align-justify' indeed, but for the top-bar I still need te set flex to none as show in this JSFiddle.

No idea who writes/updates the docs, but maybe it is a good idea to mention this (removing the standard css sheet) ( @gakimball or @rafibomb maybe?)...

hylke94 on 29 Jun 2016

@hylke94 ,

Yes, top-bar is still (6.2.3) broken. I was talking about your fiddle where is an extra non-flex Foundation source which breaks the fix.

Also as I can see the fix is already merged to 6.3.

Lesha-spr on 30 Jun 2016

@hylke94 The docs are in a folder as part of this repo. You can submit PR's to change it or make a suggestion on an issue. Thanks!