I have tried to use both of these components in my html document but neither of them will center. With the checkbox the text gets centered but the icon will remain to the left of the page.
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
<input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked>
<span class="mdl-checkbox__label">Checkbox</span>
</label>
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
<input type="checkbox" id="switch-1" class="mdl-switch__input" checked>
<span class="mdl-switch__label"></span>
</label>
Use display:block for label and center align labels.
label
{
text-align:center;
}
.mdl-checkbox, .mdl-switch{
display:block;
}
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
<input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked>
<span class="mdl-checkbox__label">Checkbox</span>
</label>
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
<input type="checkbox" id="switch-1" class="mdl-switch__input" checked>
<span class="mdl-switch__label">Checkbox 2</span>
</label>
I used flex on the label to center the items inside. It also aligns the content vertically so your input is inline with your label.
.mdl-checkbox, .mdl-switch{
display:flex;
justify-content:center;
align-items:center;
}
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
<input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked>
<span class="mdl-checkbox__label">Checkbox</span>
</label>
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
<input type="checkbox" id="switch-1" class="mdl-switch__input" checked>
<span class="mdl-switch__label">Checkbox 2</span>
</label>
Related
I want to set these checkboxes up in a table style grid without using a table in HTML. I was trying CSS but it seems like I will need to add a class to each tag for each slot.
Is there a way I can avoid this?
<div class = permissions_grid>
<div class="column_labels"></div>
<label>All Members</label>
<label>Relevant Experience</label>
<label>HUB Moderators</label>
<label>Invited Members</label>
</div>
<div class="row_edit_documents">
<label>Edit Documents</label>
<input type="checkbox" class="all-D" name="edit_docs" value="all">
<input type="checkbox" class="relevant" name="edit_docs" value="relevant">
<input type="checkbox" class="moderators" name="edit_docs" value="moderators">
<input type="checkbox" class="invited" name="edit_docs" value="invited" checked>
</div>
<div class = "row_add_categories">
<label>Add Feedback Categories</label>
<input type="checkbox" class="all-C" name="add_cat" value="all" checked>
<input type="checkbox" class="relevant" name="add_cat" value="relevant">
<input type="checkbox" class="moderators" name="add_cat" value="moderators">
<input type="checkbox" class="invited" name="add_cat" value="invited">
</div>
<div class = "row_move_com_cat">
<label>Move Comments and Categories</label>
<span class="x">X</span>
<input type="checkbox" class="relevant" name="move" value="relevant">
<input type="checkbox" class="moderators" name="move" value="moderators" checked>
<input type="checkbox" class="invited" name="move" value="invited" checked>
</div>
</div>
The first row starts at position 2 which I think I can easily mark in CSS. But How do I make sure all of the inputs and labels are even spaced?
Thank you
Kevin
You can use flexbox to get the result you want.
You are probably having some issues to do an error in your HTML.
In the top of your html you close a div tag early.
<div class="column_labels"></div> <!-- EXTRA CLOSING DIV TAG HERE -->
<label>All Members</label>
<label>Relevant Experience</label>
<label>HUB Moderators</label>
<label>Invited Members</label>
</div>
.permissions_grid {
display: flex;
flex-flow: column nowrap;
}
.permissions_grid > div {
display: flex;
flex-flow: row nowrap;
flex-basis: 20%;
text-align: center;
}
.permissions_grid > div > * {
flex: 1;
}
<div class=permissions_grid>
<div>
<label></label>
<label>All Members</label>
<label>Relevant Experience</label>
<label>HUB Moderators</label>
<label>Invited Members</label>
</div>
<div>
<label>Edit Documents</label>
<input type="checkbox" class="all-D" name="edit_docs" value="all">
<input type="checkbox" class="relevant" name="edit_docs" value="relevant">
<input type="checkbox" class="moderators" name="edit_docs" value="moderators">
<input type="checkbox" class="invited" name="edit_docs" value="invited" checked>
</div>
<div>
<label>Add Feedback Categories</label>
<input type="checkbox" class="all-C" name="add_cat" value="all" checked>
<input type="checkbox" class="relevant" name="add_cat" value="relevant">
<input type="checkbox" class="moderators" name="add_cat" value="moderators">
<input type="checkbox" class="invited" name="add_cat" value="invited">
</div>
<div>
<label>Move Comments and Categories</label>
<span class="x">X</span>
<input type="checkbox" class="relevant" name="move" value="relevant">
<input type="checkbox" class="moderators" name="move" value="moderators" checked>
<input type="checkbox" class="invited" name="move" value="invited" checked>
</div>
</div>
I have the following radio buttons which share the same name :
<div id="main_div">
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="radio1">
<input type="radio" id="radio1" class="mdl-radio__button" name="somename" value="1" checked>
<span class="mdl-radio__label">Radio 1</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="radio2">
<input type="radio" id="radio2" class="mdl-radio__button" name="somename" value="2">
<span class="mdl-radio__label">Radio 2</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="radio3">
<input type="radio" id="radio3" class="mdl-radio__button" name="somename" value="3">
<span class="mdl-radio__label">Radio 3</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="radio4">
<input type="radio" id="radio4" class="mdl-radio__button" name="somename" value="4">
<span class="mdl-radio__label">Radio 4</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="radio5">
<input type="radio" id="radio5" class="mdl-radio__button" name="somename" value="5">
<span class="mdl-radio__label">Radio 5</span>
</label>
</div>
I can't make a fidle of it beacause, I need to change the page and go back.
When I check for example the radio radio3 and go the next page using a link and then click on the browser to go back. My radio radio3 button is still checked but I gave by default the radio1 the attribute checked so I think the radio1 should be checked.
I saw in the label in the radio3 the following class is-checked but the input isn't checked.
I'm using material design lite (https://getmdl.io/)
You can prevent the browser from "remembering" the state of your radio buttons by adding autocomplete="off" to your <input> elements. This should make your page show the first radio as checked each time.
<input type="radio" value="xxx" autocomplete="off">
Read more here
I am using bootstrap but i can change radio button size and in his
color
Here is ml example
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>
Radiobuttons are handled by the browser, there is not really CSS that make this.
Byt there are two options to style the round circle of radiobuttons:
Pure CSS
Pictures
This website explain those two techniques quite well: stephenmorley.org
To be honest, it's quite difficult to have right design by CSS if you are targetting lots of different browsers, and it is the reason why I recommand you to use picture if you have large audience.
You can check this JSFiddle I've made for you for testing purposes https://jsfiddle.net/DTcHh/16879/
<div class="container">
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>
</div>
The color is changed by adding a bootstrap button class definition to the label that encapsulates the radio input element.
<div class="container">
<label class="radio-inline btn btn-danger">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline btn btn-success">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>
</div>
I have created a switch toggle, if i create more than one switch it is not working Exactly.
Html
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch"
checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch"
checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
Here Js Fiddle:http://jsfiddle.net/dgj7s5sk/
Some one help me out in this.
You can't have more than one element with the same id.
Change the id of the second input to something else (along with the for value in your label) so that the labels know which element they are related to.
This works:
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked="checked" />
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch2" checked="checked" />
<label class="onoffswitch-label" for="myonoffswitch2">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
See fiddle
Each "switch toggle" must have must have its own ID.
Try:
<input type="checkbox" name="onoffswitch1" class="onoffswitch-checkbox" id="myonoffswitch1" checked>
<label class="onoffswitch-label" for="myonoffswitch1">
...
<input type="checkbox" name="onoffswitch2" class="onoffswitch-checkbox" id="myonoffswitch2" checked>
<label class="onoffswitch-label" for="myonoffswitch2">
Use IDs instead of classes. Except the wraping div, assign IDs to each of the elements.
When you read this... I probably still haven't solved my issue,
I'm trying to align the label and radiobutton, I have tried alot of "Solutions", but nothing works. I have no css on the radio buttons that i created myself.
Output: http://prntscr.com/5am898
My Code:
<div class="row">
<div class="col-md-12">
<div class="btnRadio">
<label class="radio-inline" for="gal2015lbl">
<input name="galTab" id="gal2015" value="2015" type="radio">2015
</label>
<label class="radio-inline" for="gal2014lbl">
<input name="galTab" id="gal2014" value="2014" type="radio">2014
</label>
<label class="radio-inline" for="gal2013lbl">
<input name="galTab" id="gal2013" value="2013" type="radio">2013
</label>
<label class="radio-inline" for="gal2012lbl">
<input name="galTab" id="gal2012" value="2012" type="radio">2012
</label>
<label class="radio-inline" for="galOtherlbl">
<input name="galTab" id="galOther" value="Anders" type="radio">And
</label>
</div>
</div>
</div>
Try placing the input outside the label.
<label class="radio-inline" for="galOtherlbl">
And
</label>
<input name="galTab" id="galOther" value="Anders" type="radio">
put the label in label tag like
<label class="radio inline control-label">Some label</label>
try
FIDDLE DEMO
<div class="row">
<div class="col-md-12">
<div class="btnRadio">
<input name="galTab" id="gal2015" value="2015" type="radio">
<label class="radio-inline" for="gal2015lbl">2015</label>
<input name="galTab" id="gal2014" value="2014" type="radio">
<label class="radio-inline" for="gal2014lbl">2014</label>
<input name="galTab" id="gal2013" value="2013" type="radio">
<label class="radio-inline" for="gal2013lbl">2013</label>
<input name="galTab" id="gal2012" value="2012" type="radio" />
<label class="radio-inline" for="gal2012lbl">2012</label>
<input name="galTab" id="galOther" value="Anders" type="radio"/>
<label class="radio-inline" for="galOtherlbl">And</label>
</div>
</div>
</div>