How to prevent radio buttons from line breaking? - css

Question

for a form I'm creating, I used css to display radio buttons as a toggle-switch.
However its not responsive at all. When viewing on mobile the "scale" 1-5 is broken up in pieces. My goal is to change the with of the scale responsively instead of it breaking up.
Somehow I can't seem to figure it out.
Here's the code: http://jsfiddle.net/7byse1vk/
.toggle__label {
transition: all .25s ease;
display: inline-block;
border-radius: 5px;
background-color: #878787;
cursor: pointer;
padding: 0 30px;
min-width: 100px;
height: 48px;
line-height: 48px;
color: #a7a6ae;
text-align: center;
}
Many thanks in advance!

Answer 1

You can use display: flex; on the parent, remove the min-width from the labels (otherwise that will make them at least 160px wide each, too wide for mobile), and set them to flex-grow: 1 so they fill the parent fluidly.
body {
padding: 20px;
}
.toggle {
margin-bottom: 20px;
}
.row {
display: flex;
}
.toggle__label {
transition: all .25s ease;
border-radius: 5px;
background-color: #878787;
cursor: pointer;
padding: 0 30px;
height: 48px;
line-height: 48px;
color: #a7a6ae;
text-align: center;
flex-grow: 1;
}
.toggle__input:checked + .toggle__label {
background-color: #e5702a;
color: white;
}
.toggle__label--left {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.toggle__label--middle {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
margin-left: -4px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.toggle__label--right {
margin-left: -4px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.toggle__input {
position: absolute;
left: -99999px;
}
label {
padding: 0.4em 2em 0.4em 0;
}
.toggle-btn-grp {
margin: 3px 0;
}
.toggle-btn {
text-align: centre;
margin: 5px 2px;
padding: 0.4em 3em;
color: #000;
background-color: #FFF;
border-radius: 10px;
display: inline-block;
border: solid 1px #CCC;
cursor: pointer;
}
.toggle-btn-grp.joint-toggle .toggle-btn {
margin: 5px 0;
padding: 0.4em 2em;
border-radius: 0;
border-right-color: white;
}
.toggle-btn-grp.joint-toggle .toggle-btn:first-child {
margin-left: 2px;
border-radius: 10px 0px 0px 10px;
}
.toggle-btn-grp.joint-toggle .toggle-btn:last-child {
margin-right: 2px;
border-radius: 0px 10px 10px 0px;
border-right: solid 1px #CCC;
}
.toggle-btn:hover {
border: solid 1px #a0d5dc !important;
background: #f1fdfe;
}
.toggle-btn.success {
background: lightgreen;
border: solid 1px green !important;
}
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/* CSS only version */
.toggle-btn-grp.cssonly * {
width: 140px;
height: 30px;
line-height: 30px;
}
.toggle-btn-grp.cssonly div {
display: inline-block;
position: relative;
margin: 5px 2px;
}
.toggle-btn-grp.cssonly div label {
position: absolute;
z-index: 0;
padding: 0;
text-align: center;
}
.toggle-btn-grp.cssonly div input {
position: absolute;
z-index: 1;
cursor: pointer;
opacity: 0;
}
.toggle-btn-grp.cssonly div:hover label {
border: solid 1px #a0d5dc !important;
background: #f1fdfe;
}
.toggle-btn-grp.cssonly div input:checked + label {
background: lightgreen;
border: solid 1px green !important;
}
<div class="row">
<input class="toggle__input" id="option-1" type="radio" name="input4" value="1">
<label class="toggle__label toggle__label--left" for="option-1">1</label>
<input checked="true" class="toggle__input" id="option-2" type="radio" name="input4" value="2">
<label class="toggle__label toggle__label--middle" for="option-2">2</label>
<input class="toggle__input" id="option-3" type="radio" name="input4" value="3">
<label class="toggle__label toggle__label--middle" for="option-3">3</label>
<input class="toggle__input" id="option-4" type="radio" name="input4" value="4">
<label class="toggle__label toggle__label--middle" for="option-4">4</label>
<input class="toggle__input" id="option-5" type="radio" name="input4" value="5">
<label class="toggle__label toggle__label--right" for="option-5">5</label>
</div>

Answer 2

Replace your CSS for the labels below and it'll work. This will scale them down properly. It's because at the moment they've got a minimum set width and are being stretch with the padding because they don't have box-sizing: border-box;.
.toggle__label {
transition: all .25s ease;
display: inline-block;
border-radius: 5px;
background-color: #878787;
cursor: pointer;
padding: 0 30px;
width: 20%;
height: 48px;
line-height: 48px;
color: #a7a6ae;
text-align: center;
float: left;
box-sizing: border-box;
}