Question

我有一个带有多重控制的页面。

页面中没有水平的scroolbar。但是当我在页面中添加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>

的TreeView：

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

我在＆lt;中使用此代码身体＆gt;标签

溢出 - X：隐藏;

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

Answer 1

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

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

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

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

Answer 2

// CSS

*{
    box-sizing: border-box;
}

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

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

删除页面的水平滚动条

2 个答案: