SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Nov 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Add Scroll To Div

    Hi..
    New Here ... Is it the right room to post this question..

    Having a hard time making the scroll to work.

    <div style="width:100%;border:1px solid gray;padding:1%">
    <fieldset style="border:1px solid gray;border-radius:5px">
    <div style="overflow-x:scroll">
    <asp:GridView runat="server" width="100%">
    </asp:Gridiew>
    </div>
    </fieldset
    </div>
    The columns in the grid are added dynamically
    I would like the Main Div, Fieldset and the second div widths to stay intact. When the columns increase, a scrollbar should appear for the div to scroll horizontally.
    The problem is, though there are many columns, they keep adjusting within the grid width and hence the scroll doesnt show up at all.

    Any Help? Thank you

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,523
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi, welcome to Sitepoint

    I think we may need to see a couple of examples with data in the columns so that we can suggest something suitable.

    At the moment the inner elements won't force a scrollbar because they have no width in which to contain something. The only way a scrollbar would work in your structure was if it was on the parent.

    e.g.
    Code:
    <div style="border:1px solid gray;padding:10px;overflow-x:scroll">
    		<fieldset style="border:1px solid gray;border-radius:5px">
    				<div>
    						<div style="width:700px;background:red;height:100px">test</div>
    				</div>
    		</fieldset>
    </div>
    If you don't control the overflow on the parent then it will just collapse and will not be held open by a child of greater width unless you set a min-width equal to the largest fixed width element inside.

    I'd really need to see examples of the data in the various columns to suggest anything better as I may be barking up the wrong tree

  3. #3
    SitePoint Member
    Join Date
    Nov 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you. Its just columns with text, something like
    <div style="width:100%;border:1px solid gray;padding:1%">
    <fieldset style="border:1px solid gray;border-radius:5px">
    <div style="overflow-x:scroll">
    <table width="100%">
    <tr>
    <td>Casual Leave</td>
    <td>AnnualLeave</td>
    <td>SickLeave</td>
    <td>Compassionate Leave</td>
    <td>Maternity Leave</td>
    <td>Another Leave</td>
    <td>Some Other Leave</td>

    <tr>
    </table>
    </div>
    </fieldset
    </div>

    I want the scroll bar to be just for the inner div and not the outer one.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,523
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Lose the fieldset as that is only for wrapping form elements and do this:

    Code:
    <div style="border:1px solid gray;padding:1%">
    		<div style="border:1px solid gray;border-radius:5px">
    				<div style="overflow-x:scroll;margin:5px;">
    						<table width="100%">
    								<tr>
    										<td>Casual Leave</td>
    										<td>AnnualLeave</td>
    										<td>SickLeave</td>
    										<td>Compassionate Leave</td>
    										<td>Maternity Leave</td>
    										<td>Another Leave</td>
    										<td>Some Other Leave</td>
    								<tr>
    						</table>
    				</div>
    		</div>
    </div>
    You can't add padding and borders to a 100% width either as it will be too big (unless you want to use box-sizing:border-box).

  5. #5
    SitePoint Member
    Join Date
    Nov 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, but the problem persists.
    Please check the same code in browser and you would know what I mean.
    When I add a second set of 7 columns, they shrink & fit. If I add a 3rd set, they shrink but only then the scroll appears.
    Meaning, it extends only after a certain length (maybe some 1000px).
    Is it not possible to have a fixed width for td as they keep increasing.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,523
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by sharpcnet View Post
    Thank you, but the problem persists.
    Please check the same code in browser and you would know what I mean.
    Do you think I didn't test in a browser before offering the code ?

    As Ron said above the code above is working fine so now its your turn to supply the code that is not working

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,599
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    sharpcnet,

    Can you post a link to the working code?

    Please notice the attached screen shot showing several rows of 7 columns each. This is the page that Paul's code produces. At the width shown, the x scroll bar is just triggering. If wider, the scroll bar is not triggered.

    sharpcnet.gif

    Can you please post a link to your working code so we can see what you see?


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •