0

マルチコントロールのあるページがあります。

ページに水平スクロールバーはありません。しかし、AjaxControlToolkit.Editro またはtreeviewページ内を追加すると、水平スクロールがページに自動的に追加されます。

たとえば、ページにツリービューを追加するとき。

$(ドキュメント).幅()=11061

$(ウィンドウ).幅()=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 に答える