How should I place vertical scroll for table records

How should I place vertical scroll for table records

  
Hello All,
I have table records having more number of columns to show so it add horizontal scroll on browser window.I just want scroll for table records with static heads.scroll bar not for whole browser.
I have attached screen shot for reference. Please let me know if anybody having an idea how to do that.
Hello Pradip!

What you need Is to work with overflow-x.

Inside the table add some overflow-x:auto but set your height to the width you need (probably 100%?)

Sily example I made in 2 min: https://jsfiddle.net/h08sbdre/

Anything else let me know!

Best regards,
Cristiano
Hello Cristiano Marques,
Thaks for your valuable reply I want horizontal scroll not vertical on width not on height.Actually horizontal scroll on browser window gates added when I have more no of fields on table records to display.In actaully scroll only for records not for page.

the approach I told you works for horizontal as well and even better.

Set up a fixed height to wrap up your table and overflow:auto in the style.

Silly Example Part 2: https://jsfiddle.net/h08sbdre/1/
Hi cristiano-marques,
I know that we can do it in HTML that I know but How to do it in outsystems.How do we define <div></div> in outsystems.
Please tell me step by step example if you know anything.

Can you please tell me how to show tooltiip for textbox in outsystems. I want to show comment which I have fetched from database as a tooltip for textbox.
Ok, I'll try to show you with images : )

Create the table records like you usually do, set a container around it and add a Class to it (style) called FixedHeight.

Set this in the CSS of the page 


.FixedHeight{
  overflow:auto;
  height:200px;
}

This would look something like this:


Regarding the tooltip if you mean the generic one from the html attribute title you can use simply this:


If you're looking for a better looking tooltip I recommend you to use the Tooltip from SILK UI 

Hope I could help!
 
Hello,

Thanks for your valuable reply. But in this case we are unable to fix the headers. I want fix headers scroll for only table data.
How to show tooltip on textbox please tell me.I want to show dynamic value on tooltip.
Oh, what you want to do requires a bit more work. To fix the headers you have to make a seperate table to have the headers, and use table records exactly how I told you before and use the Property ShowHeaders = False.

This way you have the table working with the scroll and headers will be always there, you just have to make sure the columns have the exact same width.

Regarding tooltip, in my example above I have "Custom Title", replace that with the expression you want, it could be from the database directly.