How to apply flexbox to CSS toggle-switch elements?

Question

I'm having issues applying flex-box to this CSS toggle-switch extension: https://ghinda.net/css-toggle-switch/index.html

I downloaded it as a CDN, so I don't have its CSS files on me

Here is my sample index.html code:

<div class="settings">
            <p>Settings</p>

            <label class="switch-light switch-ios" onclick="">
            <input type="checkbox">
            <strong>
                Send Email Notifications
            </strong>
            <span class="switch-light-span">
                <span>Off</span>
                <span>On</span>
                <a></a>
            </span>
            </label>

            <label class="switch-light switch-ios" onclick="">
            <input type="checkbox">
            <strong>
                Set Profile to Public
            </strong>
            <span>
                <span>Off</span>
                <span>On</span>
                <a></a>
            </span>
            </label>

            <select name="timezone">
                <option value="volvo" selected>Select a Timezone</option>
                <option value="volvo">Volvo</option>
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="fiat">Fiat</option>
                <option value="audi">Audi</option>
            </select>

            <div class="buttons">
                <button>Save</button>
                <button>Cancel</button>
            </div>

        </div> 

    </div>

Here is a sample CSS code:

/* SETTINGS */

.settings {
    display: flex;
    flex-direction: column;
}

.switch-light {
    display: flex !important;
    justify-content: space-between !important;
}

Apparently you have to apply the !important keyword if you're using a CDN to override their style sheets. So that's what I did, but I'm not getting the desired effect I want.

I was trying to apply a property to the span element, which is that entire button, but it is not working.

Here is an example of what I would like to achieve:

Any suggestions?

Drew Before · Answer 1 · 2019-06-26T16:15:36.053

You will need to put your two buttons that you want to display with flexbox with a container element. Something Like this :

<div class="container">
    <div class="item">
        <label class="switch-light switch-ios" onclick="">
            <input type="checkbox">
            <strong>
                Send Email Notifications
            </strong>
            <span class="switch-light-span">
                <span>Off</span>
                <span>On</span>
                <a></a>
            </span>
        </label>
    </div>
    <div class="item">
        <label class="switch-light switch-ios" onclick="">
            <input type="checkbox">
            <strong>
                Set Profile to Public
            </strong>
            <span>
                <span>Off</span>
                <span>On</span>
                <a></a>
            </span>
        </label>
    </div>
</div>

And then apply flexbox to the container element:

.container {
  display: flex;
  justify-content: space-around;
}

Matthew Coloe · Accepted Answer · 2019-06-26T16:25:36.590

Your flexbox is indeed working, I think you might be confused because the toggle button's width is set to 100%. If you reduce the width I think it will look more like what you are expecting, see snippet below.

Also, you don't necessarily have to use !important to override the styles of a resource loaded via CDN. It's just because it is loaded after your stylesheet that it's styles will have greater precedent. There are better ways to override the styles without using !important, see this article What is the order of precedence for CSS?

Hope this helps!

.settings {
    display: flex;
    flex-direction: column;
}

.switch-light {
    display: flex !important;
    justify-content: start !important;
}
.switch-ios.switch-light > span {
    width: 100px !important;
}
.switch-ios.switch-light > strong {
    width: 250px !important;
}

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/css-toggle-switch@latest/dist/toggle-switch.css" />
<div class="settings">
            <p>Settings</p>

            <label class="switch-light switch-ios" onclick="">
            <input type="checkbox">
            <strong>
                Send Email Notifications
            </strong>
            <span class="switch-light-span">
                <span>Off</span>
                <span>On</span>
                <a></a>
            </span>
            </label>

            <label class="switch-light switch-ios" onclick="">
            <input type="checkbox">
            <strong>
                Set Profile to Public
            </strong>
            <span>
                <span>Off</span>
                <span>On</span>
                <a></a>
            </span>
            </label>

            <select name="timezone">
                <option value="volvo" selected>Select a Timezone</option>
                <option value="volvo">Volvo</option>
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="fiat">Fiat</option>
                <option value="audi">Audi</option>
            </select>

            <div class="buttons">
                <button>Save</button>
                <button>Cancel</button>
            </div>

        </div> 

    </div>

.

This works, but how do I get both the buttons to appear the same distance away from the text? — Amandeep Pasricha, Jun 26 '19 at 16:20
Great! Give those text elements a defined width and you should be good to go. Something like: .switch-ios.switch-light > strong { width: 250px !important; } — Matthew Coloe, Jun 26 '19 at 16:24
Thank you! Now I just want to understand this conceptually because tbh I'm still a beginner. But when the width was 100%, did this cause it to expand the full width of its flex container, and that's why perhaps the justify content wasn't working on it? Or it was working on it, but I just couldn't see it because the width was being fully expanded? Why did we specify certain dimensions for span and text? I remember using flexbox before and usually you could make these elements equal distances from each other--the justify-content property, margin property and everything else would fine. — Amandeep Pasricha, Jun 26 '19 at 16:30
Yes so flexbox will take the flex elements and expand them to take up the entire space of the flex container, unless you specify a fixed width on some of them. So in this case you had the buttons taking up 100% of the width, so flexbox gave out the minimum amount of space needed for the other flex items and gave the rest to the button. I personally recommend Wes Bos's free course on Flexbox (and CSS Grid) [Link](https://flexbox.io/). You'll be a master in no time after watching the videos! — Matthew Coloe, Jun 26 '19 at 16:38

score 0 · Answer 3 · edited Dec 24 '21 at 20:23

0

I'm working on this same project right now and was dealing with the same issue for over a day. My fix was that my link to the toggle-switch stylesheet within the head of my HTML document came after my styles.css link. So the toggle stylesheet was taking the reigns there.

edited Dec 24 '21 at 20:23

cigien

57,834
11
73
112

answered Dec 24 '21 at 18:51

Travis Alstrand

1

How to apply flexbox to CSS toggle-switch elements?

3 Answers3