I'm having trouble getting checkboxes to center align using Materilize CSS.
<div class="center-align">
<h5>Select Value </h5>
<form action="#" >
<p class="center-align">
<input class="filled-in" name="group1" type="checkbox" id="1">
<label for="1" class="teal-text text-lighten-2" >First</label>
</p>
<p class="center-align">
<input class="filled-in"name="group1" type="checkbox" id="2">
<label for="2" class="teal-text text-lighten-2">Second</label><span></span>
</p>
</form>
This results in the checkboxes being aligned in the center, but offset from each other. If the labels are exactly the same, they match.
I've tried adding the center-align class to the <div> , <form>, <input> and the <p> but nothing is working as I'd expect.
Was able to acheive desired result by adding this css
<style>
label{
left: 50%;
}
</style>
Related
In Bootstrap, how do I get checkboxes to align with other text on the same line? The checkboxes are always hanging lower than a line of text. I tried wrapping the separate text in a div and adding padding but it does nothing.
<div class="col-xs-12 move-down">
<div style="padding-top:7px; display:inline-block;">This is a new email address. Would you like to:</div>
<div style="display:inline-block;">
<label class="checkbox-inline" data-toggle="collapse" href="#collapsesignup">
<input type="checkbox" id="" value="option1"> Create account
</label> <label class="checkbox-inline">
<input type="checkbox" id="" value="option1"> Guest checkout
</label>
</div>
</div>
Looks fine when I copy your code into a jsfiddle
But, in situation like this, a position: relative would be helpful
https://jsfiddle.net/jacobgoh101/wne16hm1/
.checkbox-wrapper {
position: relative;
top: -1px;
}
I'm designing a footer on a HTML webpage with a radio-selection form on it. I have some buttons inside the footers div, centered using <center>. Without the form on it, it works 100%. I can't get the form to display next to the other buttons, without using float: right; in the stylesheet. When I use float, it is inconsistently dynamic with the rest of the buttons in the div. I've tried setting fixed heights, but I want it to be dynamic. So how can I get the form to display next the the links, in the same way that the links display next to each other?
JSFiddle: https://jsfiddle.net/o78s2s18/
Diagram:
You could put both groups of elements inside their own <div> and float them both to the left.
<div style="float:left;">
<a id="BtnStyle" href="example.com">10 Views</a>
<a id="BtnStyle" href="http://mirum.weebly.com/">About</a>
<a id="BtnStyle" href="http://SD-Storage.weebly.com/#MirumFooter">SD-Storage</a>
</div>
<div style="float:left">
<form action="#" width="200px" class="ThemeSelector">
<input name="group1" type="radio" id="test1" class="red" />
<label for="test1">Test 1</label>
<br>
<input name="group1" type="radio" id="test2" class="red" />
<label for="test2">Test 2</label>
</form>
</div>
Here's an example
This code is expected to show 2 radio buttons group where they "the group" is shown horizontally as well as "the button to the left of the caption" but I am getting the first effect but now how can I get it so that the button icon is located to the left of their corresponding caption? Thanks
edit
I am not using bootstrap up the html chain.
.list-item {
margin: 1em 1em;
}
<div class="list-item">
{{> sub}}
</div>
<template name="sub">
<label>
<input type="radio" name="mygroup" />
My caption 1
</label>
<label>
<input type="radio" name="mygroup" />
My caption 2
</label>
</template>
Like this maybe?
.list-item {
margin: 1em 1em;
}
Vertical <br>
<div class="list-item">
<label>
<input type="radio" name="mygroup" /> My caption 1
</label>
</div>
<div class="list-item">
<label>
<input type="radio" name="mygroup" /> My caption 2
</label>
</div>
Horizontal <br>
<div class="list-item">
<label>
<input type="radio" name="mygroup" /> My caption 1
</label>
<label>
<input type="radio" name="mygroup" /> My caption 2
</label>
</div>
You can set the input to position:absolute; and set a padding-left on the label, it works wonders :)
Edit: you might have to set position relative on the labels.
I am trying to combine input-group-addon with radio elements. Example code is below.
http://www.bootply.com/1M34c3sy29
But the radio image is not centered for Price radio section.
Is it possible to center the image for the Price section? Or do you recommend another solution for such kind of presentation.
Bootstrap is adding some styling that will not allow the vertical align to function as you need. The elements are absolutely positioned. I'd try positioning the radio button another way, using the top css property:
.input-group { display:inline-block;}
#inlineradio2{ top: 13px; }
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<form class="form-horizontal">
<fieldset>
<div class="form-group">
<div class="col-lg-12">
<div class="radio">
<label>
<input id="inlineradio1" name="sampleinlineradio" value="option1" type="radio">
Automatic. Price will be set by the system!</label>
</div>
<div class="radio">
<label>
<input id="inlineradio2" name="sampleinlineradio" value="option2" type="radio">
<div class="input-group">
<span class="input-group-addon">Price</span>
<input type="text" class="form-control" placeholder="" id="price-box" aria-describedby="Price">
</div><!-- /input-group -->
</label>
</div>
</div>
</div>
</fieldset>
</form>
I've also changed the name of the HTML id attribute on the radio button in question as the id should be unique.
Using Bootstrap version 2.3.2, I have a form layout like the below image and since the checkbox has an inline label, there is an aligning issue.
Adding margin to input[type="checkbox"] only gives margin to the checkbox, not the inline label. How do I make it so the checkbox and its label vertically align to the text fields next to it?
Here is the
JS BIN if you are interested.
In your HTML add a class that will handle the checkbox margin:
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<label>label 1</label>
<input type="text" />
</div>
<div class="span3">
<label>label 2</label>
<input type="text" />
</div>
<div class="span3 checkbox">
<input type="checkbox" />test description
</div>
</div>
</div>
and in your CSS:
input[type="checkbox"] {
// i just remove this part..
}
.checkbox {
margin: 30px 0 0 0;
}
Don't put the margin on the checkbox, but on the parent div.
Check this jsFiddle.
Hope this helps
Try to always use something like this:
<div class="span3">
<label for="checkbox" class="checkbox">
<input type="checkbox" id="checkbox" class="checkbox">test description
</label>
</div>
http://jsbin.com/itAdAWA/1/edit
How about putting a <label> before the checkbox like this? ..
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<label>label 1</label>
<input type="text">
</div>
<div class="span3">
<label>label 2</label>
<input type="text">
</div>
<div class="span3">
<label>test</label>
<input type="checkbox">
</div>
</div>
</div>
Bootply: http://bootply.com/86998
I just solved this exact problem in bootstrap 3, by simply limiting the height of inline checkboxes to 12 pixels. They are by default 40px, I don't know why !
<div class="checkbox-inline">
<label>
<input type="checkbox" checked="checked" />
<span>My correctly aligned check-box</span>
</label>
</div>
add this in your css file (I personally have a css file named bootstrap-custom.css):
/*
Checkboxes in inline forms are misaligned because for an unknow reason they inherit a height of 40px !
This selector limit the height of inline checkboxes to 12px which is the perfect value to align them to
the other widgets in an inline form.
*/
.radio-inline, .checkbox-inline {
max-height: 12px;
}
Not ideal solution but change your code to ...
<div class="span5">
<input type="checkbox">test description</input>
</div>
and set the margin-top on that. I will result as you want - better.
Bootstrap v5+
<!-- mt-md-4 pt-md-3 this apply margin and padding only for desktop -->
<div class="col-md-3 mb-3 md-mt-4 md-pt-3">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>