Tab Container - Offset/Indent First Tab

How can I offset/indent the first tab on a tab container component? Something like so:

I see that there are active, inactive, and disabled styles as props.
image

I was thinking I could just add another tab out front, disable it, and set up the style to basically hide it, but I don't see any way to disable a tab. The tabs property is just an array.

image

I would've expected there to be sub-properties to enable/disable the tab.

If you right click the first item in your tab list you can change it to a object/ paste the following in it's place

{
    'text': 'Pumps/Motors',
    'disabled': True
}
1 Like

Thanks. Don't know why the tabs array is not filled with objects like that to begin with, but that worked. I do get a warning "tabs[0] object found, string expected" - just a warning, so nbd.

image
image

Also funny to me that the prop in this case is disabled when in most cases it's enable.
I was thinking maybe it was programmatically linked to the style that is used, but that doesn't seem to be the case.

Any way to make the tab size a % of the window, instead of px?

You can add this in your stylesheet (the advanced style thing):

.tab-menu-item[data-index="0"] {
	flex-basis: 5% !important;
}

Note that this will apply to ALL tab containers.
If you want a special case for just one container, you can create a style class, apply it to the container, then make the css selector more accurate.

1 Like

Backwards compatibility reasons. The first iteration of the Tab container had no concept of enabled/disabled, and for us to provide this functionality we have to allow for it at that level. So we left the default state such that older versions will continue to work, while newer versions could opt into the new functionality. The disabled property name was an unfortunate implementation choice which got past Quality checking and we are now stuck with in perpetuity because... backwards compatibility.

1 Like

Is the index needed?

Like so for a custom style?

.psc-Docks/AlarmTab:tab-menu-item{
	flex-basis: 13% !important;
}

Again, I run into the question of, how do I know that this stylesheet override has been used? How long do I need to wait to see if the changes have been brought from the stylesheet resource?

Makes sense. All reasonable explanations.

No, the selector will look something like .psc-Docks/AlarmTab .tab-menu-item[data-index="0"]

First, you select components with the class .psc-Docks/AlarmTab, then you select their children components with the class .tab-menu-item. This will select all tabs in that tab container, so if you want to resize all of them you just leave it like that.
If you only want to resize the first tab (the hidden one), you need to be more specific. You could use firstChild on tab-menu, I chose to use the data-index on the tab itself.

There's no delay between change and effect. You'll see changes right away. If there's no errors :wink:

It doesn't seem to do anything.

.psc-Docks/AlarmTab .tab-menu-item{
	flex-basis: 5% !important;
}

tried with and without the space

Docks/AlarmTab is a blank style

Oh, right, try .psc-Docks/\AlarmTab instead. or \/, I can never remember.

.psc-Docks\/AlarmTab .tab-menu-item{
	flex-basis: 13% !important;
}

worked for me

Any way to set the height as a percent?

The fixed size of the tabs are really annoying to work with in a scaled coordinate container.

Add an height property to that style. Its value can take a percentage.

Tried that. No such luck.

It might be overridden by a more specific selector somewhere.
Try height: x% !important.

And, by the way, you can use em and such for this property.

That is what I tried

.psc-Docks\/AlarmTab .tab-menu-item{
	flex-basis: 13% !important;
	height: 50% !important;
}

Seems the height is the % of the tab size height prop of the tab container component.

Put it in a new selector that targets the whole menu:
.psc-Docks\/AlarmTab .tab-menu {}

If it still creates a gap below the tabs, you'll need to change some of its flex properties to align it to the bottom

Now the view is gone

.psc-Docks\/AlarmTab .tab-menu{
	height: 5% !important;
}

Increasing the % just stretches the height of the tabs.

I can't right now, but I'll take a closer look when I can.

How do I look at all of the selectors that are available?

**edit:
looks like it's a flex. This worked

.psc-Docks\/AlarmTab .tab-menu-item{
	flex-basis: 13% !important;
	
}
.psc-Docks\/AlarmTab .tab-menu{
	flex-basis: 5% !important;
}