Member Avatar

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>
Member Avatar

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>
Member Avatar

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.