Having difficulty shifting checkboxes to the right side

Question

Having difficulty shifting checkboxes to the right side

I'm struggling to align all checkboxes in a single vertical line. I can't figure out how to do it without moving all the content to the right when using float:right on .checkbox.

If you want to see the issue in action, visit the site (please note that it loads slowly due to embedded videos and large images). The code might look messy as I am still learning, so apologies in advance for any confusion.

body:not(#foo) input[type='checkbox'] {
  opacity: 0;
}

.checkbox,
.radio {
  position: relative;
  cursor: pointer;
  padding: 1em;
  display: inline-block;
}

/* Additional CSS code goes here */

<!-- BEGIN - FILTERS -->
<div class="indexfilters">
  <div class="border">
    <label class="checkbox">
      /* Checkbox HTML structure */
    </label><br>
    /* More checkbox labels go here */
    <div class="divbtnfilter">
      <a class="btnfilter">Filter</a>
    </div>
  </div>
</div>

html css checkbox

Answer 1

Answer №1

Here is the code you are searching for:

.border {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: stretch;
}

.border>.checkbox {
  flex: 1 0 100%;
  text-align: right;
  display: flex;
}

.checkbox a {
  flex-grow: 1;
  padding: 0 1rem;
}

.divbtnfilter {
  padding: 1rem;
}

Your markup and CSS could use some improvements. Here's a more optimized version based on your code:

[].map.call(document.querySelectorAll(".checkboxes a"), function(element){
element.addEventListener("click", function(event) {
console.log(element.innerHTML + ' checked: '+!element.nextElementSibling.checked)
});
});

body:not(#foo) input[type='checkbox'] {
  opacity: 0;
}

.checkboxes label,
.radio {
  position: relative;
  cursor: pointer;
  padding: 1em;
  display: inline-block;
}

.checkboxes label::-moz-selection,
.radio::-moz-selection {
  background: transparent;
}

.checkboxes label::selection,
.radio::selection {
  background: transparent;
}

.checkboxes input+span,
.radio input+span {
  border: 1px solid black;
  background: white;
  content: "";
  display: inline-block;
  margin: 0 .5em 9px 0;
  padding: 0;
  vertical-align: middle;
  width: 1em;
  height: 1em;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
}

...

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="indexfilters">
  <div class="checkboxes">
    <label>
      <i class="fa fa-child"></i><a>Starostlivosť o deti</a>
      <input type="checkbox">
      <span></span>
    </label>
    ...
  </div>
</div>

I have optimized your code structure to make it more maintainable and added an event listener function for better functionality. For further improvement, I recommend learning about coding best practices.

Answer 2

Here is the code you are searching for:

.border {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: stretch;
}

.border>.checkbox {
  flex: 1 0 100%;
  text-align: right;
  display: flex;
}

.checkbox a {
  flex-grow: 1;
  padding: 0 1rem;
}

.divbtnfilter {
  padding: 1rem;
}

Your markup and CSS could use some improvements. Here's a more optimized version based on your code:

[].map.call(document.querySelectorAll(".checkboxes a"), function(element){
element.addEventListener("click", function(event) {
console.log(element.innerHTML + ' checked: '+!element.nextElementSibling.checked)
});
});

body:not(#foo) input[type='checkbox'] {
  opacity: 0;
}

.checkboxes label,
.radio {
  position: relative;
  cursor: pointer;
  padding: 1em;
  display: inline-block;
}

.checkboxes label::-moz-selection,
.radio::-moz-selection {
  background: transparent;
}

.checkboxes label::selection,
.radio::selection {
  background: transparent;
}

.checkboxes input+span,
.radio input+span {
  border: 1px solid black;
  background: white;
  content: "";
  display: inline-block;
  margin: 0 .5em 9px 0;
  padding: 0;
  vertical-align: middle;
  width: 1em;
  height: 1em;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
}

...

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="indexfilters">
  <div class="checkboxes">
    <label>
      <i class="fa fa-child"></i><a>Starostlivosť o deti</a>
      <input type="checkbox">
      <span></span>
    </label>
    ...
  </div>
</div>

I have optimized your code structure to make it more maintainable and added an event listener function for better functionality. For further improvement, I recommend learning about coding best practices.

Answer 3

Answer №2

Update: Although this solution did not resolve the issue for the original poster, I am leaving it here as it may be helpful for others.

The problem lies in the fact that your checkbox class is being used to encompass both the checkbox name and the checkbox itself. To fix this, you should move your <input> into a separate class and then only align those elements to the right.

<label class="checkbox"> <!-- Container -->
    <i class="fas fa-utensils"></i><a class="icontext">Healthy Eating</a> <!-- Text -->
    <input id="check1" type="checkbox" onchange="console.log('changed');"> <!-- Checkbox -->
    <span></span>
</label>

Answer 4

Update: Although this solution did not resolve the issue for the original poster, I am leaving it here as it may be helpful for others.

The problem lies in the fact that your checkbox class is being used to encompass both the checkbox name and the checkbox itself. To fix this, you should move your <input> into a separate class and then only align those elements to the right.

<label class="checkbox"> <!-- Container -->
    <i class="fas fa-utensils"></i><a class="icontext">Healthy Eating</a> <!-- Text -->
    <input id="check1" type="checkbox" onchange="console.log('changed');"> <!-- Checkbox -->
    <span></span>
</label>

Having difficulty shifting checkboxes to the right side

Answer №1

Answer №2

Similar questions

Creating a button with multiple background gradients using CSS

Is it possible to have text centered only on desktop devices and left-aligned on mobile devices using Bootstrap 4?

The Ajax call retrieving the complete script

Using AJAX to submit an HTML form containing a file input

To grab a specific CSS attribute from a stylesheet using JavaScript

Button click functionality for updating in Classic ASP is functioning correctly exclusively in Internet Explorer and not in other web browsers

CSS for creating a vertical dropdown in a Bootstrap horizontal navigation bar

implementing a new CSS file to replace the existing one

Why won't my Twitter Bootstrap navigation bar apply the styles?

Clicking on the input element in an md-checkbox will toggle the checkbox option

jQuery does not provide the reference of a basic canvas element

Replace the typical bootstrap text class with stylish and modern google material icons

Incorporate a notification into the Windows notification center without it being visibly displayed on the desktop

Child div within a parent div with absolute positioning does not extend to the full height of the webpage

Position the float input to the right on the same line as an element

The hyperlink function is malfunctioning in HTML pages

Saving HTML content into a MySQL database using Python

Updating the src attribute of a video element using jQuery

Error: Unable to access the 'classList' property of null in HTMLSpanElement.expand function

Is your localhost contact form experiencing issues?