CODEWITHSUNDEEP
cssfirefoxflexbox
Grief
Grief

Reputation: 2040

input type=range is not stretching in Firefox

Here is an example. I'd like to have the slider stretched to the whole width of the parent container. The code below looks as I want in Chrome but in Firefox the slider is not stretching. However I cannot find any bugs on their tracker open against that issue, maybe I am missing something?

#block {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: green;
  align-items: stretch;
}

input {
  background-color: yellow;
}
<div id=block>
  <input type=range />
</div>

Upvotes: 2

Views: 1267

Answers (2)

Asons
Asons

Reputation: 87191

A flex container with column direction, and as the default value of align-items is stretch, will stretch the flex items to fill its container along its cross axis, which is the same as its width.

So in your case it should work as is, though in Firefox, Edge and IE that is not the case. They all need width: 100% for the input of type range to fill the container.

As a comparison, input of type text and checkbox, and textarea, do stretch cross browser, but again input of typ checkbox doesn't in Firefox.

Whether Firefox (and Edge/IE) is correct or has a bug I can't say yet. I have searched all over and can't find a straight answer to that, but as soon as I do, I will update this answer.

So as of today, I recommend to set the width to 100%, and if Chrome is correct, no harm done and it can be removed later on.

#block {
  /* width: 100%;              not needed since it is the default */
  height: 100%;             /* as its parent doesn't have a height, 
                               this doesn't do anything */
  display: flex;
  flex-direction: column;
  background-color: green;
  /* align-items: stretch;     this is the defalt and can be omitted */
}

input, textarea, span {
  background-color: yellow;

  width: 100%;              /* make FF/Edge/IE stretch input range */
  
  margin: 0;                /* remove any default margin an element might have */
  padding: 0;               /* remove any default padding an element might have */

  box-sizing: border-box;   /* include border an element might have in the set width */
}
<div id=block>
  <input type=range />
  
  <!-- added these for comparison -->
  <input type=checkbox />
  <input type=text value="Input text"/>
  <textarea>Textarea</textarea>
  <span>Span</span>
  
</div>

Upvotes: 3

Tobi
Tobi

Reputation: 694

You have to set the width of the <input> tag to 100% to get what you want!

#block {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: green;
  padding: 0;
}

input {
  background-color: yellow;
  width: 100%;
  margin: 0;
}
<div id=block>
  <input type=range />
</div>

Upvotes: 0

Related Questions