limited space for text to left of checkboxes
striatic opened this issue · comments
on the demo page, checkboxes have the work "wireless" to the left, which fits easily.
not all words are as short as "wireless", however, and end up overlapping the toggle.
is it possible to adjust the amount of space to the left of the checkbox without breaking the checkbox itself or having the text continuing to overlap the box?
Yeah, the checkbox-based switch only has 100px of space available for the label text.
You could change/increase the left margin on the .toggle p span and .toggle selectors, and the left position on the .toggle p selector, to be able to fit your own text.
For now I think I'm going to keep the 100px space, by default.
I'm thinking about dropping the checkbox-based toggles completely, and keeping only the radio-based ones, since they are more flexible and have better markup, but I would be interested in how many use the checkbox-one vs the radio-one. What do you think?
thank you for the advice. you might want to include that advice on the demo page somewhere.
while i too prefer radio based toggles for a variety of reasons, the advantage of the current checkbox design is how "ON" is represented with colour and "OFF" is desaturated. this makes it immediately clear what functions are on and which are off.
my recommendation would be to use radio-based toggles while maintaining the option to desaturate and saturate the "slider" depending on the toggle status.
Thanks for the input. I think I'm going to keep supporting the checkbox-based switches after all, since it doesn't make sense to use radio inputs for on/off states, and I don't want to encourage bad markup.
I'm going to rewrite the styles for the switches with Sass soon, and I'll add the available space for the label as a variable, which will make customizing it much easier.