I want to display check boxes in grid format having 3 columns. Something like below
Item1 Item2 Item3
Item Item5 Item6
4
Item7 Item8 Item9
I am able to display it in grid format with the below code but in case of Item7, instead of positioning correctly, it starts displaying it below Item5. Which I don't want to.
Below is the code which I am using
<div class="row" style="margin-top: 15px; padding-bottom: 15px; margin-left: 5px">
<div class="col-md-4 ef-batch-options-text checkbox" ng-repeat="x in samples">
<input type="checkbox" id="user" name="users" value="{{x}}" />
{{x}}
</div>
I have also tried replacing div with ul and <li but still the same result. Please let me know what I am missing.
form {
width: 60px;
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr 1fr;
}
<form>
<label>
<input type="checkbox" value=""/>item1
</label>
<label>
<input type="checkbox" value=""/>item2
</label>
<label>
<input type="checkbox" value=""/>item3
</label>
<label>
<input type="checkbox" value=""/>item4
</label>
<label>
<input type="checkbox" value=""/>item5
</label>
<label>
<input type="checkbox" value=""/>item6
</label>
<label>
<input type="checkbox" value=""/>item7
</label>
<label>
<input type="checkbox" value=""/>item8
</label>
<label>
<input type="checkbox" value=""/>item9
</label>
</form>
You can use flexbox
Note that you should avoid using inline styles! Create a style.css file, link it with<link rel="stylesheet" href="style.css"> and paste in the following code:
.row {
margin-top: 15px;
padding-bottom: 15px;
margin-left: 5px
display: flex;
flex-wrap: wrap;
flex-basis: 33%;
}
Try Bootstrap grid method,
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row">
<div class="col-4 text-center">
<input type="checkbox" id="user" name="users" value=""/>item1
</div>
<div class="col-4 text-center">
<input type="checkbox" id="user" name="users" value=""/>item2
</div>
<div class="col-4 text-center">
<input type="checkbox" id="user" name="users" value=""/>item3
</div>
<div class="col-4 text-center">
<input type="checkbox" id="user" name="users" value=""/>item4
</div>
<div class="col-4 text-center">
<input type="checkbox" id="user" name="users" value=""/>item5
</div>
<div class="col-4 text-center">
<input type="checkbox" id="user" name="users" value=""/>item6
</div>
<div class="col-4 text-center">
<input type="checkbox" id="user" name="users" value=""/>item7
</div>
<div class="col-4 text-center">
<input type="checkbox" id="user" name="users" value=""/>item8
</div>
<div class="col-4 text-center">
<input type="checkbox" id="user" name="users" value=""/>item9
</div>
</div>
Related
I'm creating a website with Bootstrap 4, and at least in Chrome on Windows 10, the checkboxes are shown a bit too high in a line:
These are <input type="checkbox"> elements enclosed in <label>s.
I would like to move the checkbox itself down by 3px or so. Is this possible with CSS?
Using a flexbox is an option.
.container {
display: flex;
align-items: center;
}
.row {
display: flex;
justify-content: space-between;
width: 100%;
}
<div class="main">
<div class="row">
<div class="container">
<label for="checkbox1">Checkbox 1</label>
<input type="checkbox" name="checkbox1">
</div>
<div class="container">
<label for="checkbox2">Checkbox 2</label>
<input type="checkbox" name="checkbox2">
</div>
<div class="container">
<label for="checkbox3">Checkbox 3</label>
<input type="checkbox" name="checkbox3">
</div>
<div class="container">
<label for="checkbox4">Checkbox 4</label>
<input type="checkbox" name="checkbox4">
</div>
</div>
<div class="row">
<div class="container">
<label for="checkbox5">Checkbox 5</label>
<input type="checkbox" name="checkbox5">
</div>
<div class="container">
<label for="checkbox6">Checkbox 6</label>
<input type="checkbox" name="checkbox6">
</div>
<div class="container">
<label for="checkbox7">Checkbox 7</label>
<input type="checkbox" name="checkbox7">
</div>
<div class="container">
<label for="checkbox8">Checkbox 8</label>
<input type="checkbox" name="checkbox8">
</div>
</div>
</div>
Try using vertical-align: middle;
input[type="checkbox"] {
vertical-align: middle;
}
<div class="test">
text <input type="checkbox" name="">
</div>
I'm trying to show div when one of the selects in group is checked and hide when not. I thought this should work, but it's not working.
https://jsfiddle.net/47ctm349/2/
#form-group-osobko {
display: none;
}
#odber-1:checked+#form-group-osobko {
display: block;
}
<!-- Multiple Checkboxes -->
<div class="form-group">
<label class="col-md-4 control-label" for="odber">Způsob platby</label>
<div class="col-md-4">
<div class="checkbox">
<label for="odber-0">
<input type="checkbox" name="odber" id="odber-0" value="1"> Dobírka
</label>
</div>
<div class="checkbox">
<label for="odber-1">
<input type="checkbox" name="odber" id="odber-1" value="2"> Hotově při osobním odběru
</label>
</div>
<div class="checkbox">
<label for="odber-2">
<input type="checkbox" name="odber" id="odber-2" value="3"> Platba předem na účet
</label>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group" id="form-group-osobko">
<label class="col-md-4 control-label" for="osobniodber">Místo osobního odběru</label>
<div class="col-md-4">
<input id="osobniodber" name="osobniodber" type="text" placeholder="14900,11000" class="form-control input-md">
<span class="help-block">Zadejte PSČ míst možného osobního odběru oddělená čárkou.</span>
</div>
</div>
It should work when you click the checkbox in the middle, the div id="form-group-osobko" should appear.
I was trying not to use JS with my bootstrap.
Can't get my head around what I'm doing wrong :(
Thanks.
Your solution only works, if the div to be displayed is an adjacent sibling of the checkbox input, as that is what the + selector in CSS means.
If this div is neither a sibling nor a child you can't select it with CSS and will have to use JavaScript.
#form-group-osobko {
display: none;
}
#odber-1:checked+#form-group-osobko {
display: block;
}
<!-- Multiple Checkboxes -->
<div class="form-group">
<label class="col-md-4 control-label" for="odber">Způsob platby</label>
<div class="col-md-4">
<div class="checkbox">
<label for="odber-0">
<input type="checkbox" name="odber" id="odber-0" value="1">Dobírka
</label>
</div>
<div class="checkbox">
<label for="odber-1">
<input type="checkbox" name="odber" id="odber-1" value="2">Hotově při osobním odběru
<!-- Text input-->
<div class="form-group" id="form-group-osobko">
<label class="col-md-4 control-label" for="osobniodber">Místo osobního odběru</label>
<div class="col-md-4">
<input id="osobniodber" name="osobniodber" type="text" placeholder="14900,11000" class="form-control input-md">
<span class="help-block">Zadejte PSČ míst možného osobního odběru oddělená čárkou.</span>
</div>
</div>
</label>
</div>
<div class="checkbox">
<label for="odber-2">
<input type="checkbox" name="odber" id="odber-2" value="3">Platba předem na účet
</label>
</div>
</div>
</div>
Here would be a simple jQuery solution, using just an additional class to display the div:
$('#odber-1').change(function(){
$('#form-group-osobko').toggleClass("active");
});
#form-group-osobko {
display: none;
}
#form-group-osobko.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Multiple Checkboxes -->
<div class="form-group">
<label class="col-md-4 control-label" for="odber">Způsob platby</label>
<div class="col-md-4">
<div class="checkbox">
<label for="odber-0">
<input type="checkbox" name="odber" id="odber-0" value="1">Dobírka
</label>
</div>
<div class="checkbox">
<label for="odber-1">
<input type="checkbox" name="odber" id="odber-1" value="2">Hotově při osobním odběru
</label>
</div>
<div class="checkbox">
<label for="odber-2">
<input type="checkbox" name="odber" id="odber-2" value="3">Platba předem na účet
</label>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group" id="form-group-osobko">
<label class="col-md-4 control-label" for="osobniodber">Místo osobního odběru</label>
<div class="col-md-4">
<input id="osobniodber" name="osobniodber" type="text" placeholder="14900,11000" class="form-control input-md">
<span class="help-block">Zadejte PSČ míst možného osobního odběru oddělená čárkou.</span>
</div>
</div>
Get it https://jsfiddle.net/47ctm349/5/
I just added Javascript, using Jquery. It works for any div anywhere:
$('#odber-0').on('change', function(){
if($('#odber-0').is(':checked'))
$("#form-group-osobko").css("display","block");
else
$("#form-group-osobko").css("display","none");
});
$('#odber-1').on('change', function(){
if($('#odber-1').is(':checked'))
$("#form-group-osobko").css("display","block");
else
$("#form-group-osobko").css("display","none");
});
$('#odber-2').on('change', function(){
if($('#odber-2').is(':checked'))
$("#form-group-osobko").css("display","block");
else
$("#form-group-osobko").css("display","none");
});
In your case no ideas with CSS.
Good luck!
Below is a HTML Code but the display:inline isn't working. Am not able to understand why. But display:flex, display: -webkit-box;, display: -webkit-inline-box; , display: inline-flex; are working fine;
When i use display:inline on class position
When i use display:flex or display: -webkit-box; or display: -webkit-inline-box; or display: inline-flex; on class position
Below are the HTML Code:
<div class="form-group col-lg-12" style="padding: initial;">
<label class="control-label col-sm-12">Sample type :
</label>
<br>
<div class="col-sm-12 position">
<div style="margin-right: 15px;">
<label class="radio-inline">
<input type="radio" id="tee" name="qpd_type" value="5" checked >Type 1
</label><br/>
</div>
<div>
<label class="radio-inline">
<input type="radio" id="cia" name="qpd_type" value="2" >Type 2
</label>
</div>
</div>
</div>
Can somebody help me figure out why i cant use display:inline. Thanks.
Try this...
Remove the <br /> tag from your code.
.radio-style {
margin-right: 15px;
display: inline;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group col-lg-12" style="padding: initial;">
<label class="control-label col-sm-12">Sample type :
</label>
<br>
<div class="col-sm-12 position">
<div class="radio-style">
<label class="radio-inline">
<input type="radio" id="tee" name="qpd_type" value="5" checked>Type 1
</label>
</div>
<div class="radio-style">
<label class="radio-inline">
<input type="radio" id="cia" name="qpd_type" value="2">Type 2
</label>
</div>
</div>
</div>
Also, Simply you can place the two radios into the same div. You don't need any extra css. :)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group col-lg-12" style="padding: initial;">
<label class="control-label col-sm-12">Sample type :
</label>
<br>
<div class="col-sm-12 position">
<div>
<label class="radio-inline">
<input type="radio" id="tee" name="qpd_type" value="5" checked>Type 1
</label>
<label class="radio-inline">
<input type="radio" id="cia" name="qpd_type" value="2">Type 2
</label>
</div>
</div>
</div>
Try it like this,
HTML
<div class="form-group col-lg-12" style="padding: initial;">
<label class="control-label col-sm-12">Sample type :
</label>
<br>
<div class="col-sm-12 position">
<div style="margin-right: 15px;">
<label class="radio-inline">
<input type="radio" id="tee" name="qpd_type" value="5" checked >Type 1
</label>
</div>
<div>
<label class="radio-inline">
<input type="radio" id="cia" name="qpd_type" value="2" >Type 2
</label>
</div>
</div>
</div>
CSS
.radio-inline{
float:left;
display:inline;
}
I am trying to display multiple checkboxes on the screen. But I want the checkboxes to all line up vertically and horizontal to look like a grid.
The first thing that came to my mind is to use flex to do it. But I'm not sure how to use flex to auto wrap every 4 dividers.
Here is what I have done:
.card
{
flex : 1;
}
.flex-wrapper
{
display:flex;
}
<div class="flex-wrapper">
<div class="card">
<label class="checkbox-inline">
<input type="checkbox" value=""> name 1
</label>
</div>
<div class="card">
<label class="checkbox-inline">
<input type="checkbox" value=""> name 2
</label>
</div>
<div class="card">
<label class="checkbox-inline">
<input type="checkbox" value=""> name 3
</label>
</div>
<div class="card">
<label class="checkbox-inline">
<input type="checkbox" value=""> name 4
</label>
</div>
<div class="card">
<label class="checkbox-inline">
<input type="checkbox" value=""> name 5
</label>
</div>
</div>
You can also use this jsFiddle to tinker with the code.
From this code I want to tell flex to start a new line after the 4th divider inside the flex-wrapper divider.
Is this something that can be done using flex or do I need to use css bootstrap grid system?
To make the checkboxes break to multiple rows on the 4th element, you can give your .card div's a width: 25%; (instead of flex: 1;), and give your .flex-wrapper a flex-wrap: wrap;
.card
{
width: 25%;
}
.flex-wrapper
{
display: flex;
flex-wrap: wrap;
}
<div class="flex-wrapper">
<div class="card">
<label class="checkbox-inline">
<input type="checkbox" value=""> name 1
</label>
</div>
<div class="card">
<label class="checkbox-inline">
<input type="checkbox" value=""> name 2
</label>
</div>
<div class="card">
<label class="checkbox-inline">
<input type="checkbox" value=""> name 3
</label>
</div>
<div class="card">
<label class="checkbox-inline">
<input type="checkbox" value=""> name 4
</label>
</div>
<div class="card">
<label class="checkbox-inline">
<input type="checkbox" value=""> name 5
</label>
</div>
<div class="card">
<label class="checkbox-inline">
<input type="checkbox" value=""> name 6
</label>
</div>
</div>
<div class="form-group">
<label for="property_feature" class="col-md-4 col-sm-4 control-label">ফিচার</label>
<div class="col-md-8 col-sm-8 col-md-offset-4">
<label class="checkbox-inline">
<input type="checkbox" value="1" id="property_furnished" name="feature">আসবাবপত্রে সজ্জিত
</label>
<label class="checkbox-inline">
<input type="checkbox" value="2" id="property_sublet" name="feature">সাবলেট
</label>
<label class="checkbox-inline">
<input type="checkbox" value="3" id="property_mess" name="feature">মেস
</label>
</div>
</div>
The above code gives me following output. But I want everything to be displayed as inline. How can I do this?
A more bootstrap focused approach would to be to restructure your code like such:
<form class="form-inline">
<div class="col-md-8 col-sm-8 col-md-offset-4">
<div class="form-group">
<label for="property_feature">ফিচার</label>
</div>
<div class="form-group">
<label for="property_furnished">আসবাবপত্রে সজ্জিত</label>
<input value="1" id="property_furnished" name="feature" type="checkbox">
</div>
<div class="form-group">
<label for="property_sublet">সাবলেট</label>
<input value="2" id="property_sublet" name="feature" type="checkbox">
</div>
<div class="form-group">
<label for="property_mess">মেস </label>
<input value="3" id="property_mess" name="feature" type="checkbox">
</div>
</div>
</form>
One of the main issues in your code is that your first label is OUTSIDE of your div class that sets the column position. So you aren't including it in the col-md-offset-4 that you specify.
Here's a bootply http://www.bootply.com/ekh1Cpmeht
You will most likely want to adjust the spacing between the property_feature label and the property_furnished .
Use display: inline-block; because Div will break down to new line the checkbox.
.col-md-8.col-sm-8.col-md-offset-4 {
display: inline-block;
}
.col-md-4.col-sm-4.control-label {
display: inline-block;
}
Check Fiddle.