CODEWITHSUNDEEP
javascriptcsscheckbox
Gangrel
Gangrel

Reputation: 481

How to arrange slicers/checklist horizontally

I have list of checkboxes that are stacked vertically and I would like to arrange them horizontally instead using CSS

This is what I currently have

enter image description here

https://jsfiddle.net/bentham7246/gx0cp157/32/

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

 

.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;
}
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Toggles </title>

<link rel="stylesheet" href="./style.css">

</head>
<body>
<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>




</body>
</html>

This is what I'm trying to get to

enter image description here

I have tried adjusting the css myself but can't quite get what I need. I'm sure it's something simple but can't for the life of me figure it out

Upvotes: 0

Views: 35

Answers (1)

Rok Benko
Rok Benko

Reputation: 22920

See comments in the snippet below.

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

.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 */
/* Added */
.wrapper ul {
  display: flex;
  justify-content: center;
}

.wrapper ul li {
  display: inline-flex; /* Changed */
  margin-right: 24px; /* Added */
}

.name-container,
.switch-container {
  flex: 0 0 50%;
  width: 50%;
}

.name-container {
  text-align: right;
}

.switch-container {
  text-align: right; /* Changed */
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Toggles </title>
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <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>
</body>

</html>

Upvotes: 1

Related Questions