# Perspective Horizontal Menu Component Equal Tab Width

**URL:** <https://forum.inductiveautomation.com/t/perspective-horizontal-menu-component-equal-tab-width/44808>\
**Category:** Ignition\
**Tags:** ignition80, ignition81, perspective\
**Created:** [March 23, 2021, 6:28pm UTC](https://forum.inductiveautomation.com/t/perspective-horizontal-menu-component-equal-tab-width/44808 "2021-03-23T18:28:43Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![pradeepvarma](https://avatars.discourse-cdn.com/v4/letter/p/9d8465/32.png) [@pradeepvarma](https://forum.inductiveautomation.com/u/pradeepvarma)\
**Post date:** [March 23, 2021, 6:28pm UTC](https://forum.inductiveautomation.com/t/perspective-horizontal-menu-component-equal-tab-width/44808/1 "2021-03-23T18:28:43Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![matthew.ayre](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/matthew.ayre/32/19499_2.png) [@matthew.ayre](https://forum.inductiveautomation.com/u/matthew.ayre)\
**Post date:** [March 23, 2021, 8:51pm UTC](https://forum.inductiveautomation.com/t/perspective-horizontal-menu-component-equal-tab-width/44808/2 "2021-03-23T20:51:56Z")

</div>

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

![hmProps](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/f/ef78d8b26f15b3f76ca0511ae9b692a51292b701.jpeg)

Unfortunately, a lot of the properties that can be used within the style props are not explicitly documented. The style props use [css3](https://www.w3schools.com/css/). You will need to experiment which will work and where, as sometimes it is not always clear.

---

<div class="post-metadata">

**Author:** ![pradeepvarma](https://avatars.discourse-cdn.com/v4/letter/p/9d8465/32.png) [@pradeepvarma](https://forum.inductiveautomation.com/u/pradeepvarma)\
**Post date:** [March 30, 2021, 2:59pm UTC](https://forum.inductiveautomation.com/t/perspective-horizontal-menu-component-equal-tab-width/44808/3 "2021-03-30T14:59:09Z")

</div>

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 😑

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.

---

<div class="post-metadata">

**Author:** ![matthew.ayre](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/matthew.ayre/32/19499_2.png) [@matthew.ayre](https://forum.inductiveautomation.com/u/matthew.ayre)\
**Post date:** [March 30, 2021, 3:08pm UTC](https://forum.inductiveautomation.com/t/perspective-horizontal-menu-component-equal-tab-width/44808/4 "2021-03-30T15:08:43Z")

</div>

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 🤔 but it’s been a while since I’ve done this.

CSS is fun 😃 and is required to create custom [themes](https://docs.inductiveautomation.com/display/DOC81/Perspective+Themes). This can be a lot more efficient and powerful down the road.

---

<div class="post-metadata">

**Author:** ![pradeepvarma](https://avatars.discourse-cdn.com/v4/letter/p/9d8465/32.png) [@pradeepvarma](https://forum.inductiveautomation.com/u/pradeepvarma)\
**Post date:** [March 30, 2021, 5:34pm UTC](https://forum.inductiveautomation.com/t/perspective-horizontal-menu-component-equal-tab-width/44808/5 "2021-03-30T17:34:32Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![wking](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/wking/32/21823_2.png) [@wking](https://forum.inductiveautomation.com/u/wking)\
**Post date:** [March 30, 2021, 8:49pm UTC](https://forum.inductiveautomation.com/t/perspective-horizontal-menu-component-equal-tab-width/44808/6 "2021-03-30T20:49:11Z")

</div>

@pradeepvarma  
show screenshot of that components property menu

---

<div class="post-metadata">

**Author:** ![matthew.ayre](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/matthew.ayre/32/19499_2.png) [@matthew.ayre](https://forum.inductiveautomation.com/u/matthew.ayre)\
**Post date:** [March 31, 2021, 7:17am UTC](https://forum.inductiveautomation.com/t/perspective-horizontal-menu-component-equal-tab-width/44808/7 "2021-03-31T07:17:49Z")

</div>

@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 🙂

---

<div class="post-metadata">

**Author:** ![catherine.fowler](https://avatars.discourse-cdn.com/v4/letter/c/34f0e0/32.png) [@catherine.fowler](https://forum.inductiveautomation.com/u/catherine.fowler)\
**Post date:** [November 4, 2021, 6:30pm UTC](https://forum.inductiveautomation.com/t/perspective-horizontal-menu-component-equal-tab-width/44808/8 "2021-11-04T18:30:28Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [November 5, 2021, 7:59am UTC](https://forum.inductiveautomation.com/t/perspective-horizontal-menu-component-equal-tab-width/44808/9 "2021-11-05T07:59:56Z")

</div>

with theme.css  
try:

```auto
.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

---

<div class="post-metadata">

**Author:** ![catherine.fowler](https://avatars.discourse-cdn.com/v4/letter/c/34f0e0/32.png) [@catherine.fowler](https://forum.inductiveautomation.com/u/catherine.fowler)\
**Post date:** [November 5, 2021, 12:54pm UTC](https://forum.inductiveautomation.com/t/perspective-horizontal-menu-component-equal-tab-width/44808/10 "2021-11-05T12:54:20Z")

</div>

That alone seems to get overridden:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/6/067c5d2d6ced60591d2c049b1762137fd7b3ea79.png)

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 🙂

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.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [November 5, 2021, 12:58pm UTC](https://forum.inductiveautomation.com/t/perspective-horizontal-menu-component-equal-tab-width/44808/11 "2021-11-05T12:58:26Z")

</div>

Ah didnt see that. ill edit my reply 🙂

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.

---

<div class="post-metadata">

**Author:** ![catherine.fowler](https://avatars.discourse-cdn.com/v4/letter/c/34f0e0/32.png) [@catherine.fowler](https://forum.inductiveautomation.com/u/catherine.fowler)\
**Post date:** [November 5, 2021, 1:03pm UTC](https://forum.inductiveautomation.com/t/perspective-horizontal-menu-component-equal-tab-width/44808/12 "2021-11-05T13:03:17Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [November 5, 2021, 1:08pm UTC](https://forum.inductiveautomation.com/t/perspective-horizontal-menu-component-equal-tab-width/44808/13 "2021-11-05T13:08:11Z")

</div>

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.