Hi,
I am trying to create horizontal scroll and I wonder why it doesn't work.
input_image.php
<div style="width: 15px; overflow-x: scroll;">
HALLO
</div>
Hi,
I am trying to create horizontal scroll and I wonder why it doesn't work.
input_image.php
<div style="width: 15px; overflow-x: scroll;">
HALLO
</div>
You will need to wrap "HALLO" in an element (paragraph or so) and give that element a width in order to force a scrollbar. You probably also need to make that div wider then 15px... It's too narrow for a scrollbar anyway and you might need more content
Example:
<div style="width: 150px; overflow-x: scroll;"> /* 'overflow-x: auto' might be better */
<p style="width: 3000px">The point of this page is to test whether today's browsers will download stylesheets that are referenced with media queries that would not apply on that browser or device.</p>
</div>
This is the actual that I am trying to create a scroll bar for a limited width:
input_image.php
<div style="width: 1700px; overflow-x: scroll;">
<table style="margin: 50px 0 0 -360px; position: relative;" id="admintable" border="1" cellpadding="2" cellspacing="0">
<tr>
<th style="width: 300px"><center>image</center></th><th style="width: 80px"><center>minwidth</center></th><th style="width: 80px"><center>maxwidth</center></th><th style="width: 80px"><center>minheight</center></th><th style="width: 80px"><center>maxheight</center></th><th style="width: 80px"><center>location</center><th><center>image_bn</center></th><th style="width: 80px"><center>minwidth_bn</center></th><th style="width: 80px"><center>maxwidth_bn</center></th><th style="width: 80px"><center>minheight_bn</center></th><th style="width: 80px"><center>maxheight_bn</center></th><th><center>location_bn</center></th>
</tr>
<?php
$i=0;
while ($data = mysql_fetch_array($result)){
$result2=($i%2)?'#DFA09D':'white';
//echo "<tr bgcolor='$result2'>";
//echo '<td>'.$data['page'].'</td>';
//echo "<td><a href='post.php?post_id=".$data['post_ID']."'><img src='../images/post.jpg'></a></td>";
//echo '</tr>';
echo "<tr bgcolor='$result2'>";
echo '<td><a href="update_image2.php?image_id='.$data['image_id'].'"><img src="images/'.$data['newfilename'].'" height="100"></a></td>';
echo '<td><div style="margin: -40px 0 0 -10px; position: absolute;">'.$data['minwidth'].'px</div></td>';
echo '<td><div style="margin: -40px 0 0 10px; position: absolute;">'.$data['maxwidth'].'px</div></td>';
echo '<td><div style="margin: -40px 0 0 10px; position: absolute;">'.$data['minheight'].'px</div></td>';
echo '<td><div style="margin: -40px 0 0 20px; position: absolute;">'.$data['maxheight'].'px</div></td>';
echo '<td><div style="margin: -40px 0 0 10px; position: absolute;">'.$data['location'].'</div></td>';
echo '<td><a href="update_image2.php?image_id='.$data['image_id'].'"><img src="images/'.$data['newfilename'].'" height="100"></a></td>';
echo '<td><div style="margin: -40px 0 0 -10px; position: absolute;">'.$data['minwidth'].'px</div></td>';
echo '<td><div style="margin: -40px 0 0 10px; position: absolute;">'.$data['maxwidth'].'px</div></td>';
echo '<td><div style="margin: -40px 0 0 10px; position: absolute;">'.$data['minheight'].'px</div></td>';
echo '<td><div style="margin: -40px 0 0 20px; position: absolute;">'.$data['maxheight'].'px</div></td>';
echo '<td><div style="margin: -40px 0 0 10px; position: absolute;">'.$data['location'].'</div></td>';
echo '</div></tr>';
$i++;
}
?>
</table>
</div>
I wonder the horizontal scroll bar does not appears. I can limit the table width but the horizontal scroll bar does not appears as I expect to.
If you give the tabel a width that's higher then the 1700px of the div, you will get a scrollbar.
Here's your code with a table width of 3000px (I left the PHP stuff out):
http://cssdeck.com/labs/collab/lpmbiboz
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.