Asp.net GridView控件溢出时，它有很多的列父DIV [英] Asp.net gridview overflows parent div when it has lots of columns

问题描述

我试图让使用相对宽度的div里面的GridView合适，但它总是爆发其父容器时，它有太多的栏目。

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.

我知道，使用一个固定的宽度这样显然会解决问题，但如果我重新大小的窗口一点点，因为它有一个特定的宽度在GridView将再次溢出。

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>

有什么办法我可以到容器和使用溢出指定相对：滚动以及因此，如果我重新大小的窗口，在GridView将重新调整大小与它的容器

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.

下面就是使用一个宽度发生的一些图片：100％
我注意到这里有一件事是，当窗口100％缩放GridView控件溢出其容器，但正如我降低缩放问题似乎消失了。真的很奇怪：•

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

我真的AP preciate如果有人可以帮助这里。

I'd really appreciate if someone could help here.

100％缩放

75％的缩放

65％的缩放

推荐答案

很抱歉，但我有真的很累试图找到一个解决方案，CSS。
所以，我结束了使用jQuery是这样的：

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>

和下面的工具包：ToolkitScriptManager 下面的脚本

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

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

这对IE，Mozilla和Chrome的伟大工程，但浏览器的最小化/最大化按钮似乎有时不火resize事件。我说，看起来，因为该事件实际上是解雇，但是当我手动更改浏览器的大小的div不会调整，因为他们做的。

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.

这篇关于Asp.net GridView控件溢出时，它有很多的列父DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！