Fixed Header (Scrollbar problem and rounded tip table )
Application Type
Traditional Web

Hi, I tried to make a fixed header with this documentation

https://success.outsystems.com/Documentation/How-to_Guides/Front-End/How_to_scroll_records_in_a_table_with_a_fixed_header?_gl=1*cqypdo*_ga*MTE2NzI1MDU0MC4xNjE0MDYyNDk1*_ga_ZD4DTMHWR2*MTYxODQwODc0NC42Mi4xLjE2MTg0MDkzMzUuMzU.


But the problem is my table is rounded each of the tip that makes difference between header and bodytable. I need to make it just like normal table. How to change that in css?
The second problem is my scrollbar that reduced the width of my bodytable and make it not same with the header above

Solution

I think the CSS property your looking for is "border-radius", you'll have to apply this property something like this

border-radius: 5px 5px 0px 0px;

You may have to also use the important! tag to ensure it overrides any other CSS

border-radius: 5px 5px 0px 0px important!;

As for the scrollbar the easiest option may just be putting some padding in your header to accommodate the scrollbar, let me do some work on this part though

Hi,

Have you created any style classes for these elements? You can create the classes in the page or module CSS editor then apply them in different spots in the table (Header, Body Etc.). I think this documentation might help 

https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI/Look_and_Feel/Cascading_Style_Sheets_(CSS)

Let me know if you need more clarification! 

-Bryan

Hi, thanks for the answer

I already did all the style properties needed like tablerecords_header, padding, word-break, etc and it results like above. And I don't know the css code to make my table not rounded tip like that. The second problem is my scrollbar reduced the width of my bodytable so it's not same with the header, how to solve this?


Solution

I think the CSS property your looking for is "border-radius", you'll have to apply this property something like this

border-radius: 5px 5px 0px 0px;

You may have to also use the important! tag to ensure it overrides any other CSS

border-radius: 5px 5px 0px 0px important!;

As for the scrollbar the easiest option may just be putting some padding in your header to accommodate the scrollbar, let me do some work on this part though

Much thank you for this.. It works well bro thankyou so much

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