Asp.net gridview当它有很多列时溢出父div [英] Asp.net gridview overflows parent div when it has lots of columns

问题描述

我试图使用相对宽度在一个div中使用gridview，但是它总是突出它的父容器。知道使用这样的固定宽度显然可以解决问题，但如果我重新调整窗口大小一点，gridview会再次溢出，因为它有一个特定的宽度。

 < div style =overflow：scroll; width：1000px; Height：300px;> 
< asp：GridView id =GridView1runat =server/> 
< / div> 
  

有没有办法我可以指定一个相对于容器和使用溢出：如果我重新调整窗口大小，gridview将使用其容器重新调整大小。

下面是一些使用宽度：100％
我在这里注意到的一件事是，当窗口是100％缩放gridview溢出其容器，但随着我减少缩放问题似乎消失。真的很奇怪：S

我真的很感激，如果有人可以在这里帮助。

缩放

75％缩放

<强> 65％缩放

解决方案

对不起，我真的厌倦了试图找到一个CSS解决方案。
所以我最终使用jQuery像这样：

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

下面的 Toolkit：ToolkitScriptManager

 < Toolkit：ToolkitScriptManager ID =YourToolKitIDrunat =server> 
< / Toolkit：ToolkitScriptManager> 
< script type =text / javascript> 
 var prm = Sys.WebForms.PageRequestManager.getInstance（）; 
 
 prm.add_endRequest（function（）{
 bindEvents（）; 
}）; 
< / script> 
  

这在IE，Mozilla和Chrome上效果非常好，但是浏览器的最小化/似乎触发resize事件。我说，似乎，因为事件实际上已被触发，但divs不会像手动更改浏览器时的大小那样进行调整。

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

解决方案

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.

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