Pro 2.2.5 - Bug? - Flex Buttons not in line - Forced button sizing

Hi Team

Is this a bug? Have forced the button sizes, the content all fits in, but because one button has an extra line of text the button is slightly out of line with the other Buttons??

It’s doing my head in trying to work out why it is shifting down slightly even though the content all fits in etc.

Will provide login details to investigate.

Thanks
Sam

Hi There,

Please add this element CSS to your column contains 4 buttons:

$el {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}




For more information about flex CSS, please take a look at this: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Hope it helps :slight_smile:

1 Like

Thanks Thai

But, why is the button shifting down slightly when their sizing has been forced?

Hi @grannysam11,

What browser you’re testing it width? The height is enforced and it’s working,

Ah I see what you mean now, you should add your buttons on each column (4 columns) instead of adding 4 buttons in single column. Even if you force the size, the content may still overflow and may align vertically which adds space above it and push it a bit down.

Thanks!

1 Like

Thanks Rad - using Chrome.

Yeah it seems it must be the overflow of the content, but its odd that the button with more content was being pushed down? That would assume that the overflow is being created from the top of the button, rather than the bottom - which confuses me haha. Its also odd that when you add even more content (per above) the button actually aligns correctly?? Do you have the additional flex code added when testing this?

I tried using 4 columns, but on mobile/tablet the buttons shift to one column way too quickly (too wide) so I’m sticking with one column Element (might try 2 also). As a note, this responsive breakpoint scenario (being too wide for one column) is an additional minor bugbear of mine re. Pro/X. If we were able to adjust these breakpoints ourselves that would be a brilliant value-add imo.

Also to note, back on the topic - I also tried not “forcing” the button sizing as much and it still shifted the button down slightly…

Cheers,
Sam

Hi Sam,

Can you provide us exact steps on how we can replicate the issue.

I checked in chrome and tried to reduce and increase text but the buttons are still aligning correctly.

Can you confirm if this is still an issue in your end.

Thanks

Hi Paul

Yep they’re aligning correctly now because I added the code above from Thai.

However, if you remove that code it will weirdly shift the buttons around slightly when adding content - per initial issue.

Cheers,
Sam

Hi Sam,

You will need that code since you are using one column. The column has no alignment code for the button elements.
It’s either you use the css code provide or add your button in four columns.

Thanks

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.