Archived topic

Buttons group, "Fill Horizontal Space" make some buttons two lines high.

5 replies · Started by Stephen on July 11, 2021

Viewing posts 1–6 of 6

July 11, 2021 at 10:12 am #1851965

I have a button group. When I check "Fill horizontal space", it makes some buttons two lines tall.

It's not just buttons that are two words, some two-word buttons just stretch properly. And it changes different buttons, depending on whether it's desktop, tablet, or mobile.

How can I prevent them from stacking words within the button?

July 11, 2021 at 10:52 am #1852008

Hi Stephen,

Can you link us to where we can see the issue?

Let me know :)

July 11, 2021 at 11:02 am #1852016

yes

July 11, 2021 at 4:32 pm #1852181

Give this CSS a try:

.gb-button-wrapper-07a1b4f1 > .gb-button .gb-button-text {
    white-space: nowrap;
}

Let me know how it works :)

July 11, 2021 at 5:15 pm #1852196

Worked great. I thought that was going to just fix one button, but it prevented any buttons from doubling in tablet and mobile view too. Thanks.

Seems like that's not something that should happen, right? Seems like they should never double up unless user adds two lines in the button.

July 12, 2021 at 9:29 am #1853118

GB doesn't define this CSS property, so the behavior is by default.

I guess your idea makes sense for buttons :)

This archived topic is closed to new replies.

Start building better websites today.