0

我有一个多控制页面。

页面中没有水平滚动条。但是当我添加 AjaxControlToolkit.Editro 或treeview页面时，水平滚动会自动添加到页面中。

例如，当我在页面上添加树视图时。

$(文档).width()=11061

$(窗口).width()=1349

我为控件设置了宽度，但再次出现了水平滚动。

代码 ： 

  <div class="row">
   <span style="width: 100px" class="rowtitle">کلمات کلیدی</span>
   <asp:TextBox ID="KeywordTextBox" Width="600px" runat="server" />
   <asp:RequiredFieldValidator Text="*" ID="KeywordRFV" runat="server" ControlToValidate="KeywordTextBox" ForeColor="Red" ValidationGroup="Save" ErrorMessage="کلمات کلیدی را وارد کنید." />
  </div>
  <div class="row" style="height: 300px">
   <span style="width: 100px" class="rowtitle">توضیحات کامل</span>
   <HTMLEditor:Editor ID="DescriptionHtmlEditor" runat="server" Height="300px" Width="80%" AutoFocus="true" />
   <asp:RequiredFieldValidator Text="*" ID="DescriptionRFV" runat="server" ControlToValidate="DescriptionHtmlEditor" ForeColor="Red" ValidationGroup="Save" ErrorMessage="توضیحات را وارد کنید ." />
   </div>

树视图：

<table width="100%">
            <tr>
                <td style="padding: 5px; width: 40%; overflow: hidden" valign="top">
                    <asp:TreeView  ShowLines="True" ID="TreeView" runat="server" Width="200px" OnSelectedNodeChanged="TreeView_SelectedNodeChanged" LineImagesFolder="~/TreeLineImages" ExpandDepth="0">
                        <SelectedNodeStyle BackColor="#E8DFCE" />
                    </asp:TreeView>
                </td>
                <td style="width: 60%" valign="top">
                    <div class="row" style="text-align: left">
                        <asp:ImageButton ID="btncancle" runat="server" ImageUrl="~/images/btnCancel.png" OnClick="btncancle_Click" ToolTip="انصراف" />
                        <asp:ImageButton ID="btnsave" runat="server" ImageUrl="~/images/btnSave.png" OnClick="btnsave_Click" ToolTip="ذخیره" ValidationGroup="Save" />
                        <asp:ImageButton ID="btndel" OnClick="btndel_Click" OnClientClick="return confirm('آیا از حذف اطمینان دارید ؟');" runat="server" ImageUrl="~/images/btnDelete.png" ToolTip="حذف" />
                        <asp:ImageButton ID="btnedit" runat="server" ImageUrl="~/images/btnEdit.png" OnClick="btnedit_Click" ToolTip="ویرایش" />
                        <asp:ImageButton ID="btnadd" runat="server" ImageUrl="~/images/btnAdd.png" OnClick="btnadd_Click" ToolTip="جدید" />
                    </div>
                    <input type="hidden" runat="server" id="Mode" />
                    <asp:Panel ID="Panel" runat="server" Enabled="false" Style="padding: 0">
                        <div class="row">
                            <span class="rowtitle">نام</span>
                            <asp:TextBox ID="CategoryTextBox" runat="server" MaxLength="300" />
                            <asp:RequiredFieldValidator ForeColor="Red" ID="CategoryRFV" runat="server" ValidationGroup="Save" ControlToValidate="CategoryTextBox" ErrorMessage="*"></asp:RequiredFieldValidator>
                        </div>

                        <asp:Label runat="server" ID="ErrorLabel" ForeColor="Red" />
                    </asp:Panel>
                </td>
            </tr>
        </table>

我在 < Body > 标签中使用了这段代码

溢出-x：隐藏；

删除水平滚动，但是当用户最小化窗口时，页面不显示滚动。

4

2 回答 2

1

如果您找不到影响滚动的 CSS 样式，那么您可以执行以下操作：

// CSS
.overflow{ overflow-x:hidden; }

// Script
$(document).resize(function(){
    if($(this).width() <= y){
        $('body').addClass('overflow');
    }else{
        $('body').removeClass('overflow');
    }
});

其中 y 是不显示滚动条的最小值。

于 2013-01-13T10:07:31.517 回答
0

//CSS

*{
    box-sizing: border-box;
}

.boxsizing-border {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

这将删除页面中的水平滚动条 =)

于 2018-02-28T03:16:17.527 回答