Asp.net gridview overflows parent div when it has lots of columns

问题

I'm trying to make a gridview fit inside a div using relative widths , but it always breaks out its parent container when it has too many columns.

I know that using a fixed width like this would apparently solve the problem, but if I re-size the window a little bit, the gridview will overflow again as it has a specific width.

<div style="overflow: scroll; width: 1000px; Height: 300px;">
   <asp:GridView id="GridView1" runat="server"  />
</div>

Is there any way I can specify a relative with to the container and use overflow:scroll as well so that if I re-size the window the gridview will re-size with its container.

Here's a few images of what is happening using a width:100% One thing that I noticed here is that when the window is 100% zoom the gridview overflows its container but as I decrease the zoom the problem seems to disappear. Really strange :S

I'd really appreciate if someone could help here.

100% zoom

75% zoom

65% zoom

回答1:

You may try overflow-x: auto

<div style="overflow-x: auto; width: 1000px; Height: 300px;">
   <asp:GridView id="GridView1" runat="server"  />
</div>

But from your screenshots it seems that not only the grid but the form div and some other div above form are also overflowing. In that case you may set the overflow-x property of parent div accordingly.

回答2:

Sorry, but I've got really tired of trying to find a CSS solution. So I ended up using jQuery like this :

<script type="text/javascript">

        $(document).ready(function () {
            bindEvents();
        });
        function bindEvents() {
            $(window).on('resize', function () {
                adjustNewSize();
            });
        }
        function adjustNewSize() {

            var parentContainer = $("#divParentContainer");
            var gridContainer = $("#divGridContainer");           
            $(parentContainer).width("80%");        
            $(gridContainer).width(($(parentContainer).width()));

        }       

    </script>

And the below the Toolkit:ToolkitScriptManager the following script

<Toolkit:ToolkitScriptManager ID="YourToolKitID" runat="server">
    </Toolkit:ToolkitScriptManager>
    <script type="text/javascript">
        var prm = Sys.WebForms.PageRequestManager.getInstance();

        prm.add_endRequest(function () {
            bindEvents();
        });
    </script>

This works great on IE, Mozilla and Chrome, but the minimize/maximize buttons of the browser sometimes don't seem to fire the resize event. I say, seem, because the event is actually fired but the divs don't adjust as they do when I change the size of the browser manually.

回答3:

HAve you tried setting the width as % in place of pixel... ex:- width: 90% when we set width a pixel it will be a fixed size but setting it as percentage changes width according to the width of container

来源：https://stackoverflow.com/questions/33054526/asp-net-gridview-overflows-parent-div-when-it-has-lots-of-columns

标签

css

ASP.NET

gridview

responsive-design