使 ASP.NET 面板宽度与 aspx 页面宽度相同

问题描述 投票:0回答:1

我有以下 aspx 页面:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="SectionPreview.aspx.vb" 
    Inherits="Management.SectionPreview" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link rel="stylesheet" type="text/css" href="Style_1.css" />
    <link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="javascripts/jquery.js" type="text/javascript"></script>
    <script src="javascripts/jquery-ui.min.js" type="text/javascript"></script>
    <title>Addition Data Fields Section Preview</title>

    <style type="text/css">
    @import url('Style_1.css');
    .style1 {
       text-align: center;
    }
    .footerMenu {
      font: xx-small serif;
      color: #336699;
      text-decoration: none;
    }
    .CustomSize
    {
        height: 100%;
        width: 100%;
    }
</style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
             <asp:Label CssClass ="sectionTitle" ID="Label1" runat="server" Text="Information required by your Department:"></asp:Label>
             <br />
             <asp:Panel CssClass ="CustomSize" ID="Panel_AdditionalData" runat="server" Width ="720px" Height="236px">
             </asp:Panel>
        </div>
    </form>
</body>
</html>

我在单击按钮时将其弹出为模式窗口,该代码执行如下:

function showpage1() {
    var mydiv = $('#<%=poppage.ClientID%>');
    mydiv.dialog({
        autoOpen: false, modal: true, title: 'Data Field Preview', width: '75%',
        position: { my: 'top', at: 'top+150' },
        buttons:
        [
            {text: "Close", click: function() {$(this).dialog("close")}}
        ]

    });
    // Open the dialog
    mydiv.dialog('open');
}

我需要使面板与页面具有相同的宽度和高度。到目前为止我所尝试的一切都没有效果。该页面将填充用户定义的控件,IE;文本框、下拉列表等。但是我无法让面板扩展到页面的宽度。而且,我希望面板能够在用户调整页面大小时自动调整大小(假设这是可能的)。

我也没有找到任何方法可以做到这一点。我做错了什么?

jquery asp.net vb.net panel
1个回答
0
投票

获取窗口高度(不是文档高度),并说出其中的 90%。

所以,试试这个:

            var winHeight = $(window).height() * 0.9;
            function showpage1() {
                var mydiv = $('#poppage');
                mydiv.dialog({
                    autoOpen: false, modal: true, title: 'Data Field Preview',
                    width: '75%', height : winHeight,
                    position: { my: 'top', at: 'top+150' },
                    buttons:
                        [
                            { text: "Close", click: function () { $(this).dialog("close") } }
                        ]

                });
                // Open the dialog
                mydiv.dialog('open');
            }

您不需要使用 style 在作为对话框弹出的 div 中设置宽度或高度。但是,上述内容应该适合您。调整 0.9(90%)的高度,或使用整个文档高度。我认为应该在对话框周围留下一些填充,并且您已经有 75% 的宽度,因此说 90% 或 80% 的高度应该效果很好。

因此,document.Height往往会获取页面高度的任何部分,但window.Height会获取当前浏览器窗口大小的完整高度。

我怀疑对于给定的大小,您可能想要删除位置设置,但无论如何,jQuery.UI 对话框最终都会设置 div 的高度和宽度,并覆盖您在 div 中设置的样式设置。

© www.soinside.com 2019 - 2024. All rights reserved.