Menu
I have a table with the following:
<table cellpadding="2" cellspacing="0" >
<tr>
<td>Contact: </td>
<td width="100px"><div style="overflow-x:scroll; width:100px">[email protected]</div>
</td>
</tr>
</table>
This code shows an horizontal scroll in the email cell.
When the email is a short one like [email protected] the scroll shows but it is not enabled as it is not needed, and when the email is longer let's say
the scroll enables so you can see the entire email.
This is good, but what I need is the scroll not to show at all when the email is a short one.
How can I do that??
I've tried:
overflow-x:auto;
And it does not show the scroll when a short email but when the email is a long one it just cut it no scroll at all. I think this happens because there are no spaces in the email.
634
To enable horizontal scrolling, we can use the CSS property overflow-x. If we assign the value scroll to the overflow-x property of the container element, the browser will hide horizontally overflowing content and make it accessible via horizontal scrolling.
((JavascriptExecutor) driver). executeScript("arguments[0]. scrollIntoView(true);", element); This works for vertical scrolling but not for horizontal.
Basic Horizontal Scroll Box To make a scroll box with a horizontal scroll, you need to use the overflow-x property. Specifically, you need to use this code: overflow-x:scroll; . This tells your browser to create scroll bars on the x (horizontal) axis, whenever the contents of the container is too wide.
By defining overflow-x: scroll you are indicating for a scroll bar to appear no matter what.
You should use overflow-x:auto. Here is a working demo
132
works like a charm (IE9)
<table cellpadding="2" cellspacing="0" >
<tr>
<td>Contact: </td>
<td width="100px"><div style="overflow:auto; width:100px">[email protected]</div>
</td>
</tr>
</table>
http://jsfiddle.net/fUW4s/1/
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
