Question

I have a table that has a fixed height and width.
I have mentioned height as 200px and width as 100%(inside another div of 600Px width)
now I am adding a new column at run time so the width needs to be increased so I thought to put a scroll bar.
I am doing the following to achieve this

$('.showDateTime').show();
$('.showDateTime').css("width", "300px");
$('#TransactionErrorsTableData').css("overflow-x", "scroll");

The issue is that the horizontal scroll bar comes but is disabled.
Where as the vertical scroll bar is working fine.
I have set overflow as auto for my div “TransactionErrorsTableData”

Any idea on how to enable the horizontal scroll bar?

P.S. I m kind of stuck up so please pardon if the question is not clear, please comment if any details are required.

Answer 1

I cannot accurately get your exact problem seeing you only posted a snippet, and didn’t post any examples, but I’ll give it a go.

If you use the CSS rules overflow-x: scroll or overflow-y: scroll, it forces most browsers to make the scroll-bars appear, this is by design, so that if the content enlarges, the content outside of the container will not be forced to move around.

The scroll-bar is not disabled, it is just inactive due to it not having enough content to actually be able to scroll, I am guessing this is because you have set .showDateTime‘s width to a specific amount, which is inside of the TransactionErrorsTableData div.

I hope this helps!

NOTE :

This answer all assumed due to not enough details given.