Ways to specify distinct css styles according to varying number of elements

Question

Ways to specify distinct css styles according to varying number of elements

I need the Button element to always take up 100% of the container, no matter how many elements are inside.

Check out my Fiddle link here: Js Fiddle Link

<div class="inputFieldBoolean buttonSeries" data-type="Boolean"><button class="true" data-value="1"><div class="sign"></div></button><button class="false" data-value="2"><div class="sign"></div></button><button class="notapplicable selected" data-value="3"><div class="sign"></div></button></div>

<div class="inputFieldBoolean buttonSeries" data-type="Boolean"><button class="true" data-value="1"><div class="sign"></div></button><button class="false" data-value="2"><div class="sign"></div></button></div>

<div class="inputFieldBoolean buttonSeries" data-type="Boolean"><button class="true" data-value="1"><div class="sign"></div></button></div>

html css

Answer 1

Answer №1

To accomplish this task, you have the option to use a script or simply apply display: flex to ensure that all the buttons fit perfectly within the container:

Your CSS code would look something like this:

.inputFieldBoolean.buttonSeries {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.inputFieldBoolean.buttonSeries button {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 42px;
    border: 1px solid #cdd6e9;
    background: #fcfcfc;
    background: -moz-linear-gradient(top, #fcfcfc 0%, #e6eef2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fcfcfc), color-stop(100%, #e6eef2));
    background: -webkit-linear-gradient(top, #fcfcfc 0%, #e6eef2 100%);
    background: -o-linear-gradient(top, #fcfcfc 0%, #e6eef2 100%);
    background: -ms-linear-gradient(top, #fcfcfc 0%, #e6eef2 100%);
    background: linear-gradient(to bottom, #fcfcfc 0%, #e6eef2 100%);
}

You can view the updated jsFiddle here.

For more detailed information on flexbox, visit MDN.

Flexbox is widely supported by most modern browsers but not by Internet Explorer versions 9 and below. I have included prefixing to ensure compatibility across different platforms.

Check the CanIUse page here for more on flexbox support.

Answer 2

To accomplish this task, you have the option to use a script or simply apply display: flex to ensure that all the buttons fit perfectly within the container:

Your CSS code would look something like this:

.inputFieldBoolean.buttonSeries {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.inputFieldBoolean.buttonSeries button {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 42px;
    border: 1px solid #cdd6e9;
    background: #fcfcfc;
    background: -moz-linear-gradient(top, #fcfcfc 0%, #e6eef2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fcfcfc), color-stop(100%, #e6eef2));
    background: -webkit-linear-gradient(top, #fcfcfc 0%, #e6eef2 100%);
    background: -o-linear-gradient(top, #fcfcfc 0%, #e6eef2 100%);
    background: -ms-linear-gradient(top, #fcfcfc 0%, #e6eef2 100%);
    background: linear-gradient(to bottom, #fcfcfc 0%, #e6eef2 100%);
}

You can view the updated jsFiddle here.

For more detailed information on flexbox, visit MDN.

Flexbox is widely supported by most modern browsers but not by Internet Explorer versions 9 and below. I have included prefixing to ensure compatibility across different platforms.

Check the CanIUse page here for more on flexbox support.

Answer 3

Answer №2

Initially, it is not permissible to include a div within a button. If a similar structure is required, one can utilize a pseudo element such as ::before, illustrated in my response below.

flexbox is undoubtedly the optimal solution; however, for those of us needing to accommodate IE9, an alternative method utilizing display: table (although linear gradient support may necessitate SVG) is presented below.

.inputFieldBoolean.buttonSeries {
  display: table;
  width: 100%;
}
.inputFieldBoolean.buttonSeries div {
  display: table-cell;
  width: 1%;
  height: 42px;
}
.inputFieldBoolean.buttonSeries button {
  width: 100%;
  height: 42px;
  border: 1px solid #cdd6e9;
  background: #fcfcfc;
  ...
}

<div class="inputFieldBoolean buttonSeries" data-type="Boolean">
  <div>
    <button class="true sign" data-value="1"></button>
  </div>
  <div>
    <button class="false sign" data-value="2"></button>
  </div>
</div>

In addition, another approach without extra markup, using :nth-child, is detailed below:

.inputFieldBoolean.buttonSeries button {
  float: left;
  height: 42px;
  border: 1px solid #cdd6e9;
  background: #fcfcfc;
  ...
}

<div class="inputFieldBoolean buttonSeries" data-type="Boolean">
  <button class="true sign" data-value="1">
  </button>
  <button class="false sign" data-value="2">
  </button>
  <button class="notapplicable selected sign" data-value="3">
  </button>
</div>

Answer 4

Initially, it is not permissible to include a div within a button. If a similar structure is required, one can utilize a pseudo element such as ::before, illustrated in my response below.

flexbox is undoubtedly the optimal solution; however, for those of us needing to accommodate IE9, an alternative method utilizing display: table (although linear gradient support may necessitate SVG) is presented below.

.inputFieldBoolean.buttonSeries {
  display: table;
  width: 100%;
}
.inputFieldBoolean.buttonSeries div {
  display: table-cell;
  width: 1%;
  height: 42px;
}
.inputFieldBoolean.buttonSeries button {
  width: 100%;
  height: 42px;
  border: 1px solid #cdd6e9;
  background: #fcfcfc;
  ...
}

<div class="inputFieldBoolean buttonSeries" data-type="Boolean">
  <div>
    <button class="true sign" data-value="1"></button>
  </div>
  <div>
    <button class="false sign" data-value="2"></button>
  </div>
</div>

In addition, another approach without extra markup, using :nth-child, is detailed below:

.inputFieldBoolean.buttonSeries button {
  float: left;
  height: 42px;
  border: 1px solid #cdd6e9;
  background: #fcfcfc;
  ...
}

<div class="inputFieldBoolean buttonSeries" data-type="Boolean">
  <button class="true sign" data-value="1">
  </button>
  <button class="false sign" data-value="2">
  </button>
  <button class="notapplicable selected sign" data-value="3">
  </button>
</div>

Ways to specify distinct css styles according to varying number of elements

Answer №1

Answer №2

Similar questions

How to display an unordered list horizontally in HTML

Using JQuery to send a post request to an iframe and receiving a

Issue with Javascript functionality not persisting after page reload initiated with a href = '#'

If there is no content present, the html element with contenteditable will have an <br>

What is the method for identifying the selected radio button that has been dynamically generated after clicking the submit button?

What is the best way to create a variable within this loop that remains constant and does not update?

The primary objective of utilizing margin

Auto-scrolling text box cursor movement

Storing persistent JSON data in a mobile app built with HTML5 involves utilizing the local storage capabilities of the

Displaying server errors in an Angular componentIn this tutorial, we

What is the best way to strip the text from a link that encompasses both text and an image using jquery?

Transferring css to an external file within an angular 4 component by utilizing webpack

Modifying SAS ODS contentitem in PROC SQL SELECT query

Accordions housing Bootstrap 3 pills in a sleek design

Attempting to build a table within a table structure

Implementing selective image loading with HTML and angularJS

The innerHTML inside Angular components appears scrambled, with only the final innerHTML rendering correctly

I require a way to decelerate the speed of the roulette wheel's rotation

Is it possible to automatically adjust the text color based on the dynamic background color?

Determine whether the browser is being used on an Android or iOS device