CODEWITHSUNDEEP
css
user1426442
user1426442

Reputation:

How do I get rid of the ugly Horizontal Scroll bar in this layout?

I feel like such a noob asking this but, for some reason a horizontal scroll bar appeared out of NOWHERE.

How do I get rid of the ugly horizontal scroll bar at the bottom?

CSS Style Sheet File: style_sample.css

Web page: http://avisuals.web.fc2.com/sample.html

This website is a great learning resource for hands-on experience. I'm learning as I go.

Upvotes: 2

Views: 5599

Answers (4)

Dan Goodell
Dan Goodell

Reputation: 31

If you have your gridview embedded within a panel, make sure that the width of the panel is greater than the width of the gridview. If the gridview width is greater or equal the width of the panel plus the width of the vertical scrollbar (if you specified one), the horizontal scroll bar will always be there. In my case, the vertical scroll bar is 20px wide. For example, this will always cause the horizontal scrollbar:

<asp:Panel id="Panel1" runat="server" Width="1200px" ScrollBars="Vertical" 
      Height="500px">
    <asp:GridView id="GridView1" runat="server" Width="1200px" 
                        Height="500px" HeaderStyle-Height="34px">

Whereas this will not:

   <asp:Panel id="Panel1" runat="server" Width="1200px" ScrollBars="Vertical" 
          Height="500px">
        <asp:GridView id="GridView1" runat="server" Width="1180px" 
                            Height="500px" HeaderStyle-Height="34px">

Upvotes: 0

Keith
Keith

Reputation: 1394

You could add the CSS overflow-x:hidden; to your <body> element.

Upvotes: 4

Tim
Tim

Reputation: 14446

Make your browser window wider. It probably "just appeared" because your window isn't maximized anymore - unless you changed something in the stylesheet or layout, in which case, that change made the page wider.

It looks like you added a left: element to p:footer-text. Remove that, and if you want to center your text, make it text-align:center; instead.

Upvotes: -1

Guffa
Guffa

Reputation: 700730

You have put margins on the footer to center it, then you have moved it to the right 250px using relative positioning, so it sticks out to the right.

Use either margin or relative positioning on it.

Upvotes: 1

Related Questions