CODEWITHSUNDEEP
javascripthtmlcsstypescript
javapyscript
javapyscript

Reputation: 737

Increase element width with content, but equal width otherwise - CSS

I am trying to make a rating component using multiple mat-button-toggle inside a mat-button-toggle-group in Angular 7. I managed to make them all of equal width using the following CSS:

mat-button-toggle {
    width:100%
}

mat-button-toggle-group {
    width: 100%;
}

So, this is how it will look normally, with equal width.

        1        |        2        |        3        |        4        |        5        |

Now, the app is coded such that the first and the last toggle can have optional descriptive text which helps the user to understand the scale of the rating.

However, using the CSS above, it maintains 20% width for all the individual ratings. I tried width="auto" and while that changes the width depending on the text inside, all the other toggles become really thin, leaving a large white space at the right end of the toggle group. Eg:

Worst 1 | 2 | 3 | 4 | 5 Best

Is it possible to maintain equal width, but on adding text to the first and last element, increase their width by reducing the width of the ones in between?

Desired final output:

   Worst Option possible    1    |   2   |   3   |   4   |    5  Best  Option possible  |

Thanks.

Upvotes: 0

Views: 212

Answers (1)

jank
jank

Reputation: 870

Use flex

.options {
  display: flex;
}

.options > div {
  flex: 1;
  border: 1px solid gray;
  text-align: center;
}
<div class='options'>
  <div>1 WORST</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6 BEST</div>
</div>

Upvotes: 2

Related Questions