Multi Toggle List - How to align labels right and toggles left

Gangrel 0
Viewed 23

I have a multi toggle panel, in which I need the three toggles aligned with one another. The text should be right aligned (from the centre) and the toggles should be left aligned (from the centre). That way no matter how long the label string is, all toggles should remain aligned

@import url("https://fonts.googleapis.com/css?family=Roboto");
body {
  font: normal normal normal 1rem/1 'Roboto';
  color: black;
}

.wrapper {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 17.5rem;
  padding: 0;
  background: transparent;
  border-radius: 0;
  text-align: center;
  margin: auto;
  overflow: hidden;
  z-index: 100;
}

.wrapper .content {
  padding: 1.5rem 1.5rem 1rem;
}

.wrapper .header {
  display: block;
  font-size: 1.25rem;
  text-align: center;
  color: rgba(0, 0, 0, 0.84);
  margin: 0;
  padding: 0;
  transition: color 0.56s cubic-bezier(0.4, 0, 0.2, 1);
}

.wrapper ul {
  display: block;
  padding: 0;
  width: 100%;
}

.wrapper ul li {
  display: block;
  padding: 1rem 0 0;
}

.wrapper ul li p {
  display: inline-block;
  line-height: 1.5rem;
  margin: 0 1.25rem 0;
  vertical-align: middle;
  transition: color 0.56s cubic-bezier(0.4, 0, 0.2, 1);
}

.switch {
  display: inline-block;
  position: relative;
  width: 2.5rem;
  height: 1rem;
  border-radius: 0.5rem;
  background: rgba(0, 0, 0, 0.26);
  transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  vertical-align: middle;
  cursor: pointer;
}

.switch::before {
  content: '';
  position: absolute;
  top: -0.25rem;
  left: -0.25rem;
  width: 1.5rem;
  height: 1.5rem;
  background: #fafafa;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.28);
  border-radius: 50%;
  transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.switch:active::before {
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.28), 0 0 0 1.25rem rgba(128, 128, 128, 0.1);
}

input:checked+.switch {
  background: rgba(139, 195, 74, 0.5);
}

input:checked+.switch::before {
  left: 1.25rem;
  background: #8bc34a;
}

input:checked+.switch:active::before {
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.28), 0 0 0 1.25rem rgba(139, 195, 74, 0.2);
}
<div class="wrapper">

  <div class="content">
    <p class="header">Options</p>
    <ul>
      <li>
        <p>Status</p>
        <input id="test" type="checkbox" hidden="hidden" />
        <label class="switch" for="test"></label>
      </li>
      <li>
        <p>User</p>
        <input id="test1" type="checkbox" hidden="hidden" />
        <label class="switch" for="test1"></label>
      </li>
      <li>
        <p>Department</p>
        <input id="test2" type="checkbox" hidden="hidden" />
        <label class="switch" for="test2"></label>
      </li>
    </ul>
  </div>

</div>

JS Fiddle: https://jsfiddle.net/bentham7246/gx0cp157/5/

toggle css
1 Answers

Try taking advantage of flexbox to get your desired layout. Wrap the <p> and switch in additional containers to ensure their containers are always 50% width so they take up the same amount of space, and then align the <p> and switch with text-align so they are next to each other

@import url("https://fonts.googleapis.com/css?family=Roboto");
body {
  font: normal normal normal 1rem/1 'Roboto';
  color: black;
}

.wrapper {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 17.5rem;
  padding: 0;
  background: transparent;
  border-radius: 0;
  text-align: center;
  margin: auto;
  overflow: hidden;
  z-index: 100;
}

.wrapper .content {
  padding: 1.5rem 1.5rem 1rem;
}

.wrapper .header {
  display: block;
  font-size: 1.25rem;
  text-align: center;
  color: rgba(0, 0, 0, 0.84);
  margin: 0;
  padding: 0;
  transition: color 0.56s cubic-bezier(0.4, 0, 0.2, 1);
}

.wrapper ul {
  display: block;
  padding: 0;
  width: 100%;
}

.wrapper ul li {
  display: block;
  padding: 1rem 0 0;
}

.wrapper ul li p {
  display: inline-block;
  line-height: 1.5rem;
  margin: 0 1.25rem 0 0;
  vertical-align: middle;
  transition: color 0.56s cubic-bezier(0.4, 0, 0.2, 1);
}

.switch {
  display: inline-block;
  position: relative;
  width: 2.5rem;
  height: 1rem;
  border-radius: 0.5rem;
  background: rgba(0, 0, 0, 0.26);
  transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  vertical-align: middle;
  cursor: pointer;
}

.switch::before {
  content: '';
  position: absolute;
  top: -0.25rem;
  left: -0.25rem;
  width: 1.5rem;
  height: 1.5rem;
  background: #fafafa;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.28);
  border-radius: 50%;
  transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.switch:active::before {
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.28), 0 0 0 1.25rem rgba(128, 128, 128, 0.1);
}

input:checked+.switch {
  background: rgba(139, 195, 74, 0.5);
}

input:checked+.switch::before {
  left: 1.25rem;
  background: #8bc34a;
}

input:checked+.switch:active::before {
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.28), 0 0 0 1.25rem rgba(139, 195, 74, 0.2);
}

/* New CSS */
.wrapper ul li {
  display: flex;
  justify-content: center;
}
.name-container,
.switch-container {
  flex: 0 0 50%;
  max-width: 50%;
}
.name-container {
  text-align: right;
}
.switch-container {
  text-align: left;
}
<div class="wrapper">

  <div class="content">
    <p class="header">Options</p>
    <ul>
      <li>
        <div class="name-container">
          <p>Status</p>
        </div>
        <div class="switch-container">
          <input id="test" type="checkbox" hidden="hidden" />
          <label class="switch" for="test"></label>
        </div>
      </li>
      <li>
        <div class="name-container">
          <p>User</p>
        </div>
        <div class="switch-container">
          <input id="test1" type="checkbox" hidden="hidden" />
          <label class="switch" for="test1"></label>
        </div>
      </li>
      <li>
        <div class="name-container">
          <p>Department</p>
        </div>
        <div class="switch-container">
          <input id="test2" type="checkbox" hidden="hidden" />
          <label class="switch" for="test2"></label>
        </div>
      </li>
    </ul>
  </div>

</div>

wouch0
Related