CODEWITHSUNDEEP
csscheckbox
anti-destin
anti-destin

Reputation: 869

Custom CSS checkbox margin missing when viewed on mobile

I have a custom checkbox written in CSS that looks as expected in development. But when it is viewed on mobile (via Heroku), the right margin does not show up, as can be seen here:

enter image description here

Any idea why the right margin vanishes when it is properly set in the CSS?

Custom checkbox CSS:

input[type="checkbox"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
  position: relative;
  border: none;
  margin-bottom: -4px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
input[type="checkbox"]:focus,
.checkbox input[type="checkbox"]:focus,
.checkbox-inline input[type="checkbox"]:focus {
  outline: none;
}
input[type="checkbox"]:after,
.checkbox input[type="checkbox"]:after,
.checkbox-inline input[type="checkbox"]:after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  margin-top: -2px;
  margin-right: 1rem;
  border: 2px solid #8D8D8D;
  border-radius: 4px;
  -webkit-transition: 240ms;
  -o-transition: 240ms;
  transition: 240ms;
}
input[type="checkbox"]:checked:before,
.checkbox input[type="checkbox"]:checked:before,
.checkbox-inline input[type="checkbox"]:checked:before {
  content: "";
  position: absolute;
  top: 0;
  left: 6px;
  display: table;
  width: 6px;
  height: 12px;
  border: 2px solid #fff;
  border-top-width: 0;
  border-left-width: 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
input[type="checkbox"]:checked:after,
.checkbox input[type="checkbox"]:checked:after,
.checkbox-inline input[type="checkbox"]:checked:after {
  background-color: #00B1FF;
  border-color: #00B1FF;
}
input[type="checkbox"]:disabled:after,
.checkbox input[type="checkbox"]:disabled:after,
.checkbox-inline input[type="checkbox"]:disabled:after {
  border-color: #DFDFDF;
}
input[type="checkbox"]:disabled:checked:after,
.checkbox input[type="checkbox"]:disabled:checked:after,
.checkbox-inline input[type="checkbox"]:disabled:checked:after {
  background-color: #DFDFDF;
  border-color: transparent;
}
.has-warning input:not([type=checkbox]),
.has-warning .form-control,
.has-warning input.form-control[readonly],
.has-warning input[type=text][readonly],
.has-warning [type=text].form-control[readonly],
.has-warning input:not([type=checkbox]):focus,
.has-warning .form-control:focus {
  border-bottom: none;
  -webkit-box-shadow: inset 0 -2px 0 #FFD200;
  box-shadow: inset 0 -2px 0 #FFD200;
}
.has-error input:not([type=checkbox]),
.has-error .form-control,
.has-error input.form-control[readonly],
.has-error input[type=text][readonly],
.has-error [type=text].form-control[readonly],
.has-error input:not([type=checkbox]):focus,
.has-error .form-control:focus {
  border-bottom: none;
  -webkit-box-shadow: inset 0 -2px 0 #FF193C;
  box-shadow: inset 0 -2px 0 #FF193C;
}
.has-success input:not([type=checkbox]),
.has-success .form-control,
.has-success input.form-control[readonly],
.has-success input[type=text][readonly],
.has-success [type=text].form-control[readonly],
.has-success input:not([type=checkbox]):focus,
.has-success .form-control:focus {
  border-bottom: none;
  -webkit-box-shadow: inset 0 -2px 0 #00FFD2;
  box-shadow: inset 0 -2px 0 #00FFD2;
}
.has-warning .input-group-addon,
.has-error .input-group-addon,
.has-success .input-group-addon {
  color: #F8F8F8;
  border-color: transparent;
  background-color: transparent;
}

Upvotes: 0

Views: 258

Answers (1)

anti-destin
anti-destin

Reputation: 869

My friend provided the answer. The key is to move the line:

margin-right: 1rem;

to the first block:

input[type="checkbox"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
  position: relative;
  border: none;
  margin-bottom: -4px;
  margin-right: 1rem;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

I also changed the display: table to display: block.

Now everything looks as desired.

Upvotes: 1

Related Questions