Perspective Horizontal Menu Component Equal Tab Width

Ignition
, ,
1

Hello,

I am trying to find a way to make all the tabs/buttons in Horizontal Menu Component the same width.
Basically, I don’t want the buttons to flex by label character length.
So far the only solution I found is by adding padding to individual items which is cumbersome.
Any suggestions are appreciated.

2

Hi @pradeepvarma, this can be done by defining ‘width’ in the itemStyle property as shown:

hmProps

Unfortunately, a lot of the properties that can be used within the style props are not explicitly documented. The style props use css3. You will need to experiment which will work and where, as sometimes it is not always clear.

1 Like
3

Thank you very much. That worked. I’ve been trying all properties available when you click the plus icon next to the itemStyle but “width” is not one of them. Guess I have to learn CSS now :expressionless:

For anyone looking to do the same, FYI. Once the width is changed, the text is not centered anymore. I tried to center text but couldn’t do that with any of the available style properties. Just using “left padding” for now to manually center it.

1 Like
4

Hi @pradeepvarma glad it helped. It’s odd the text isn’t centred anymore, I’m sure when I did it last it maintained it’s alignment using the the text alignment from the style popup :thinking: but it’s been a while since I’ve done this.

CSS is fun :smiley: and is required to create custom themes. This can be a lot more efficient and powerful down the road.

1 Like
5

It’s not doing that with ‘textAlign’ as of 8.1.4.

6

@pradeepvarma
show screenshot of that components property menu

7

@pradeepvarma, I did a quick test and you’re right it does not seem to work. Once I get a bit more time I’ll have a play and let you know if I get it working. Let me know if you beat me to it :slight_smile:

8

Did you ever happen sort out how to center the text if you’ve set the width? Additionally, is there a way to get the text to wrap? wordWrap: break-word doesn’t seem to apply to it, and I’d love to keep each button the same width but make longer menu item names wrap onto two lines.

9

with theme.css
try:

.horizontal-menu-menu-item span{
  white-space: pre-wrap !important;
  word-break: break-word;
  margin:auto;
}

and ofcource just set the width in the style props like before

1 Like
10

That alone seems to get overridden:
image

But adding !important to white-space does work:

.horizontal-menu-menu-item span{
  white-space: pre-wrap !important;
  word-break: break-word;
  margin:auto;
  justify-content: center;
}

Thanks again, you’re helping me out all over the place :slight_smile:

Edit: Adding justify-content to make sure the content on all buttons is centered. Without it, just the text on buttons with multiple lines gets centered.

11

Ah didnt see that. ill edit my reply :slight_smile:

Btw i notice you put the style in light.css?
Thats not a good idea you should create a new style that inherts light.css. Else on a new update it might get overwritten.

12

I do have my desired overrides in a separate file and just have an added import line in light.css to grab it; would that also be overridden?

13

The one line in light.css could be yes.
Though i suppose it isnt to much work to add that back if it ever happends.

1 Like