.selected_area {
background-color: #c8c8c8;
padding-top:5px;
height: 330px;
border-radius: 5px;
width:233px;
}
<div class="selected_area">
<label>
<input type="checkbox" value="scooter" id=""><div class="label-text fa-lg"><span>ScooterScooterScooterScooterScooter ScooterScooterScooter cooterScooterScooterScooter ScooterScooterScooter</span></div>
</label>
<label>
<input type="checkbox" value="motorcycle" id=""><div class="label-text fa-lg"><span>Motorcycle</span></div>
</label>
<label>
<input type="checkbox" value="downtown 250 en" id=""><div class="label-text fa-lg"><span>DOWNTOWN 250(EN)DOWNTOWN 250(EN)DOWNTOWN 250(EN) DOWNTOWN 250(EN)DOWNTOWN 250(EN)</span></div>
</label>
</div>
How to make my text next to checkbox not under it?
For this you've to write CSS like:
input[type="checkbox"] {
display: inline-block;
width: 15px;
vertical-align: top;
}
.label-text {
display: inline-block;
width: 200px;
word-break: break-all;
}
Also for side-by-side alignment you should use <span> instead of block elements like <div>.
I've created JSFiddle, please have a look.
try this
<div class="selected_area">
<label>
<input type="checkbox" value="scooter" id="">
<span class="label-text fa-lg">
<span>ScooterScooterScooterScooterScooter ScooterScooterScooter cooterScooterScooterScooter ScooterScooterScooter</span>
</span>
<br>
</label>
<label>
<input type="checkbox" value="motorcycle" id="">
Motorcycle
<br>
</label>
<label>
<input type="checkbox" value="downtown 250 en" id="">
DOWNTOWN 250(EN)DOWNTOWN 250(EN)DOWNTOWN 250(EN) DOWNTOWN 250(EN)DOWNTOWN 250(EN)
</label>
</div>
maybe so?
* {
padding: 0;
margin: 0;
}
.selected_area {
background-color: #c8c8c8;
padding:10px;
height: 330px;
border-radius: 5px;
width:233px;
margin: 20px;
}
.selected_area label {
position: relative;
margin: 10px 0;
display: block;
}
.selected_area .label-text {
position: relative;
padding-left: 24px;
}
.selected_area input {
position: absolute;
top: 2px;
left: 0;
}
<div class="selected_area">
<label>
<input type="checkbox" value="scooter" id="">
<div class="label-text fa-lg"><span>ScooterScooterScooterScooter ScooterScooterScooter cooterScooterScooterScooter ScooterScooterScooter</span>
</div>
</label>
<label>
<input type="checkbox" value="motorcycle" id="">
<div class="label-text fa-lg"><span>Motorcycle</span>
</div>
</label>
<label>
<input type="checkbox" value="downtown 250 en" id="">
<div class="label-text fa-lg"><span>DOWNTOWN 250(EN)DOWNTOWN 250(EN)DOWNTOWN 250(EN) DOWNTOWN 250(EN)DOWNTOWN 250(EN)</span>
</div>
</label>
</div>
.label-text.fa-lg {
display: inline-block;
}
check this link for more help on display property
https://css-tricks.com/almanac/properties/d/display/
Related
I have created both a select-box and a searchbar in html. Now I want to place both elements next to each other. I thought this would be possible by placing both elements into another div-container with display set to inline. But this doesn't really solve the issue.
.select-search-container {
display: inline;
}
.select-box {
display: flex;
flex-direction: column;
width: 400px;
}
.search-bar {
max-width: 400px;
border: none;
position: relative;
box-sizing: border-box;
left: calc(98% - 400px);
top: 20px;
}
#searchBarInput {
background: transparent;
padding: 12px 24px;
border-radius: 8px;
border: 2px solid black;
width: 100%;
box-sizing: border-box;
}
.search-bar__icon {
position: absolute;
height: 100%;
left: 90%;
top: 25%;
}
<div class="select-search-container">
<div class="select-box">
<div class="options-container">
<div class="option">
<input type="radio" class="radio" name="category" id="apples">
<label for="apples">apples</label>
</div>
<div class="option">
<input type="radio" class="radio" name="category" id="bananas">
<label for="bananas">bananas</label>
</div>
<div class="option">
<input type="radio" class="radio" name="category" id="lemons">
<label for="lemons">lemons</label>
</div>
</div>
<div class="selected">
Pick a fruit
</div>
</div>
<div class="search-bar" id="searchBar">
<input type="text" placeholder="Search Fruit" id="searchBarInput">
<i class="material-icons search-bar__icon">search</i>
</div>
</div>
As you can see, I have created the select-box using radio-buttons. I like the styling of this better than a normal select-box. Basically, I am showing the selected-div all the time and upon clicking on this div, I show the options-container. The display of the select-box is set to flex, with flex-direction column, as I want the options-container to be placed below the selected-div:
I am trying to place the searchbar next to the select-box. For this purpose I am also playing around with the left-, top- etc. specifiers. It doesn't really work though. When changing the display-type of the wrapper from inline to inline-flex, it kind of works, but the size of my searchbar shrinks and the icon isn't placed where I want it to be. I know this is a very specific question. I am very surprised that it doesn't work though and would really appreciate an explanation.
.select-search-container {
display: flex;
justify-content: space-between;
}
.select-box {
}
.search-bar {
max-width: 400px;
border: none;
position: relative;
box-sizing: border-box;
top: 20px;
}
#searchBarInput {
background: transparent;
padding: 12px 24px;
border-radius: 8px;
border: 2px solid black;
width: 100%;
box-sizing: border-box;
}
.search-bar__icon {
position: absolute;
height: 100%;
left: 90%;
top: 25%;
}
<div class="select-search-container">
<div class="select-box">
<div class="options-container">
<div class="option">
<input type="radio" class="radio" name="category" id="apples">
<label for="apples">apples</label>
</div>
<div class="option">
<input type="radio" class="radio" name="category" id="bananas">
<label for="bananas">bananas</label>
</div>
<div class="option">
<input type="radio" class="radio" name="category" id="lemons">
<label for="lemons">lemons</label>
</div>
</div>
<div class="selected">
Pick a fruit
</div>
</div>
<div class="search-bar" id="searchBar">
<input type="text" placeholder="Search Fruit" id="searchBarInput">
<i class="material-icons search-bar__icon">search</i>
</div>
</div>
How to properly style checkbox with letter in it.
Here is the code what I have done but due to similar IDs the style in it was not working.
The First checkbox working as expected but the second not working.
Also I want when the check box clicked the Text in it will invisible.
Can we use class based so that it can be reused ?
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.roundchk {
position: relative;
}
.roundchk label {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 50%;
cursor: pointer;
height: 28px;
left: 0;
position: absolute;
top: 0;
width: 28px;
font-size: 16px;
padding: 3px 0px 2px 5px;
}
.roundchk label:after {
border: 2px solid #fff;
border-top: none;
border-right: none;
content: "";
height: 6px;
left: 7px;
opacity: 0;
position: absolute;
top: 8px;
transform: rotate(-45deg);
width: 12px;
}
.roundchk input[type="checkbox"] {
visibility: hidden;
}
.roundchk input[type="checkbox"]:checked + label {
background-color: #66bb6a;
border-color: #66bb6a;
}
.roundchk input[type="checkbox"]:checked + label:after {
opacity: 1;
}
<div class="container">
<div class="row">
<form class="form-horizontal">
<!-- Text input-->
<div class="container">
<h2>
Select Weekdays
</h2>
<table width="100%" border="0">
<tr>
<td>
<div class="roundchk">
<input name="Sunday" type="checkbox" id="checkbox" value="Sun"/>
<label for="checkbox"> S </label>
</div>
</td>
<td>
<div class="roundchk">
<input name="Monday" type="checkbox" id="checkbox" value="Monday"/>
<label for="checkbox"> M </label>
</div>
</td>
<td>
<div class="roundchk">
<input name="Tues" type="checkbox" id="checkbox" value="Tues"/>
<label for="checkbox"> T </label>
</div>
</td>
<td>
<div class="roundchk">
<input name="Wed" type="checkbox" id="checkbox" value="Wed"/>
<label for="checkbox"> W </label>
</div>
</td>
<td>
<div class="roundchk">
<input name="Thurs" type="checkbox" id="checkbox" value="Thurs"/>
<label for="checkbox"> T </label>
</div>
</td>
<td>
<div class="roundchk">
<input type="checkbox" id="checkbox-Fri" name="Fri"/>
<label for="checkbox"> F </label>
</div>
</td>
<td>
<div class="roundchk">
<input type="checkbox" id="checkbox-sat" name="Sat" />
<label for="checkbox"> S </label>
</div>
</td>
</tr>
</table>
</div>
</form>
</div>
</div>
The id of a labelable form-related element in the same document as the element. The first element in the document with an id matching the value of the for attribute is the labeled control for this label element, if it is a labelable element. If it is not labelable then the for attribute has no effect. If there are other elements which also match the id value, later in the document, they are not considered.
read label - MDN's for attribute
Try this,
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.roundchk {
position: relative;
}
.roundchk label {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 50%;
cursor: pointer;
height: 28px;
left: 0;
position: absolute;
top: 0;
width: 28px;
font-size: 16px;
padding: 3px 0px 2px 5px;
}
.roundchk label:after {
border: 2px solid #fff;
border-top: none;
border-right: none;
content: "";
height: 6px;
left: 7px;
opacity: 0;
position: absolute;
top: 8px;
transform: rotate(-45deg);
width: 12px;
}
.roundchk input[type="checkbox"] {
visibility: hidden;
}
.roundchk input[type="checkbox"]:checked + label {
background-color: #66bb6a;
border-color: #66bb6a;
}
.roundchk input[type="checkbox"]:checked + label:after {
opacity: 1;
}
<div class="container">
<div class="row">
<form class="form-horizontal">
<!-- Text input-->
<div class="container">
<h2>
Select Weekdays
</h2>
<table width="100%" border="0">
<tr>
<td>
<div class="roundchk">
<input name="Sunday" type="checkbox" id="checkbox-sun" value="Sun"/>
<label for="checkbox-sun"> S </label>
</div>
</td>
<td>
<div class="roundchk">
<input name="Monday" type="checkbox" id="checkbox-mon" value="Monday"/>
<label for="checkbox-mon"> M </label>
</div>
</td>
<td>
<div class="roundchk">
<input name="Tues" type="checkbox" id="checkbox-tue" value="Tues"/>
<label for="checkbox-tue"> T </label>
</div>
</td>
<td>
<div class="roundchk">
<input name="Wed" type="checkbox" id="checkbox-wed" value="Wed"/>
<label for="checkbox-wed"> W </label>
</div>
</td>
<td>
<div class="roundchk">
<input name="Thurs" type="checkbox" id="checkbox-thrus" value="Thurs"/>
<label for="checkbox-thrus"> T </label>
</div>
</td>
<td>
<div class="roundchk">
<input type="checkbox" id="checkbox-fri" name="Fri"/>
<label for="checkbox-fri"> F </label>
</div>
</td>
<td>
<div class="roundchk">
<input type="checkbox" id="checkbox-sat" name="Sat" />
<label for="checkbox-sat"> S </label>
</div>
</td>
</tr>
</table>
</div>
</form>
</div>
</div>
I'm trying to set a collection of checkboxes both horizontally and vertically, but they don't come out uniformally.
The labels for each checkbox can vary in size, e.g. one label for a checkbox says "International Casaulty Treaty" whereas another only says WIP.
I was going over this vertical example here.
http://jsfiddle.net/zcuLgbxt/
How to can I neatly arrange them so they are all in alignment both vertically and horizontally?
Thanks very much in advance!
Here is my simple HTML/CSS
li {
margin: 5px;
}
input {
width: 20px;
background-color: blue;
position: relative;
left: 200px;
vertical-align: middle;
}
.vertical-list {
width: 200px;
position: relative;
left: -20px;
display: inline-block;
vertical-align: middle;
}
li{
list-style:none;
}
.horizontal-list{
display: inline;
}
<center>
<ul>
<li>
<input type="checkbox" >
<label class="vertical-list"> label1 label1 label1</label>
<input type="checkbox" >
<label class="horizontal-list" for="myid2">label2</label>
</li>
<li>
<input type="checkbox" >
<label class="vertical-list" >label2label2label2</label>
<input type="checkbox">
<label class="horizontal-list" for="myid2">label2label2</label>
</li>
<li>
<input type="checkbox" >
<label class="vertical-list" > label4 label4 label4</label>
<input type="checkbox" >
<label class="horizontal-list" >label2</label>
</li>
</ul>
</center>
CSS-Tables
li {
margin: 5px;
display: table-row;
}
li * {
display: table-cell;
padding: 0.5em;
}
input {
background-color: blue;
position: relative;
}
.vertical-list {}
li {
list-style: none;
}
.horizontal-list {
display: inline;
}
<ul>
<li>
<input type="checkbox">
<label class="vertical-list"> label1 label1 label1</label>
<input type="checkbox">
<label class="horizontal-list" for="myid2">label2</label>
</li>
<li>
<input type="checkbox">
<label class="vertical-list">label2label2label2</label>
<input type="checkbox">
<label class="horizontal-list" for="myid2">label2label2</label>
</li>
<li>
<input type="checkbox">
<label class="vertical-list"> label4 label4 label4</label>
<input type="checkbox">
<label class="horizontal-list">label2</label>
</li>
</ul>
I'm attempting to create a similar UI as below using radio inputs. Most of the UI was fairly easy to recreate, the only exception is adding the arrow (icon?) to the end of the label div. I've attempted to div an arrow in and force it to the center using margins, but it's obviously not a very good solution. What's the best way to add the arrow at the end of the label?
Here's the current code
<div id='results'>
<form>
<input type="radio" name="result" value="1" id='opt-1' checked>
<label for="opt-1"><h3>Option 1</h3>
<p>Short Description of Option 1</p></label><br>
<input type="radio" name="result" value="2" id='opt-2' checked>
<label for="opt-2"><h3>Option 2</h3>
<p>Short Description of Option 2</p></label><br>
<input type="radio" name="result" value="3" id='opt-3' checked>
<label for="opt-3"><h3>Option 3</h3>
<p>Short Description of Option 3</p></label><br>
</form>
</div>
JSFiddle
EDIT:
I'm aware the JSFiddle doesn't apply the background correctly. The code does operate fine on production.
I've created a wrapper of class .list for each radio item to bind the data.
<div id='results'>
<form>
<div class="list">
<span>
<input type="radio" name="result" value="1" id='opt-1' checked>
</span>
<span class="radio-content">
<span>
<label class="mb-1" for="opt-1"><h3>Option 1</h3>
<p class="d-inline">Short Description of Option 1</p></label><br>
</span>
<span class="arrow"><</span>
</span>
</div>
<div class="list">
<span>
<input type="radio" name="result" value="1" id='opt-1' checked>
</span>
<span class="radio-content">
<span>
<label class="mb-1" for="opt-1"><h3>Option2</h3>
<p class="d-inline">Short Description of Option 2</p></label><br>
</span>
<span class="arrow"><</span>
</span>
</div>
</form>
</div>
CSS code here
.list{
display: flex;
align-items:center;
}
.mb-1{
margin-bottom: 8px;
}
.radio-content{
width:100%;
display:flex;
align-items:center;
justify-content: space-between;
}
Instead of "<" you can use the appropriate icon with the appropriate spacing
label {
background-color: #16a085;
background: linear-gradient(to right, #16a085, #66a99c);
width: 80%;
padding-left: 15px;
padding-top: 10px;
margin-bottom: 3px;
}
form > label > h3 {
margin-bottom: 1px;
}
form > label > p {
margin-top: 1px;
}
form > label h3::after {
content: '\276E';
position: absolute;
right: 0;
padding-right: 20px;
}
input[type=radio] {
display: none;
}
<div id='results'>
<form>
<input type="radio" name="result" value="1" id='opt-1' checked>
<label for="opt-1">
<h3>Option 1</h3>
<p>Short Description of Option 1</p>
</label><br>
<input type="radio" name="result" value="2" id='opt-2' checked>
<label for="opt-2">
<h3>Option 2</h3>
<p>Short Description of Option 2</p>
</label><br>
<input type="radio" name="result" value="3" id='opt-3' checked>
<label for="opt-3">
<h3>Option 3</h3>
<p>Short Description of Option 3</p>
</label><br>
</form>
</div>
So flexbox is awesome for layouts like these. It performs well and has great browser support (http://caniuse.com/#search=flexbox). IE has some issues but should be able to work around.
ul {
list-style: none;
width: 400px;
border: 1px solid #ccc;
margin: 0;
padding: 0;
}
ul li {
display: flex;
flex-direction: row;
justify-content: space-between;
border-bottom: 1px solid #ccc;
}
ul li:last-child {
border-bottom: none;
}
.title {
flex-grow: 1;
padding-top: 4px;
}
.title h3 {
margin: 0;
}
.title p {
font-size: 9px;
color: #aaa;
margin: 1px 0 0 0;
}
.icon {
padding-left: 10px;
width: 40px;
line-height: 50px;
display: inline-block;
}
.toggle-switch {
line-height: 50px;
width: 50px;
display: inline-block;
text-align: center;
}
<ul>
<li>
<span class="icon">*</span>
<div class="title">
<h3>Stops</h3>
<p>Non stop, 1 stop, 2+ stops</p>
</div>
<span class="toggle-switch">^</span>
</li>
<li>
<span class="icon">*</span>
<div class="title">
<h3>Duration</h3>
<p>Any</p>
</div>
<span class="toggle-switch">^</span>
</li>
</ul>
I'm trying to get two interior div boxes with a header and form inputs to display side by side, like
this. I can do this with empty boxes, but when I add the form inputs box2 becomes offset as can be seen here:https://jsfiddle.net/4qux053b/
I discovered that if I add three line breaks after the radio buttons in box2 they come back into alignment, but this seems like a clumsy way of fixing the problem. Here's my code:
HTML
<div id="outer">
<div id="content">
<form name="orderForm" action="handler.php" method="post">
<div class="interior">
<h4>interior box1 heading</h4>
<label><input id="cb1" type="checkbox" name="checkboxes" value="cb1" />checkbox1</label><br />
<label><input id="cb2" type="checkbox" name="checkboxes" value="cb2" />checkbox2</label><br />
<label><input id="cb3" type="checkbox" name="checkboxes" value="cb3" />checkbox3</label><br />
<label><input id="cb4" type="checkbox" name="checkboxes" value="cb4" />checkbox4</label><br />
<label><input id="cb5" type="checkbox" name="checkboxes" value="cb5" />checkbox5</label><br />
<label><input id="cb6" type="checkbox" name="checkboxes" value="cb6" />checkbox6</label><br />
</div>
<div class="interior">
<h4>interior box2 heading</h4>
<label><input id="radio1" type="radio" name="radios" value="radio1" checked />radio1</label><br />
<label><input id="radio2" type="radio" name="radios" value="radio2" />radio2</label><br />
<label><input id="radio3" type="radio" name="radios" value="radio3" />radio3</label>
</div>
</form>
</div>
CSS
body {
font-family: sans-serif;
font-size: medium;
}
h4 {
margin: 0px;
}
#outer {
width: 100%;
max-width: 1000px;
text-align: center;
padding: 20px;
border: 1px solid black;
}
#content {
width: 90%;
padding: 5%;
border: 1px solid black;
}
.interior {
display: inline-block;
width: 24%;
max-width: 300px;
min-height: 200px;
padding: 2%;
border: 1px solid black;
}
Just add vertical-align:top to your interior class
.interior {
display: inline-block;
width: 24%;
max-width: 300px;
min-height: 200px;
padding: 2%;
border: 1px solid black;
vertical-align:top;
}
https://jsfiddle.net/4qux053b/1/