overflow auto not working

Posted by Sharpcnet under CSS 3 on 11/11/2013 | Points: 10 | Views : 3553 | Status : [Member] | Replies : 5
This is the structure
<div>
 
<fieldset>
   
<asp:panel runat="server">
     
<asp:Gridview runat="server">
     
</asp:Gridview>
   
</asp:panel>
 
</fieldset>
</div>

I would like the div, fieldset and panel widths to stay intact. When the columns in the grid increase, a horizontal scrollbar should appear for the panel. I am unable to figure that out. The panel & grid are going out of the fieldset.

Here is the link for the CSS http://jsfiddle.net/FksxS/12/

As you can see, when the columns increase, the table and the div go out of the fieldset.
Please suggest solutions that do not fix width in pixels, as that would not work for all screens.




Responses

Posted by: Bandi on: 11/11/2013 [Member] [MVP] Platinum | Points: 25

Up
0
Down
Refer
http://www.webdeveloper.com/forum/showthread.php?241454-RESOLVED-Div-overflow-problem-with-scrollbars-in-IE7
http://www.webdeveloper.com/forum/showthread.php?149046-Table-in-div-does-not-get-scrollbars-in-IE7
http://www.dynamicdrive.com/forums/showthread.php?46553-div-scroll-bar-not-working-with-overflow-auto
http://css-tricks.com/the-css-overflow-property/

Mark This Response as Answer
--
Chandu
http://www.dotnetfunda.com/images/dnfmvp.gif

Sharpcnet, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Sharpcnet on: 11/11/2013 [Member] Starter | Points: 25

Up
0
Down
Articles are so generic and always not helpful. Please see if you can provide a solution. If you have checked the fiddle, I already used overflow. Its just that , they are not working as expected and should be done another way.

Sharpcnet, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Allemahesh on: 11/18/2013 [Member] [MVP] Silver | Points: 25

Up
0
Down
Dear Sharpcnet,

I have seen you code and I have dome some changes in you css. Just see the below complete code and you will get what you want.

display: table-cell;

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

   
<title></title>

   
<style>

       
.div

       
{

            width
: 52%;

            border
: 1px solid red;

            padding
: 10px;

       
}

       
.fieldset

       
{

            display
: table-cell;

            border
: 1px solid gray;

            border
-radius: 5px;

       
}

       
.grid

       
{

            display
: inline-block;

            width
: 100%;

            border
: 1px solid blue;

            overflow
: scroll;

            overflow
-y: hidden;

       
}

   
</style>

</head>

<body>

   
<form id="form1" runat="server">

   
<div class="div">

       
<fieldset class="fieldset">

           
<div class="grid">

               
<table width="100%">

                   
<tr>

                       
<td>

                            NO

                       
</td>

                       
<td>

                            DAMN

                       
</td>

                       
<td>

                            LUCK

                       
</td>

                       
<td>

                            NO

                       
</td>

                       
<td>

                            DAMN

                       
</td>

                       
<td>

                            LUCK

                       
</td>

                       
<td>

                            NO

                       
</td>

                       
<td>

                            DAMN

                       
</td>

                       
<td>

                            LUCK

                       
</td>

                       
<td>

                            NO

                       
</td>

                       
<td>

                            NO

                       
</td>

                       
<td>

                            DAMN

                       
</td>

                       
<td>

                            LUCK

                       
</td>

                       
<td>

                            NO

                       
</td>

                       
<td>

                            DAMN

                       
</td>

                       
<td>

                            LUCK

                       
</td>

                       
<td>

                            NO

                       
</td>

                       
<td>

                            DAMN

                       
</td>

                       
<td>

                            LUCK

                       
</td>

                   
</tr>

               
</table>

           
</div>

       
</fieldset>

   
</div>

   
</form>

</body>

</html>




Please let know if there is any issue.


Happy Coding,
If it helps you or directs U towards the solution, MARK IT AS ANSWER

Sharpcnet, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Allemahesh on: 11/19/2013 [Member] [MVP] Silver | Points: 25

Up
0
Down
Dear Sharpcnet,

Have you try the above one?


Happy Coding,
If it helps you or directs U towards the solution, MARK IT AS ANSWER

Sharpcnet, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Allemahesh on: 11/21/2013 [Member] [MVP] Silver | Points: 25

Up
0
Down
Dear Sharpcnet,
Have you try the above one?

Happy Coding,
If it helps you or directs U towards the solution, MARK IT AS ANSWER

Sharpcnet, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response