Fixed Tab Header
Question
Application Type
Reactive

I want to make the Tab Header fixed and the contents scrolling. I am looking for the Outsystems style classes that I can use for this. I am using OutSystems 11 web reactive. I tried using the style class "fixed". This took the header out of flow and content is scrolling on top of it. The style class "sticky" didn't make the header fixed.

Any suggestions? Thanks in advance


Hi Ebin,

Technically speaking, something with a "fixed" position will be "out of the flow".

I tried to play with classes to get something close to what you describe.

Please try the following combination:

How far is the result from what you would like to have?

Hello Ebin,

I have try the approach from Maxime, but I think is not perfect, see this link:

https://personal-xchr.outsystemscloud.com/Tests/TabFixedHeader1

I have try another solution with CSS and JS, you can try this:

https://personal-xchr.outsystemscloud.com/Tests/TabFixedHeader2

Maybe it has some issues, but I have test it and looks fine.

I also share de OML.

Hope it helps.

Best Regards,

NunoR

TabFixedHeader.oml

Hi Ebin,


Trying to help, I created a component which is literally Outsystems tabs, but with a sticky header. It can be used the exact same way.


If it fits then you won't need any style class: https://www.outsystems.com/forge/Component_Overview.aspx?ProjectId=11336


Please let me know if it helps.


Hello Maxime,

Your component looks fine, but I think it can be improved. For example if you take a look on my implementation:

https://personal-xchr.outsystemscloud.com/Tests/TabFixedHeader3?_ts=637633444166833432

I found two issues:

1) Background color of the header. I know is a parameter but it's not easy to everyone to know colors;

2) If you click on TAB1 and TAB2, and them again on TAB1 there is a jump.

Hope it helps.

Best Regards,

Nuno R

Hi Nuno,


Thanks a lot for this, it's really beneficial to get feedback like this.

I changed few things to fix the jump/blinking effect you noticed. Please try again and tell me if it's better for you :)

I'm not sure how to make the background color better. Right now the component can take the following formats: "white", "#FFF", "rgb(255,255,255)", "var(--VARIABLE)". I can use the theme colors directly instead, or even ask for a Color entity instead of text. What do you think would be the most logic or flexible way from a user point of view?


Thank you

Hi Nuno and Ebin,


Please let me know once you took some time to try the new version. Let's figure this one :)


The link for the component: https://www.outsystems.com/forge/component-overview/11336/sticky-tabs


See you

Hello Maxime,

Sorry for the late reply.

It look´' s fine for me:

https://personal-xchr.outsystemscloud.com/Tests/TabFixedHeader3?_ts=637644491514936147

The only thing that I thing can be improve is the issue from the background color.

Just an ideia, maybe by default you can put the css variable "--color-background-body" and associate the variable to a color entity that the developer can pick a color from the pallete.

If you want you can add the to the team of the component and I will do that changes.

Hope it helps,

Nuno R

Hi Nuno,

Great idea, let's work together on this component to learn from each other and make it better :)

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