# Tab container style

**URL:** <https://forum.inductiveautomation.com/t/tab-container-style/96352>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [September 24, 2024, 11:53am UTC](https://forum.inductiveautomation.com/t/tab-container-style/96352 "2024-09-24T11:53:36Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tokyo\_mht](https://avatars.discourse-cdn.com/v4/letter/t/c37758/32.png) [@Tokyo\_mht](https://forum.inductiveautomation.com/u/Tokyo_mht)\
**Post date:** [September 24, 2024, 11:53am UTC](https://forum.inductiveautomation.com/t/tab-container-style/96352/1 "2024-09-24T11:53:36Z")

</div>

I have tab container in which  
Active tab - background color - Black and text color Orange ,i want to add box shadow for active tab. How i can do that ?

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [September 24, 2024, 12:04pm UTC](https://forum.inductiveautomation.com/t/tab-container-style/96352/2 "2024-09-24T12:04:33Z")

</div>

tab containers have a `props.tabStyle.active` property, you should be able to add `boxShadow` here

---

<div class="post-metadata">

**Author:** ![Tokyo\_mht](https://avatars.discourse-cdn.com/v4/letter/t/c37758/32.png) [@Tokyo\_mht](https://forum.inductiveautomation.com/u/Tokyo_mht)\
**Post date:** [September 24, 2024, 12:07pm UTC](https://forum.inductiveautomation.com/t/tab-container-style/96352/3 "2024-09-24T12:07:31Z")

</div>

but it's not working

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [September 24, 2024, 12:09pm UTC](https://forum.inductiveautomation.com/t/tab-container-style/96352/4 "2024-09-24T12:09:51Z")

</div>

> [@Tokyo\_mht](#):
>
> it's not working

Sorry, but that isn’t nearly enough information to help you with.

What did you do? What did it look like? What were you expecting? Where did you do it?

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [September 24, 2024, 12:14pm UTC](https://forum.inductiveautomation.com/t/tab-container-style/96352/5 "2024-09-24T12:14:02Z")

</div>

Does for me.  
Now keep in mind that you may not see the shadow because the menu is "too small".  
Try adding `paddingBottom: 5px` to the `menuStyle` property, see if you get some results.

---

<div class="post-metadata">

**Author:** ![Tokyo\_mht](https://avatars.discourse-cdn.com/v4/letter/t/c37758/32.png) [@Tokyo\_mht](https://forum.inductiveautomation.com/u/Tokyo_mht)\
**Post date:** [September 24, 2024, 12:15pm UTC](https://forum.inductiveautomation.com/t/tab-container-style/96352/6 "2024-09-24T12:15:35Z")

</div>

I added box shadow for tabStyle.Active  
-BoxShadow -(10px 10px #FFF)  
I want outlet shadow effect for active tab ..

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [September 24, 2024, 12:18pm UTC](https://forum.inductiveautomation.com/t/tab-container-style/96352/7 "2024-09-24T12:18:19Z")

</div>

That's not even remotely the proper syntax for css properties.

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/3/73b37615714dccc77fc1e54c660b72252880b45b.png)

---

<div class="post-metadata">

**Author:** ![Tokyo\_mht](https://avatars.discourse-cdn.com/v4/letter/t/c37758/32.png) [@Tokyo\_mht](https://forum.inductiveautomation.com/u/Tokyo_mht)\
**Post date:** [September 24, 2024, 12:19pm UTC](https://forum.inductiveautomation.com/t/tab-container-style/96352/8 "2024-09-24T12:19:56Z")

</div>

i think this works

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [September 24, 2024, 12:25pm UTC](https://forum.inductiveautomation.com/t/tab-container-style/96352/9 "2024-09-24T12:25:23Z")

</div>

If you want things to show properly, the next thing you need to do is add some padding to the menu style (or some margin + `overflow: visible`), then you'll probably want to get rid (or move) the horizontal line that messes things up  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/2/2292918baec1d156edae064cea24dd8718177c20.png)

```css
.menu-right, .tab-menu-item {
	border: none;
}

```

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/e/8e1d37be22cdf284c9ab3e134e1cf01ea060bf75.png)

You may want to make that selector a bit more specific, in case you have other tab containers where you don't want to apply that style, or some other components that use the same classes.