How to add css customizations to TabView component

[jbn1981]

I purchased Roma template and I'm trying to add some customizations to the TabView component.

I have two tabs and I want the headers to be 50 % of the total lenght.

I added the attribute className with my custom value p-tabview-50, like this:

Code: Select all

<div className="p-col-12 p-md-6 p-lg-6 p-col-6">
	<div className="card card-w-title">
		<TabView className="p-tabview-50">
			<TabPanel header="Status">
				<div className="messages-title">
					<span>November 13, 2018</span>
				</div>
			</TabPanel>
			<TabPanel header="Messages">
				<div className="messages-title">
					<span>November 13, 2018</span>
				</div>
			</TabPanel>
		</TabView>
	</div>
</div>

And that reflects ok in the generated html:

Code: Select all

<div class="p-tabview p-component p-tabview-50">

And then I added this to the _layout_styles.scss file:

Code: Select all

.p-tabview-50 {
    .p-tabview-nav {
        li {
            width: 50%;
        }
    }
}

But no effect.

If I add that width: 50% css code manually to the <li> element in the browser inspector, then it behaves ok.

Any help? Thanks!

[mert.sincan]

Hi,

I couldn't replicate it. Could you please check your css style in the inspector of the browser?

Best Regards,