How to make the clip:rect(...) property not occupy space (width)

Asked

Viewed 243 times

5

I wonder if there’s any chance of clip: rect(...) really 'cut' the element in question, not just hiding it.

Here in this picture, without the clip: rect(...), shows the edge to exceed the space of your container (white box) and consequently the horizontal scroll appears.

sem clip

In this we see the same thing but with the clip: rect(...), and we see nothing exceeding the container, only its 'empty'. Which also influences the horizontal scroll.

com clip

All content is adjustable to the width of the screen, if I increase or decrease the width of the window, the horizontal scroll stays the same.

Briefly, I’d like to know if there’s a solution for that edge that won’t take up that extra space.

html5 css3
  • 1

    You could not use absolute dimensions in border-Radius, and reduce the container?

  • 2

    Could you provide an example on a site like jsfiddle.com or jsbin.com? I would suggest that you use margin-right: -12px /*algum número*/, but I don’t know if it would work.

  • Just one question: Do you use any framework (bootstrap or similar)?

  • Thanks for the suggestion, @bfavaretto! I do not intend to reduce the container, it will always be the width of the page. Fits. @Gustavorodrigues, I solved the situation by increasing the lateral margins of the (...) li p But still looking for a more reasonable solution, since this changes a little desirable layout, because the balloons move away from the sides. @Edgarmunizberlinck, I am not using any framework.

1 answer

2


Tries to insert overflow-x:hidden; in the elements .chat and/or ul.messages so regardless of the element exceed or not the limit the horizontal scrollbar will not be shown.

.char, .chat ul.messages {
    overflow-x:hidden;
}

  • Thanks for the answer, Erlon! It doesn’t work because that horizontal scroll is page and not just element scroll. Anyway, I would prefer a more targeted solution to the element...

  • But with this you would remove the influence of the element on the scroll of the page. It would have to reproduce the behavior in jsfiddle?

  • It worked! Since I didn’t understand the logic I thought it would not work, but I just tested it and this is really what I was looking for! Can you explain to me a little bit how it works? Because overflow-x: hidden serves to remove the horizontal scroll, and as it did not appear a scroll I did not link...

  • Here you can see a quick video lesson on this property.

  • 1

    Now I realize how the property overflow really works! I understood it as a property that locked the scroll (hiding it in this case) and not as a property that hides the same content. " overflow" in English really means this, I’m the one who rarely uses this property that didn’t even know for sure what it did :D Thank you very much ;)

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.