Removing Horizontal Scroll bar for page

Question

I have a page with multy control.

There is no horizontal scroolbar in the page. But when I add an AjaxControlToolkit.Editro or a treeview in page, a horizontal scroll automatically adds to the page.

for example, when i add a treeview on page .

$(document).width()=11061

$(window).width()=1349

I set width for my control but horizontal scroll appeared again.

Code :

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

I use this code in the < Body > tag

overflow-x:hidden;

to remove the horizontal scroll, but when user minimizes window, the page doesn't show scroll.

@MahdiTahsildari : Hi, I want set `overflow-x:hidden;` when page in maximize and set `overflow-x:auto;` when page is minimize. — Niloo, Jan 13 '13 at 09:04
You can not know for sure when the page is maximize, you can know when is less than a minimum size. You can also with the browser tools to search to find out what element is taking out of the page and see then why. — Aristos, Jan 13 '13 at 09:06
Thanks, but how to find out what element is taking out of the page? — Niloo, Jan 13 '13 at 09:19
No, i have a div in masterpage with static width, and add table to it . — Niloo, Jan 14 '13 at 04:21

score 1 · Answer 1 · answered Jan 13 '13 at 10:07

1

If you can't find out which CSS style is affecting the scroll then you could do something like:

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

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

where y is a minimum value to not show the scrollbar.

answered Jan 13 '13 at 10:07

chead23

1,859
11
12

Thanks, i use this. when width>y it is ok, but when width – Niloo Jan 13 '13 at 10:31

score 0 · Answer 2 · edited Feb 28 '18 at 03:38

0

//CSS

*{
    box-sizing: border-box;
}

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

this will remove horizontal scrollbar in your page =)

edited Feb 28 '18 at 03:38

sorak

2,607
2
16
24

answered Feb 28 '18 at 03:16

Sourcephy

239
4
4

Removing Horizontal Scroll bar for page

2 Answers2