CODEWITHSUNDEEP
cssasp.netscrollbar
Barnabeck
Barnabeck

Reputation: 481

Horizontal scrollbar doesn't appear in DIV allthough overflow set to auto

I have a Div with an image that changes its size on click events. The div is supposed to react, displaying the scrollbars when necessary.

   <div id="DisplayGraph" runat="server">
   <asp:image runat="server" id="Graph" CssClass="Graph"/>
   </div>

CSS

#DisplayGraph {
height: 100%;
width: 100%;
transform-origin: left top;
position:fixed;
top: 37px;
left:0px;
overflow:auto;
}

.Graph {
vertical-align: top;
text-align:left;
}

ONLY the vertical scrollbar is displayed. If I remove the overflow tag from CSS then the vertical scrollbar disappears - this to prove that CSS is actually working.

So why isn't the horizontal bar showing up?

Upvotes: 0

Views: 58

Answers (1)

Marie Beaufort
Marie Beaufort

Reputation: 73

The height of the #DisplayGraph is 100% of the parent element, but then you apply a top offset of 37px to a fixed element, meaning relative to the viewport. So the last 37px of the element will be hidden.

You just need to subtract the top offset from the height of your container.

#DisplayGraph {
height: calc(100% - 37px);
width: 100%;
transform-origin: left top;
position:fixed;
top: 37px;
left:0px;
overflow:auto;
}

Upvotes: 2

Related Questions