Log in to AnswerLog in to Follow
2023-06-05 10-37-21
Max Mckinnon
57Views
6Comments
Solved
TabsHeaderItem colour change
Question
Reactive
Application Type
Reactive

Hello All, 

I am developing an application that utilizes the Tabs widget and I am struggling with some styling for the TabsHeaderItem. I have managed to figure out how to change their colour via CSS however i cannot figure out how to remove the blue line when the tab is active. I would like the blue line to be removed, or be colour matched to the rest of the tab.

An image of the tabs and my current CSS is imaged below.

Many thanks,
Max


0
0
27 Jul 2022
Solution

Solution: 

Despite the others most likely proving a correct answer, i kept the exact CSS i had however, simply added:

border-right: none!important;

This removed the border as I wanted. The "important" tag is necessary as it did not work without this.

Thankyou to those who replied.


See solution in context
0
0
27 Jul 2022

Hello Maxwell Mckinnon,

add this in your application CSS

.layout-side .app-menu-links a.active {

      border-right: none;

}

if above is not work add important like below 

.layout-side .app-menu-links a.active {

      border-right: none! important;

}

Thanks and Regards,

Akshay Deshpande

1
0
27 Jul 2022

Thankyou it is working now.

0
0
27 Jul 2022

Hello You need to make changes to this class to remove the blue border on active tab


.tabs.tabs-vertical .tabs-header-tab.active {

    border-right: none;

}

.desktop .tabs.tabs-vertical .tabs-header-tab.active:hover {

    border-right: none;

}

.tabs.tabs-vertical .tabs-header .tabs-header-tab {        

border-right: none;

}

 .desktop .tabs.tabs-vertical .tabs-header-tab:hover {  

  border-right: none;    

}

I am also attaching Oml for your reference -

Sample here

Hope this helps 
Thanks

TabsSample.oml
1
0
27 Jul 2022

Thankyou it is working now.

0
0
27 Jul 2022
Solution

Solution: 

Despite the others most likely proving a correct answer, i kept the exact CSS i had however, simply added:

border-right: none!important;

This removed the border as I wanted. The "important" tag is necessary as it did not work without this.

Thankyou to those who replied.


0
0
27 Jul 2022
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.