CODEWITHSUNDEEP
javascriptjqueryhtmlcssoverflow
Ryan Saxe
Ryan Saxe

Reputation: 17829

css overflow is not working properly

So I am writing a script for a live drawing area. It is a work in progress right now, but here is the css for the area:

#canvas{
    background-repeat: no-repeat;
    cursor:none;
    overflow:hidden !important;
    margin-top:50px;
    width:400px;
    height:300px;
    border:1px #000 solid;
}

Now clearly, with the important tag on overflow:hidden, anything outside the 400x300 box that has to do with drawing should not show, but it does!!!

here is a jsfiddle so you can see all the code!

How you can see what I mean:

Just click on the thing at the top that says paintbrush and follow the instructions in the p tag for drawing. Then go outside of the box and see how it continues to draw.

note:

I use $('#canvas').prepend(content) to get the drawing into the drawing area, so it makes no sense that it would show up in areas outside it when there is an overflow:hidden. any ideas?

Upvotes: 0

Views: 83

Answers (1)

Ivan Chernykh
Ivan Chernykh

Reputation: 42166

Weird , but it helps: add position:relative to #canvas stylesheet:

#canvas {
  /* ... */ 
  position: relative;
  /* ... */ 
}

(JSFiddle: http://jsfiddle.net/HEnuj/7/)

I'm not CSS specialist so i have no logical explanation , except of something like "if some elements has position:absolute relatively to their parent so parent must be position:relative" , thats what i remember.

Upvotes: 2

Related Questions