How to avoid horizontal scrollbar on website..

Question

0.00/5 (No votes)

See more:

Hello , I Am Creating A Webpages In Asp.Net Using Bootstrap But When I Resize Window Horizonztal Scrollbar Appear On Bottom Of Page .So How To Avoid Horizontal Scrollbar

ASP.NET

<%@ Page Title="" Language="C#" MasterPageFile="~/AdminMaster.master" AutoEventWireup="true" CodeFile="MCompany.aspx.cs" Inherits="MCompany" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
        <div id="Header"> 
       <div class="row">
   
       <div class="col-sm-6">
            <h2 style="font-family:'Times New Roman'">Company Details</h2>
        </div>
          </div>
       </div>
        <br />
    <br/>
   <div class="container" style="margin-left:-60px;">
             <div class="row" >
                 <div class="form-Horizontal">
                     <div class="form-group">
                         <div class="col-xs-2 ">
                             <asp:Label ID="Label1" runat="server" Text="ID" Font-Names="Times New Roman"></asp:Label>
                         </div>
                     <div class="col-xs-2">
                         <asp:TextBox ID="TxtCmpId" Class="form-control sm" runat="server" ReadOnly="True"></asp:TextBox>
                     </div>
                        <br />
                         <br />
                         <div class="col-xs-2">
                             <asp:Label ID="Label2" runat="server" Text="Name" Font-Names="Times New Roman"></asp:Label>
                         </div>
                     <div class="col-xs-3">
                         <asp:TextBox ID="TxtCmpName" Class="form-control sm" runat="server" ></asp:TextBox>
                     </div>
                        <br />
                         <br />
                         <div class="col-xs-2 ">
                             <asp:Label ID="Label3" runat="server" Text="Address" Font-Names="Times New Roman"></asp:Label>
                         </div>
                     <div class="col-xs-3">
                         <asp:TextBox ID="TxtCmpAddress" Class="form-control sm" runat="server" TextMode="MultiLine" ></asp:TextBox>
                     </div>
                         <br />
                         <br />
                        <br />
                         
                         <div class="col-xs-2 ">
                             <asp:Label ID="Label4" runat="server" Text="City" Font-Names="Times New Roman"></asp:Label>
                         </div>
                     <div class="col-xs-3">
                         <asp:DropDownList ID="DropDownList2" runat="server" >
                             <asp:ListItem Value="0">---------</asp:ListItem>
                             <asp:ListItem Value="1">Pune</asp:ListItem>
                             <asp:ListItem Value="2">Mumbai</asp:ListItem>
                             <asp:ListItem Value="3">Nasik</asp:ListItem>
                             <asp:ListItem Value="4">Jalgaon</asp:ListItem>
                             <asp:ListItem Value="5">Dhule</asp:ListItem>
                         </asp:DropDownList>
                     </div>
                       
                           <br />
                        <br />
                         
                         <div class="col-xs-2">
                             <asp:Label ID="Label5" runat="server" Text="Vat Tin No" Font-Names="Times New Roman"></asp:Label>
                         </div>
                     <div class="col-xs-3">
                         <asp:TextBox ID="TxtVat" Class="form-control sm" runat="server"></asp:TextBox>
                     </div>
                           <br />
                        <br />
                         
                         <div class="col-xs-2 " >
                             <asp:Label ID="Label6" runat="server" Text="Service Tax No" Font-Names="Times New Roman"></asp:Label>
                         </div>
                     <div class="col-xs-3">
                         <asp:TextBox ID="TxtSt" Class="form-control sm" runat="server" ></asp:TextBox>
                     </div>
                         <br />
                         <br />
        <div class="col-md-6" > 
        <div class="form-inline" >
        <div class="controls-row" >
           <asp:Label ID="Label11" runat="server" Text="Active Status" Font-Names="Times New Roman"></asp:Label>
           <div class="radio">
      <label><input id="Radio1" type="radio" runat="server" name="optradio" style="margin-left:50px" checked="">Yes</label>
    </div>
    <div class="radio">
      <label><input id="Radio2" type="radio" runat="server" name="optradio">No</label>
    </div>
    </div>  
        <br />
       <br />              
     </div>   

</div>        
                          </div> 
                          </div>
    </div>
        </div>
        <div style="margin-left:50px">
     <asp:Button ID="BtnSubmit" runat="server" Text="Submit" class="btn btn-default btn-lg" Style="background-color:#523141; color:white; " />
       </div>
                
</asp:Content>

My Css
body {

height:99.9%;
width:99.9%;

}

CSS

#Header
{
	
	margin-left:5px;
	background-color:#523141;
	color:white;
	border-color:black;
	width:80%;
	height:auto;
	font-family:'Times New Roman';
}

Master Page

ASP.NET

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="AdminMaster.master.cs" Inherits="AdminMaster" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
     <title></title>
   
   
   
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
   
     <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>  
    <script src="js/fliplightbox.min.js" ></script>
    
   <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css"/>
 <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
 <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
   
    
      <link rel="stylesheet" href="/resources/demos/style.css"/>
      <link href="css/bootstrap.min.css" rel="stylesheet"/>
      
      <link rel="stylesheet" href="/resources/demos/style.css"/>
      <link rel="stylesheet" href="SMenu.css" />
	  <link rel="stylesheet" href="css/font-awesome.min.css"/>
	  <link rel="stylesheet" href="css/animate.css"/>
	  <link href="css/animate.min.css" rel="stylesheet"/> 
      <link href="SalStyle.css" rel="stylesheet" />
    
    


    
   <style type="text/css">
   .ui-datepicker {
    background-color:lightpink;
    border: 1px solid #555;
    color: #000000;
    font-size:20px;
 }
          .auto-style2
          {
              width: 20%;
          }
          .auto-style3
          {
              width: 80%;
              height: 100%;

          }
          .Hands
          {
              cursor:pointer;
          }

          
      </style>
  

       </head>
    


   <body>
    <form id="form1" runat="server" role="form">

   <div class="navbar-fixed-top">
   <nav class="navbar navbar-inverse" style="background-color: #ff6666; color:black">
  <div class="container-fluid">
    <div class="navbar-header">
        
        
  


  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar" aria-expanded="false">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>




      <a class="navbar-brand" href="#">Saloon</a>
    </div>
     <div class="collapse navbar-collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
        <li><a href="MHome.aspx"><span class="glyphicon glyphicon-log-home"></span>Home</a></li>
        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Registers<span class="caret"></span></a>
    <ul class="dropdown-menu">
    <li><a href="MCompany.aspx">Company</a></li>
    <li><a href="MBranch.aspx">Branch</a></li>
    <li><a href="MCustomer.aspx">Customer</a></li>
        <li><a href="MEmployee.aspx">Employee</a></li>
        <li><a href="MProduct.aspx">Products</a></li>
        <li><a href="Mservices.aspx">Services</a></li>
        <li><a href="MCatalog.aspx">Product Catelog</a></li>
     </ul>


        </li>
        <li style="color:black"><a href="MAppointment.aspx">Appointments</a></li>
        <li style="color:black"><a href="MBilling.aspx">Pos</a></li>
          <li style="color:black"><a href="MPhoto.aspx">Photo Gallary</a></li>
          <li style="color:black"><a href="#">Page 5</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        
        <li><a href="#"><span class="glyphicon glyphicon-log-out"></span> LogOut</a></li>
      </ul>
        
    </div>
  </div>
</nav>
       
     
</div>
    
 

    
        <br />
        <div class="container">
        <div class="img-responsive" style="margin-left:-15px; margin-right:-15px">
            <img src="img/banner-img.jpg" style="width:102%; height:400px" />
        </div>
            </div>
        
            </div>
      <div style="vertical-align:top">
       
 <br />
    <table align="left"  class="auto-style2" style="display:inline-block; height:800px; background-color:#E0E0E0; width:150px">
            <tr  >
                              
           <td style="background-color:pink; text-align:center;width:300px"><h4>Manage Register </h4></td>
              

                </tr>
          
              <tr style="margin-top:10px">
                <td style="background-color:#E0E0E0; width:300px">
                    <asp:HyperLink ID="HypComp" runat="server" CssClass="Hands" Style="color: #523141;  text-align:center" NavigateUrl="~/MCompany.aspx" Font-Names="Times New Roman">Company</asp:HyperLink></td>
            </tr>
            <tr style="margin-top:20px">
                <td style="background-color:#E0E0E0; width:300px" ><asp:HyperLink ID="HypBranches" runat="server" CssClass="Hands" Style="color:#523141; " NavigateUrl="~/MBranch.aspx" Font-Names="Times New Roman" > Branch </asp:HyperLink></td>
            </tr>
            <tr>
                <td style="background-color:#E0E0E0; width:300px"><asp:HyperLink ID="HyperLink1" runat="server" CssClass="Hands" Style="color:#523141; " NavigateUrl="~/MCustomer.aspx" Font-Names="Times New Roman"> Customer </asp:HyperLink></td>
            </tr>
            <tr>
                <td style="background-color:#E0E0E0; width:300px"><asp:HyperLink ID="HyperLink2" runat="server" CssClass="Hands" Style="color:#523141; " NavigateUrl="~/MEmployee.aspx" Font-Names="Times New Roman"> Employee </asp:HyperLink></td>
            </tr>
            <tr>
                <td style="background-color:#E0E0E0; width:300px"><asp:HyperLink ID="HyperLink3" runat="server" CssClass="Hands" Style="color:#523141; " NavigateUrl="~/MProduct.aspx" Font-Names="Times New Roman"> Products </asp:HyperLink></td>
            </tr>
            <tr>
             <td style="background-color:#E0E0E0; width:300px">  <asp:HyperLink ID="HyperLink4" runat="server" CssClass="Hands" Style="color:#523141; " NavigateUrl="~/Mservices.aspx" Font-Names="Times New Roman">Services</asp:HyperLink></td>
            </tr>
            <tr>
                <td style="background-color:#E0E0E0; width:300px"><asp:HyperLink ID="HyperLink5" runat="server" CssClass="Hands" Style="color:#523141; " NavigateUrl="~/MCatalog.aspx" Font-Names="Times New Roman">Product Cateloge</asp:HyperLink></td>
            </tr>
            <tr>
                <td style="background-color:#E0E0E0; width:300px"></td>
            </tr>
          
        </table>
        </div>
       
                 
         
    
    
       
          
        <div style="vertical-align:top">
            
        <table align="left" cellspacing="5" class="auto-style3" style="margin-top:0px; display:inline-block; width:700px; margin-left:0px">
            <tr>
                <td>
                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
                    &nbsp;</td>




            </tr>
          
        </table>
             
            </div>
     
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
    </form>
</body>
</html>

Posted 16-Dec-15 0:21am

Member 12211068

Updated 16-Dec-15 17:54pm

v5

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

venkataramana k · Answer 1 · 2015-12-16T01:51:00

Solution 1

body{ overflow-x: hidden;}
i am new to c# coding but i hope that this will resolve your issue
or else try this body { min-width: 1167px; }

Posted 16-Dec-15 1:51am

venkataramana k

Comments

Member 12211068 16-Dec-15 8:11am

Thanks but when I apply Overflow -x hidden to body ,when i minimise window my form content mess up they are not proprly sink , any solution regarding boostrap