Right-aligned Switch in a Sidenav

Question

I am trying to show two switches in a Sidenav, with labels of different length. Here is my original version, without trying to align the switches:

<html>
  <head>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
  </head>
  <body>
    <ul id="slide-out" class="sidenav">
      <li><a>
        Label
        <span class="switch">
          <label>
            <input type="checkbox"></input>
            <span class="lever"></span>
          </label>
        </span>
      </a></li>
      <li><a>
        Long long label
        <span class="switch">
          <label>
            <input type="checkbox"></input>
            <span class="lever"></span>
          </label>
        </span>
      </a></li>
    </ul>

    <script>
      document.addEventListener('DOMContentLoaded', function() {
        M.Sidenav.init(document.querySelectorAll(".sidenav"), { edge: "right" })[0].open();
       });
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
  </body>
</html>

This renders exactly as expected, with the two switches appearing horizontally wherever the labels end:

I thought I could fix this by adding the right class to the switches, i.e. changing both <span class="switch"> to <span class="switch right">; however, this then completely breaks the vertical alignment of the switches:

What is the correct way of right-aligning these switches in a sidenav?

score 3 · Accepted Answer · edited Jun 22 '18 at 14:52

You can make a flex container out of your divs and align them space-between. You can affect them if you change the width, this so you can tweak your result.

Hope this helps. The HTML is unchanged below.

.sidenav li>a {
  align-items: center;
  display: flex!important;
  justify-content: space-between!important;
}

<html>
  <head>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
  </head>
  <body>
    <ul id="slide-out" class="sidenav">
      <li><a>
        Label
        <span class="switch">
          <label>
            <input type="checkbox"></input>
            <span class="lever"></span>
          </label>
        </span>
      </a></li>
      <li><a>
        Long long label
        <span class="switch">
          <label>
            <input type="checkbox"></input>
            <span class="lever"></span>
          </label>
        </span>
      </a></li>
    </ul>

    <script>
      document.addEventListener('DOMContentLoaded', function() {
        M.Sidenav.init(document.querySelectorAll(".sidenav"), { edge: "right" })[0].open();
       });
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
  </body>
</html>

add ``align-items: center;`` to the ```` tag – Gerardo BLANCO Jun 22 '18 at 14:49 — Gerardo BLANCO, Jun 22 '18 at 14:49

score 1 · Answer 2 · answered Jun 22 '18 at 13:50

I don't know if it is possible doing it strictly the material way, but you can add this to css:

<style>
     .switch label .lever {
        top: 16px;
        float: right;
     } 
</style>

Example:

<html>
  <head>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">

    <style>
         .switch label .lever {
          top: 16px;
          float: right;
         } 
    </style>
  </head>
  <body>
    <ul id="slide-out" class="sidenav">
      <li><a>
        Label
        <span class="switch">
          <label>
            <input type="checkbox"></input>
            <span class="lever"></span>
          </label>
        </span>
      </a></li>
      <li><a>
        Long long label
        <span class="switch">
          <label>
            <input type="checkbox"></input>
            <span class="lever"></span>
          </label>
        </span>
      </a></li>
    </ul>

    <script>
      document.addEventListener('DOMContentLoaded', function() {
        M.Sidenav.init(document.querySelectorAll(".sidenav"), { edge: "right" })[0].open();
       });
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
  </body>
</html>

Yeah this one seems to work.. it's a bit sad the 16px value is hardcoded. BTW where did you find out it should be 16px? — Cactus, Jun 22 '18 at 13:54
Yeah, I agree. I aligned it by "eye". But, as I can see from the selectors: .switch label .lever:before, .switch label .lever:after height = 20px. Thats the circle and it's aligned to the middle of the lever which height is 14px. So I would say the 17px is more accurate. But I'm sure there's a personal preference to this :) — Gregor Ojstersek, Jun 22 '18 at 13:59

Right-aligned Switch in a Sidenav

2 Answers2