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.

Thank you, but in this case, how do you contain the same column width? simply CSS?

Hello Sergey,

If you want to use 2 tables as Cristiano said, you can solve the width problem by insert a fix width on all columns and on for tables (you can use percentages to adapt to screen resolution). When you click on the cell, you can define the width for that column.

If you don't want to use 2 tables, you can fake the header row by designing an header with divs, but you'll have the same "problem". You need to style both (divs and table).

You can find a bunch of solutions in the following link:

https://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody


I tried the last example of the correct response using The Pure CSS Solution Table with 100% Width. I only changed the width because I only have 4 columns instead of 5.

tbody td, thead th {
    width: 23%;
    float: left;
}


The result is the following: https://emanuelfreitas.outsystemscloud.com/ScrollTable/

pradip chavhan wrote:

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.

We already have the component you can use this to make your table header scorable 

https://www.outsystems.com/forge/component/1009/headerfixed/

it is easy to use.


Regards,

PP