Button Bar more than two buttons

It’s not really guesswork when you know the in and outs of the system so well. As they say, clearly this is not your first rodeo :horse_racing:

You “guessed” right and it now works perfectly!
Thanks again and have a great weekend

1 Like

Hi
Not sure what happened, but the tiles have “grown”. I’m using the 3:1 setting. A couple of days ago it was roughly the height of the button bar component, but now is much higher.
Any ideas? (=tell me what I touched to mess this up… )
Thanks

I have no idea. How many tiles do you have?
Can I see a screenshot?

Sure. Apologies for having to mask the text. Top row is the inline list and below it I’ve placed a button bar for comparison

Is that phone or tablet layout?
Those proportions look about right for tablet layout.
Here is what I get with 3 tiles as 3x1

Phone:
Screen Shot 2022-01-16 at 8.47.45 PM

Tablet:

You’re right, indeed tablet mode.
But that’s not making any sense: in tablet mode, the tiles are bigger than the buttons, while in phone mode the buttons are bigger (and they are both much more aesthetic). Now way to tweak this?

I’d say it’s possible, but CSS is not one of my strengths. You’d need to detect the viewport, and then conditionally apply some appropriate CSS. @ThinhDinh might be able to help you with this one.

The tile sizing is a ratio. 3 parts width to 1 part height. It’s not a set size in pixels. It will vary depending on the width of your screen. I think tiles would look very weird if you had a really wide screen and the tiles stretched to fit the width but the height didn’t change. At that point the tiles wouldn’t be following the ratio and would actually need a ratio of 6:1, 9:1 or 12:1, which isn’t an option. Also, your images in the tiles would end up being stretched.

Buttons on the other hand have a set height and don’t contain images. Because of their design, the width can steet accordingly without affecting how the button looks. The text in a button just centers itself within the button.

Like @Darren_Murphy said, you would probably need some code to detect the viewport and apply different CSS depending on the screen width. Or maybe you can apply a static height to the tiles with some CSS, so it’s always the same height, but the width will still change depending on screen size.

Thanks to both of you.
I guess this is the downside of working around the lack of possibilities to configure the button bar. Hope someone here can find a solution to make this a bit more aesthetically pleasing.

I think this is the way to go, better force both of them to the same size if you’re gonna do it.

<pre><span><style>

div[id*='screenScrollView'] > div > :nth-of-type(1) .tile-image-area >div {
height: 45px !important;
}


div[id*='screenScrollView'] > div > :nth-of-type(2) >div >div button {
min-height: 45px !important;
} 

Please note that I’m specifically targeting the 1st and 2nd elements on the screen here.

More on this method:

5 Likes

image

6 Likes

Thanks!
That’s not working for me.
What I tried is to tweak @Darren_Murphy’s code:

<pre><span><style>
[data-test="tile-item"] 
{color: black} .tile-overlay { background: none; 
height: 45px !important; 
},

But that’s resulting in this… :slight_smile:
Backgroud and foreground ? :open_mouth:

You’re probably better off tweaking what @ThinhDinh gave you. It’s a just a matter of targeting the correct nth-of-type(). Try fiddling with the numbers there…

But I can’t find the correct nth.
I tried moving the list to the top of the page but it’s probably not much relevant.
When inspecting the page code, where can I find this nth?

What I normally do is start at 1 and work my way up until I find it. Just be aware that once you have it, if you subsequently rearrange the components on the screen you’ll likely break it.

And take into account the different visibility conditions as well while we’re at it. One component might be 2nd to one user but 1st to another one.

The method I used was merely to protect you from forcing all inline lists and button bars on the screen to behave the same way. Let me know if you don’t have multiple of them and we can tweak the code.

oh, I see.
But I’m fine with forcing them all to behave the same

For the tile, you can use this.

<pre><span><style>

[data-test="tile-item"] .tile-image-area >div {
height: 45px !important;
}

I just realized the button bar does not have a stable class name so if you want to use that part you should use my method.

I see what you mean @Eric_Penn :sweat_smile:

1 Like

Thanks but not working :frowning:
No change in tile height