CODEWITHSUNDEEP
htmlcssflexbox
Tomáš Hübelbauer
Tomáš Hübelbauer

Reputation: 10664

How to affect minimal width of the HTML5 progress element?

There is a similar question which deals with input elements having intrinsic minimal width determined by the size parameter.

I am trying to design a layout where there is an inline-flex with flex-direction: column block like this:

.item {
  border: 1px solid gray;
  display: inline-flex;
  flex-direction: column;
}
<div>
  <div class="item">
    short
    <progress />
  </div>
  <div class="item">
    long on long so long yes long very long certainly longer than the default width of a progress
    <progress />
  </div>
</div>
<p>
  I want the first progress to be as long as the text "short" is.
</p>

Fiddle

When the text is long, the progress correctly stretches across the available width which is determined by the length of the text because the parent div is inline-flex so it by itself won't stretch in its parent horizontally.

However when the text is very short, the progress doesn't shrink to the same length the text has. Instead, it stays at some (probably UA specific) minimum. I can affect its width with width, but than needs a fixed number, I need it to follow the lead of the text and copy its width.

In the case of the input in the linked question, one could set a small size and problem solved, however, with progress, no such attribute exists.

Is there a way to solve this layouting issue so that the progress width always follows the text width?

Upvotes: 2

Views: 2799

Answers (2)

Temani Afif
Temani Afif

Reputation: 273990

In addition to Michael_B answer here is another hack that will force the width of the progress tag to be 100% and it will work on firefox too:

.item {
  border: 1px solid gray;
  display: inline-flex;
  flex-direction: column;
}

progress {
  width: 0;
  min-width: 100%;
}
<div>
  <div class="item">
    short
    <progress></progress>
  </div>
  <div class="item">
    long on long so long yes long very long certainly longer than the default width of a progress
    <progress></progress>
  </div>
</div>
<p>I want the first progress to be as long as the text "short" is.</p>

Upvotes: 2

Michael Benjamin
Michael Benjamin

Reputation: 372059

Note that as of this writing, the solution below works in Chrome and Edge, but not Firefox.

Add this to your code:

progress { width: auto }

Now the progress element will track the width of its inline-level parent.

Browsers set a default width on the progress element. Chrome uses width: 10em.

enter image description here

By setting your own width you override the default.

.item {
  border: 1px solid gray;
  display: inline-flex;
  flex-direction: column;
}

progress {
  width: auto;
}
<div>
  <div class="item">
    short
  <progress></progress>
  </div>
  <div class="item">
    long on long so long yes long very long certainly longer than the default width of a progress
    <progress></progress>
  </div>
</div>
<p>I want the first progress to be as long as the text "short" is.</p>

Upvotes: 2

Related Questions