3

I am working with a switch, and because the actual label is wide, I want to break each labeled part. The issue is that I cannot find a way to break it such that it aligns with the switch widget.

I have tried to make a new line with both <br> and <br/>. I have also tried to put the text in <p> ... </p> but it did not work either. The code I used is the following:

<div class="switch">
  <label>
    Off <br/> 0
    <input type="checkbox">
    <span class="lever"></span>
    On <br/> 1
  </label>
</div>

I want to obtain something like in the right green box rather than the one in the red box, see the picture below:

enter image description here

In other words, each label should be centered around the switch.

The code and the result can also be seen on codepen.

WFTsai
  • 95
  • 1
  • 9
  • use some type of grid layout – apple apple Apr 27 '19 at 15:30
  • Nicely formatted first question +1. Yeah, like appls said, I would just take the text out of the label, and put the whole thing in a horizontal flex-box grid – Alicia Sykes Apr 27 '19 at 15:31
  • Does "grid layout"/"horizontal flex-box grid" imply actions similar to the CSS part that nhannt210695 posted below? @Alicia when you say " take the text out of the label" do you imply to introduce some nodes instead of each "text-label-part"? If that is the case, could you suggest some handy keywords that I can look into? – WFTsai Apr 27 '19 at 17:13

1 Answers1

3

HTML

<div class="switch">
    <label>
      <div class="nhannt210695">
             Off <br/> 0
              <input type="checkbox">
              <span class="lever"></span>
              On <br/> 1
      </div>
    </label>
  </div>

CSS

.nhannt210695 {
  display: flex;
  justify-content: center;
  align-items: center;
}

jQuery

$(document).ready(function() {
  $("input").change(function() {
    if($(this).is(":checked")) {
      console.log("Is checked");
    }
    else {
      console.log("Is Not checked");
    }
  })
});
nhannt210695
  • 79
  • 4