How to do scrolling by Horizontal scroll bar in outsystems for an empty web page?

How to do scrolling by Horizontal scroll bar in outsystems for an empty web page?

Hello Swetha. 

Could you explain better what are you trying to achieve? 

You asked for scrolling on empty Web page, but your image shows a page with a table records... 

Cheers 

Hello Eduardo,

Is it possible to create a horizontal scroll bar for that page with particular table record with or with out using html code in outsystems?


Hi, 

Still don't get your question, sorry. But I'll try a shot here. 

Horizontal bars can be automatically added to an HTML element (like div) through CSS. 

Probably you can use this post as guiding: https://www.outsystems.com/forums/discussion/42915/horizontal-scroll/

In any case, I would inspect the screen in the browser just to be sure to which selector to use to apply the CSS. 

You can also put your content in a Container and apply the style directly to it, using the Styles Editor. 

But I am not sure this works out of the box with TableRecords, as I think they adapt to the available parent size. 

Could you explain better what is you are trying to achieve? 

Cheers

Hi

Yes, I will try with the above solution.

My Question is that I have created a table with some more fields of record. For the fields to be seen. i need to use horizontal scroll bar Action.


I have used this below code for the scroll bar action. but its not being applied to the whole page.

<html>
 <body>
   <div style ='width:900px; height:30px; border:1px solid black; overflow-x:scroll; ;overflow-y:hidden; white-space:nowrap;'>
        <!-- various of text here that can makes it go out the border-->
    </div>  
 </body>
 </html>


You need to find which class is the content section of your page, which css class it has, and either edit the class directly on the theme, if you want to modify it on every screen of your app, or override the class on your screen, if you only want that in that screen

In my case, thats the class: "content"