30
Views
3
Comments
Solved
Why column-item when is inside tabs has max-width set to 99.99%?
Application Type
Reactive
Service Studio Version
11.54.55 (Build 63233)


When I put columns inside tab widget it applies this css.


I don't know what this is doing and its breaking my layout. Can someone explain what this css is doing?

2023-12-16 19-57-03
Sanjay Kushwah
Solution

Hi @Alexandre Aguilar,

.osui-tabs__content-item: This selector targets elements with the class osui-tabs__content-item. These are likely the individual content panels displayed within the tab widget.

.columns: This is a descendant selector. It selects any element with the class columns that is nested within the previously targeted .osui-tabs__content-item element. This means it specifically targets columns that are placed inside the content panels of the tab widget.

max-width: 99.9%: This style rule sets the maximum width of the targeted columns to 99.9%. This restricts the width of the columns to a value slightly less than 100%.

Why it might be breaking your layout:

The max-width: 99.9% rule is likely causing issues because it might be interfering with the intended width you've set for your columns. By setting a maximum width slightly less than 100%, it might be causing horizontal overflow or unexpected margins in your layout.
you can Override the CSS.

like : 

.osui-tabs__content-item .columns {  

max-width: 100% !important; 


Regards,
Sanjay Kushwah

2023-04-16 15-25-31
Krishnanand Pathak

Hi Alexandre,

You can also refer below thread.
https://www.outsystems.com/forums/discussion/94613/outsystems-ui-columns/

Regards
Krishnanand Pathak

2023-06-06 07-55-08
Alexandre Aguilar

Ok, now i understand. Thank you for you help

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