changing CSS overflow hidden behavior

Question

so, i made a simple animated progress bar in jQuery. you can view it here.

I need some code in this post, so here's my CSS:

.progress {
  height: 14px;
  width: 300px;
  background: #111;
  border-radius: 5px;
  vertical-align: middle;
  display: inline-block;
  overflow: hidden;
  color: white;        
}

.filename {
  font-size: 10px;
  color: white;
  position: relative;
}

.progresstop {  
  padding: 4px;
  width: 40px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px; 
  height: 8px;
  float: left;
  background: #c44639;
  vertical-align: middle;
  display: inline-block;
}

.arrow-right {
  width: 0px;
  height: 0px;
  border-style: solid;
  background: #111;
  border-width: 7px 7px 7px ;
  border-color: transparent transparent transparent #c44639;
  float: left;
  display: inline-block;
}

my question: as the progress bar reaches the end, the elements "pop" out of existence when they overflow the div and are hidden, instead of staying visible until they're completely out of the div. specifically, when the CSS arrow disappears as it reaches the end, the end of the progress bar changes from a triangle to a line, which is really visually jarring. is there any way to change this behavior, either in CSS or jQuery, to have elements hide "smoothly"?

One thing to mention, there is not need to have display: inline-block; and float: left; on the same element. Unless there is some reason for that? — Josh Powell
– Josh Powell, Commented Nov 26, 2013 at 20:07
@JoshPowell I have seen the same thing many times in the past. If it's done on purpose it might be because IE7 doesn't support inline-block, therefore it may serve as a fallback? Just a guess, though I don't know if it supports floats either.. — Josh Crozier
– Josh Crozier, Commented Nov 26, 2013 at 20:09
@JoshC Hmm that is worth looking into. I'm not one who supports IE7 but it would be a good thing to keep in mind if I ever have to. — Josh Powell
– Josh Powell, Commented Nov 26, 2013 at 20:16
there's no reason, it's just that i'm still pretty new to web development so my css development philosophy is basically "add properties without completely understanding what they do, until it looks right". haha. — amagumori
– amagumori, Commented Nov 28, 2013 at 2:19

VVV · Accepted Answer · 2013-11-26 19:56:16Z

5

Altenatively to JoshC's answer,

you could wrap it in a container like this fiddle

HTML

<div id="progress-container">
    <div class='progress'>
        <div class='progresstop'></div>
        <div class='arrow-right'></div>
        <div class='filename'>FILENAME</div>
    </div>
</div>

CSS

#progress-container {
    height: 14px;
    width: 300px;
    background: #111;
    border-radius: 5px;
    vertical-align: middle;
    display: inline-block;
    overflow: hidden;
    color: white;
}

.progress {
    height: 14px;
    width: 500px; /* large value */
}

Just make sure that the .progess width is larger than what you need (text, arrow, and bar)

answered Nov 26, 2013 at 19:56

VVV

7,6033 gold badges37 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

gotohales Over a year ago

This actually gets rid of the arrow jerk, which makes it even better.

amagumori Over a year ago

this actually ended up being a better solution for me due to the aforementioned arrow jerk with joshC's implementation. thanks.

Josh Crozier · Accepted Answer · 2013-11-26 23:33:52Z

5

You are looking for white-space: pre.

Here is an updated example - it works how you want it to now.

.filename {
    white-space: pre;
}

EDIT

If you want to remove the glitch at the end of the animation (where the arrow jumps to a new line), use the following markup/CSS:

jsFiddle example - less HTML now, since the arrow is a pseudo element.

HTML

<div class='progress'>
    <div class='progresstop'></div>
    <div class='arrow-right'></div> /* Removed this, and made the arrow a psuedo element. */
    <div class='filename'>FILENAME</div>
</div>

CSS

.filename:before {
    content:"\A";
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 7px 7px 7px;
    border-color: transparent transparent transparent #c44639;
    position:absolute;
}

edited Nov 26, 2013 at 23:33

answered Nov 26, 2013 at 19:53

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

2 Comments

thenewseattle Over a year ago

experience always counts :)

amagumori Over a year ago

yeah, this is a very cool solution. thank you! i had no idea about the white-space attribute.

Collectives™ on Stack Overflow

changing CSS overflow hidden behavior

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related