How to make the Horizontal Scroll at Top of the table
Application Type
Traditional Web

Hello, how to make the horizontal scroll at the top of the table? It's because If I set it normally, we need to scroll down first to get to know if there is a horizontal scroll (not the best UX for new user)


Hello jason,

Please check with this

.horizontalScrolll
{
    overflow-x: scroll;
    transform: rotateX(180deg);
}

.normalplace
{
    transform: rotateX(180deg);
}

Go through this URL As well for conformation

https://akshayproject.outsystemscloud.com/Forum/Entity1s.aspx?_ts=637630019117999763

May be this will helps you.

Thanks and regards,

Akshay Deshpande


Hi, it's exactly the answer that I need thankyou. But there is another problem with that css, my vertical scrollbar got reversed too, do you have another solution? Thankyou

If i got you right,Used that scroll only in the normalplace

.normalplace
{
    transform: rotateX(180deg);
    overflow-y: scroll;
}

or else you also do with this 

  transform: rotatey(180deg);

I have made the simple changes to get Y as will as x scroll

.horizontalScrolll
{
    overflow-y: scroll;
    transform: rotateX(180deg);
}

.normalplace
{
    transform: rotateX(180deg);
}

and its works for me,Check previous URL again

as per your need you used that

Thanks,

Akshay Deshpande

Forum.oml

Hi, thankyou for the answer but that is for mobile and reactive. I'm using traditional web

Hello Jason,

Please add this CSS on the page 

.horizontalScroll
{
    overflow-x: scroll;
}

and enclose your table in your container and apply the horizontalscroll class to your container styles classes property.

Please check this URL

 https://akshayproject.outsystemscloud.com/Forum/Entity1s.aspx?_ts=637630019117999763

May be this will helps you.

Thanks and regards,

Akshay Deshpande

Hello, I already implemented that. But my concern is my horizontal scroll is at the bottom of the table. I want to make it to top of the table. Can I know how to do this?

Hello jason,

Please check with this

.horizontalScrolll
{
    overflow-x: scroll;
    transform: rotateX(180deg);
}

.normalplace
{
    transform: rotateX(180deg);
}

Go through this URL As well for conformation

https://akshayproject.outsystemscloud.com/Forum/Entity1s.aspx?_ts=637630019117999763

May be this will helps you.

Thanks and regards,

Akshay Deshpande


Hi, it's exactly the answer that I need thankyou. But there is another problem with that css, my vertical scrollbar got reversed too, do you have another solution? Thankyou

If i got you right,Used that scroll only in the normalplace

.normalplace
{
    transform: rotateX(180deg);
    overflow-y: scroll;
}

or else you also do with this 

  transform: rotatey(180deg);

I have made the simple changes to get Y as will as x scroll

.horizontalScrolll
{
    overflow-y: scroll;
    transform: rotateX(180deg);
}

.normalplace
{
    transform: rotateX(180deg);
}

and its works for me,Check previous URL again

as per your need you used that

Thanks,

Akshay Deshpande

Forum.oml

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