What if we want the scroll option on top of the table like it has at bottom?

What if we want the scroll option on top of the table like it has at bottom?

  

This post gave me perfect solution - https://www.outsystems.com/forums/discussion/3138/scroll-on-table-records/ 

but I want this scroll bar on top of table records as well.

any idea, if it is possible ?

Hello Darshan,

I think there are NO way to do this without using JavaScript.
You can see an example here:

https://success.outsystems.com/Documentation/10/Reference/OutSystems_APIs/HTTPRequestHandler_API#GetEntryURL

Cheers,
Eduardo Jauch

Hi Eduardo Jauch, 

thank you for reply.

check this fiddle:

http://jsfiddle.net/avrahamcool/uPwfn/2/

.Container {     width: 200px;     overflow-y: auto; } .Content {     width: 300px; } .Flipped, .Flipped .Content {     transform:rotateX(180deg);     -ms-transform:rotateX(180deg); /* IE 9 */     -webkit-transform:rotateX(180deg); /* Safari and Chrome */ }

<h1>And here is the Flipped one</h1> <div class="Container Flipped">     <div class="Content">I'm in Content and I'm very long</div> </div>

Its a nice solution to put the bar on Top instead of Bottom using Transform (CSS only solution), but than you will not have the bar at the bottom at the same time...  

Eduardo Jauch wrote:

Its a nice solution to put the bar on Top instead of Bottom using Transform (CSS only solution), but than you will not have the bar at the bottom at the same time...  

sorry, the title was a bit ambigious in that and did not read the post properly.

(beside I am curious why you even want to have scrollbars on top and bottom)



In this case, I don't. It is not my topic ;)

But we have an application where this is a requirement for a specific List Records.

In our case, the list records must not be paginated, and even if the number of rows will never be too big (usually less than 20), it can be long enough so the screen will not show all the lines at the same time. 

And because the list is very "long" (horizontally), we use it inside a div with a horizontal scroll bar, but we need to be able to scroll both at the top and the bottom, to avoid having to scroll down to scroll right and than scroll up again to see the top lines :)

Cheers,
Eduardo Jauch

J. wrote:

Eduardo Jauch wrote:

Its a nice solution to put the bar on Top instead of Bottom using Transform (CSS only solution), but than you will not have the bar at the bottom at the same time...  

sorry, the title was a bit ambigious in that and did not read the post properly.

(beside I am curious why you even want to have scrollbars on top and bottom)



Hi J,

I will try your solution.

Data will be of more than 50 columns, so I need scroll bar at both location  - top and bottom.

thank you for your reply.


Eduardo Jauch wrote:

You can see an example here:

https://success.outsystems.com/Documentation/10/Reference/OutSystems_APIs/HTTPRequestHandler_API#GetEntryURL

Eduardo, that doesn't seem to link to an example at all? Can you give the right URL?

Solution

Oh man...

I even didn't noticed that I provided the wrong link (Ctrl+C  Ctrl+V problem).

Here is the link I intended to put is this one: http://aburt.com/topscrollbar/

I also did a small example here, adapting to use jQuery: https://eduardojauch.outsystemscloud.com/ScrollBarTopAndBottom/Home.aspx?_ts=636391644021802422

The OML is attached.

NOTICE: I forgot to mention before, this only works if you fix the width of both internal DIVs, or if you put the same content inside both div's. I used a jQuery approach, so, when the document is ready, I set the width of the inner div (fake) with the width of the real inner div.

Cheers,
Eduardo Jauch

Solution

Eduardo Jauch wrote:

Oh man...

I even didn't noticed that I provided the wrong link (Ctrl+C  Ctrl+V problem).

Here is the link I intended to put is this one: http://aburt.com/topscrollbar/

I also did a small example here, adapting to use jQuery: https://eduardojauch.outsystemscloud.com/ScrollBarTopAndBottom/Home.aspx?_ts=636391644021802422

The OML is attached.

NOTICE: I forgot to mention before, this only works if you fix the width of both internal DIVs, or if you put the same content inside both div's. I used a jQuery approach, so, when the document is ready, I set the width of the inner div (fake) with the width of the real inner div.

Cheers,
Eduardo Jauch

Thank you Eduardo Jauch,

I will implement this solution in my project.. 

Thanks for your support...



Eduardo Jauch wrote:

Oh man...

I even didn't noticed that I provided the wrong link (Ctrl+C  Ctrl+V problem).

Here is the link I intended to put is this one: http://aburt.com/topscrollbar/

I also did a small example here, adapting to use jQuery: https://eduardojauch.outsystemscloud.com/ScrollBarTopAndBottom/Home.aspx?_ts=636391644021802422

The OML is attached.

NOTICE: I forgot to mention before, this only works if you fix the width of both internal DIVs, or if you put the same content inside both div's. I used a jQuery approach, so, when the document is ready, I set the width of the inner div (fake) with the width of the real inner div.

Cheers,
Eduardo Jauch

Nice Solution !! :)


As already noticed the solution is great.


But I notice that the scrollbars have different sizes. Can that be solved?



Hello Alberto, 

Yes.

Change the overflow property of the css of the fake div to this:

overflow-x:scroll;
overflow-y:hidden;

This will solve the "gap" :)

Thanks Eduardo. ;)

You're welcome ;)