I'm dealing with a page that has multiple controls.
Initially, there is no horizontal scrollbar on the page. However, as soon as I introduce an AjaxControlToolkit.Editor or a treeview onto the page, a horizontal scroll bar mysteriously appears.
For instance, when a treeview is added to the page:
$(document).width()=11061
$(window).width()=1349
Even after setting widths for my controls, the horizontal scrollbar persists.
Code :
<div class="row">
<span style="width: 100px" class="rowtitle">Keywords</span>
<asp:TextBox ID="KeywordTextBox" Width="600px" runat="server" />
<asp:RequiredFieldValidator Text="*" ID="KeywordRFV" runat="server" ControlToValidate="KeywordTextBox" ForeColor="Red" ValidationGroup="Save" ErrorMessage="Please enter keywords." />
</div>
<div class="row" style="height: 300px">
<span style="width: 100px" class="rowtitle">Full Description</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="Please enter a description." />
</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="btncancel" runat="server" ImageUrl="~/images/btnCancel.png" OnClick="btncancel_Click" ToolTip="Cancel" />
<asp:ImageButton ID="btnsave" runat="server" ImageUrl="~/images/btnSave.png" OnClick="btnsave_Click" ToolTip="Save" ValidationGroup="Save" />
<asp:ImageButton ID="btndelete" OnClick="btndelete_Click" OnClientClick="return confirm('Are you sure you want to delete?');" runat="server" ImageUrl="~/images/btnDelete.png" ToolTip="Delete" />
<asp:ImageButton ID="btnedit" runat="server" ImageUrl="~/images/btnEdit.png" OnClick="btnedit_Click" ToolTip="Edit" />
<asp:ImageButton ID="btnadd" runat="server" ImageUrl="~/images/btnAdd.png" OnClick="btnadd_Click" ToolTip="Add New" />
</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">Name</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 included this code within the <Body> tag
overflow-x:hidden;
To eliminate the horizontal scrollbar, but unfortunately encountered issues when the user minimized the window where the scroll wouldn't show up.