Perspective Tab Container - Moving Tabs to the Bottom

Hey everyone!

I am creating a screen a section needs to switch between some Ignition control elements and an inline frame component for an existing customer web interface. I want to move the tabs to the bottom of the container as opposed to the top. Does anyone know if this is possible? Running 8.0.16.

Thanks!

1 Like

it looks like it’s possible if you have a custom theme set up. You would want to modify the tab-container.css file and make the following changes:

You would need to add an overwrite of the default flex direction:

.ia_container--primary {
	flex-direction: column-reverse;
}

You would also then need to update the borders of the tabs because they’re written as if the tabs would always be at the top of the container:

.ia_tabContainerComponent__tabMenuRight--classic {
    border-top: var(--containerBorder);
}

.ia_tabContainerComponent__content {
    border-left: var(--containerBorder);
    border-right: var(--containerBorder);
    border-top: var(--containerBorder);
}

.ia_tabContainerComponent__tab--classic--active {
    background-color: var(--container);
    font-weight: 500;
    color: var(--neutral-90);
    border-bottom: var(--containerBorder);
    border-top: none;
}

.ia_tabContainerComponent__tab--modern {
    color: var(--neutral-70);
    border-top: var(--containerBorder);
    box-shadow: none;
    transition: box-shadow 0.2s linear;
    font-size: 0.875rem;
}

I’ll give this a try, thanks!!

I’ve tried adding the first block of CSS to the tab-container.css file in the default light theme with no success.

I created a custom theme, and imported my own custom.css file that contains both the first block and second block of CSS. In this case, when I switched to my custom theme I saw the border changes take place but the tabs were still at the top.

My custom.css is being imported what I believe is very last, which should allow it to override the normal theme settings. I am importing the custom.css after the index.css import in the “mytheme.css” entry file.

Yah, that was provided as more of a theory, and was missing a couple of small albeit important pieces:
I’ve created a custom.css file which structures the appearance as would be expected (The very-specific tab container rule declaration is required):

@import "./light/index.css";

.ia_container--primary[data-component="ia.container.tab"] {
	flex-direction: column-reverse;
}

.ia_tabContainerComponent__tabMenuRight--classic {
    border-top: var(--containerBorder);
    border-bottom: none;
}

.ia_tabContainerComponent__content {
    border-left: var(--containerBorder);
    border-right: var(--containerBorder);
    border-top: var(--containerBorder);
}

.ia_tabContainerComponent__tab--classic--active {
    background-color: var(--container);
    font-weight: 500;
    color: var(--neutral-90);
    border-bottom: var(--containerBorder);
    border-top: none;
}

.ia_tabContainerComponent__tab--modern {
    color: var(--neutral-70);
    border-top: var(--containerBorder);
    box-shadow: none;
    transition: box-shadow 0.2s linear;
    font-size: 0.875rem;
}

Thank you for the quick response and your assistance here!

This still behaves the same way, I see the changes to the borders on the tabs but they are still located above the content part of the container.

What version are you using? The provided code worked for me on 8.1.0.

We are using 8.0.16

Testing with tab container on a coordinate view and also in a flex view, both are behaving the same way.

I ended up using two tab containers in a flex container. Hiding the tabs on the top container and hiding the content part of the bottom container and then binding the two currentTabIndex properties together worked pretty well.

This may be an option for others wanting to do this without going the custom theme route.

Hi everyone, I’ve a question about Tab styles.
In my Tab View, I don’t want any borders.
I’ve set “border-style: none;” in all styles props of my container but there is always the ia_tabContainerComponent__tabMenuRight style with border-bottom.
How can I change this style in Designer ?
I don’t want to update CSS files for now.

Thank you