I am trying to horizontally align the checkboxes that appear above the dropdowns on the yellow search bar on this page.
I thought that inline block CSS might be the right way to do this, but I can't seem to get it to work.
I'd be most grateful to know if you have any suggestion of the best way to do this?
Thank you!
A very modern and flexible solution would be to use flexbox. E.g.:
ul.categorychecklist {
list-style:none;
display: flex;
flex-wrap: nowrap;
flex-direction: row;
}
This is how we do it in 2016 :)
For more details see: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
ul.categorychecklist li {
display: inline-block;
}
Add this code in your CSS file to make the check-boxes inline.
Yes display inline-block is the right way to do this . but you have to add it at the right place
Please add this in your css
.categorychecklist li {
display: inline-block;
}
Try this: this code make your checkbox horizontally.
ul.categorychecklist {
list-style: none;
margin: 0;
padding: 0;
}
ul.categorychecklist li {
float: left;
padding-right: 10px;
}
Another option
.popular-category {
display: inline;
}
you may also want to add a padding-right: 15px; on the above
For ex. by doing:
ul.categorychecklist { // .categorychecklist - will apply only to this menu
list-style: none; // remove discs
}
ul.categorychecklist li {
display: inline-block; // order inline
}
Your code will go as follows
<style>
.row-cb {width: 285px;margin: auto; }
.row-cb label { float: left; }
.row-cb span { float: left; text-align: left; }
.clear-both {clear: both}
</style>
<div class="row-cb">
<span><input name="option" id="cb1" type="checkbox" /></span>
<label for="cb1">checkbox-001</label>
<div class="clear-both"></div>
</div>
<div class="row-cb">
<span><input name="option" id="cb2" type="checkbox" /></span>
<label for="cb2">checkbox-002</label>
<div class="clear-both"></div>
</div>
<div class="row-cb">
<span><input name="option" id="cb3" type="checkbox" /></span>
<label for="cb3">checkbox-003</label>
<div class="clear-both"></div>
</div>
<div class="row-cb">
<span><input name="option" id="cb4" type="checkbox" /></span>
<label for="cb4">checkbox-004</label>
<div class="clear-both"></div>
</div>
You can also make the trick using float, as you could see in this fiddle:
https://jsfiddle.net/v7thvxjj/2
Note: remember to remove empty ul from the HTML code
Related
I am currently trying to make a simple form. As an example, this is what I'm trying to get it to look like.
This is the current architecture for each field:
<p>
<label>First Name</label>
<input></input>
</p>
I struggle once I get to the CSS part. Here's a full example, and any help would be greatly appreciated
div {
text-align: center;
}
form p {
display: inline-block;
}
form label {
text-align: left;
display: block;
}
<div>
<form>
<p><label>Name:</label> <input type="text"></p>
<p><label>Password:</label> <input type="text"></p>
</form>
</div>
I just cannot figure out how to get a line break after the input with the current CSS.
can use float instead of inline-block
form {
max-width: max-content;
margin: auto;
}
form p {
float: left;
clear: left;
}
I have a very basic checkbox hack I'm using for selecting different items.
It does exactly what I want it to do: namely, clicking on the label allows me to select the corresponding figure:
input[type="checkbox"] { display:none; }
.wrap { width: 50%; }
.wrap label { display: inline-block;}
.checker {background: red; padding: 50px;}
.checker figure { margin: 10px; display: inline-block; position: relative;}
.wrap input { display: none; }
.wrap input:checked ~ .checker { display: none; }
.wrap input:checked + label { color: blue; }
.wrap #check1cont:checked ~ .check1 {display: inline-block;}
.wrap #check2cont:checked ~ .check2 {display: inline-block;}
<div class="wrap">
<input type="checkbox" name="cont" id="check1cont">
<label class="check1cont" for="check1cont">Check 1</label>
<input type="checkbox" name="controllers" id="check2cont">
<label class="check2cont" for="check2cont">Check 2</label>
<figure class="checker check1">CHECK 1</figure>
<figure class="checker check2">CHECK 2</figure>
</div>
But I want the controllers/labels to be aligned on the left side, with the figures on the right. Ideally, I'd like to be able to do this with flex, so the labels are housed in a responsive, left-aligned div.
I've tried adding the divs with different sibling and child selectors, but I'm new to all of this, and I don't think I've gotten the right combination (or else I'm doing something else wrong, or else it's impossible).
Can anyone recommend a means of doing this?
Thank you in advance.
The hidden checkbox tricks works because the checkboxes themselves can be anywhere in relation to the labels. So put the checkboxes first, and the labels in a separate container following them, and you can control both the labels and the figures with the :checked state of the checkboxes.
.wrap { display:flex; width:50%; vertical-align:top;}
.wrap aside {vertical-align:top;}
.wrap label {white-space:nowrap; display: block;}
.checker {background: red; padding: 50px; vertical-align:top;}
.checker {margin: 10px; display: inline-block; position: relative;}
.wrap input { display: none; }
input:checked ~ main .checker { display: none; }
#check1cont:checked ~ aside .check1cont,
#check2cont:checked ~ aside .check2cont { color: blue; }
#check1cont:checked ~ main .check1,
#check2cont:checked ~ main .check2 {display: inline-block;}
<div class="wrap">
<input type="checkbox" name="cont" id="check1cont">
<input type="checkbox" name="controllers" id="check2cont">
<aside>
<label class="check1cont" for="check1cont">Check 1</label>
<label class="check2cont" for="check2cont">Check 2</label>
</aside>
<main>
<figure class="checker check1">CHECK 1</figure>
<figure class="checker check2">CHECK 2</figure>
</main>
</div>
Note: as was remarked in the comments, the code is a simplification of the real code, so I had to clean up the css a bit. You probably have to un-clean it up to make it work for the real code again!
I'm using a form like the following:
<form action="#" method="post">
<div class="row">
<label for="email">E-Mail</label>
<input type="text" name="email" id="email">
</div>
<div class="row">
<label for="password">Password</label>
<input type="password" name="password" id="password">
<br>
<label for="passwordRepeat">Repeat Password</label>
<input type="password" name="passwordRepeat" id="passwordRepeat">
</div>
<div class="row">
<label for="phonenumber">Phone Number</label>
<input type="text" name="phonenumber" id="phonenumber">
</div>
</form>
with the following styles:
.row {
background-color: #eee;
margin-bottom: 10px;
padding: 5px;
}
.row > * {
display: inline-block;
vertical-align: middle;
}
.row > label {
width: 200px;
}
Take a look at the JSFiddle.
I'm using a <br> tag to break the line between a bunch of elements with the property display: inline-block. I'm aware that it is of course bad practice to use <br> instead of margin and padding. That's the reason it became so unpopular.
As far as I know there is no good reason to not use a single <br> tag in an inline element as it is intended to be: As a line break in text without creating a new text section. With display: inline-block, you simulate the inline behaviour to your block elements. Spaces between elements appear as they would in an inline element.
In my case, the <br> is used instead of two wrapper <div>'s. I do like my HTML code clean, so I hesitate in using to many wrapper <div>'s. Is it bad practice to use a <br> in this exact case? I think it is very clear what happens here, if you just read the HTML flie. What do you think about that (without any prejudgments about <br> in general)?
I believe the answer is Yes. <br /> is for line breaks in text and not for positioning, But I will give you a situation where it would hurt you in the long run. Say you have a mobile layout for your fields, and you want them to be 100% width on small screens - with labels above... and then in another case you want them to vertically align next to another... and then in another situation land in a grid like setup. Those linebreaks are going to become cumbersome.
Here is a jsFiddle of that.
I did see someone using them in a clever way where they used display: none; on them at certain break points that rendered them inactive. I didn't expect that to work. I can only really imagine using them for:
Cosmo magazine
style - huge
text layouts
and even then I would use lettering.js to insert spans. But hey --- it's not that people will say you were wrong... it's what does the job best. And I don't think that <br /> ever really suits positioning.
With HTML5, it seems like everything has an element now, so div's are for positioning. That seems pretty semantic to me.
HTML
<div class="input-wrapper">
<label data-required="required">E-Mail</label>
<input type="email" name="email" />
</div>
CSS
.your-form .input-wrapper {
width: 100%;
float: left;
margin-bottom: 2em;
}
.your-form label {
display: block;
width: 100%;
float: left;
}
[data-required="required"]:after{
content: "*";
color: red;
font-size: .8em;
vertical-align: top;
padding: .2em;
}
.your-form input{
display: block;
width: 100%;
float: left;
}
#media screen and (min-width: 28em) {
.your-form label {
width: auto;
float: none;
display: inline-block;
vertical-align: middle;
min-width: 10em;
}
.your-form input{
width: auto; /* overide previous rule */
float: none; /* overide previous rule */
display: inline-block; /* center vertically */
vertical-align: middle; /* center vertically */
/* min-width: 20em; */
font-size: 1.4em; /* just to show vertical align */
}
} /* end break point */
Yes, as you are using a content element for styling.
It might be shorter, but that doesn't mean it's cleaner.
Adding elements just for styling purposes should be avoided if possible.
And in this case it's possible: Demo
HTML:
<form action="#" method="post">
<div class="row">
<label>E-Mail <input type="text" name="email" /></label>
</div>
<div class="row">
<label>Password <input type="password" name="password" /></label>
<label>Repeat Password <input type="password" name="passwordRepeat" /></label>
</div>
<div class="row">
<label>Phone Number <input type="text" name="phonenumber" /></label>
</div>
</form>
CSS:
.row {
background-color: #eee;
margin-bottom: 10px;
padding: 5px;
}
.row > label {
display: block;
overflow: hidden;
width: 350px;
}
.row > label > input {
float: right;
}
I would avoid it where possible. You may be able to achive what you want, and not use floats by adding a margin to the input element like:
.row > input
{
margin-right:50%;
}
http://jsfiddle.net/pwtA4/
You may need to add some media queries if you want for smaller view ports
I am designing a web page with multi line Label name & input type file. i tried very hard to arrange in same line sequence but failed to do. Is there any idea about it?
please take a look enter link description here , it looks very ugly and
I am not really sure what you are looking for, but check out the jsfiddle changes I had made. I modified both CSS classes a little bit.
Have a look at this tutorial: http://www.websiteoptimization.com/speed/tweak/forms/
You can check this fiddle with the following modifications:
removing deprecated attributes align from div and moving inlined CSS style (style attribute) to the CSS file
same for b element used for the text of the label: span is better, and it's already bold as its parent. Or font-weight: bold; would be added in CSS
display: inline-block; is used instead of floats. No need to clear them afterward. IE7 and 6 need a fix (in comment) if you support them. This allow you to give the element a width (like you could do with any block element) and still get them on the same horizontal line (like you could do with any inline element). You'll have 4px due to whitespace in your HTML code, because whitespace shows up in inline element like two span separated by a space but there's a fix.
HTML code
<div id="divid1">
<p>
<label class="labelname"> <span> select Image* :</span>
<input type="file" name="file1" class="hide-file" />
</label>
</p>
<p>
<label class="labelname"> <span>XML File* :</span>
<input type="file" name="file2" class="hide-file" />
</label>
</p>
</div>
CSS
#divid1 {
padding: 50px;
}
.labelname {
width: 100%; /* or at least approx. 380px */
min-height: 30px;
display: block;
background: lightgreen;
font-weight: bold;
margin-bottom: 2px;
}
/* Only for IE7 */
/*.labelname span,
.hide-file {
display: inline;
zoom: 1;
}
*/
.labelname span {
display: inline-block;
width: 140px;
text-align: right;
background-color: lightblue;
}
.hide-file {
display: inline-block;
opacity:0.5;
}
now it looks good :)
html
<div id="divid1" align="center" style="padding:50px;">
<div class="formrow">
<label class="labelname" for="hide-file">Select Image* :</label>
<input type="file" name="file1" class="hide-file" />
</div>
<div class="formrow">
<label class="labelname" for="hide-file">XML File* :</label>
<input type="file" name="file2" class="hide-file" />
</div>
</div>
css
.labelname {
background: green;
font: bold 2px;
margin-bottom: 2px;
font-weight: bold;
float: left
}
.hide-file {
position: relative;
opacity: 0.5;
float: right
}
.formrow {
width: 400px
}
Assuming the following markup:
<fieldset>
<legend>Radio Buttons</legend>
<ol>
<li>
<input type="radio" id="x">
<label for="x"><!-- Insert multi-line markup here --></label>
</li>
<li>
<input type="radio" id="x">
<label for="x"><!-- Insert multi-line markup here --></label>
</li>
</ol>
</fieldset>
How do I style radio button labels so that they look like the following in most browsers (IE6+, FF, Safari, Chrome:
I believe this does it all. You didn't mention that it has to validate, however, so I used the inline-block (-moz-inline-box) display. One of my favorites, actually.
Here's a working copy
Tested in Safari 3, FireFox 3, and IE7.
<style type="text/css">
ol{
padding-left: 0;
margin-left:0;
}
ol>li {
list-style-type: none;
margin-bottom: .5em;
}
ol>li input[type=radio] {
display: -moz-inline-box;
display: inline-block;
vertical-align: middle;
}
ol>li label {
display: -moz-inline-box;
display: inline-block;
vertical-align: middle;
}
</style>
Using the following markup and css I was able to produce multi-line labels that do not wrap under the radio button:
<style type="text/css">
fieldset input, label {
float: left;
display: block;
}
fieldset li {
clear: both;
}
</style>
<fieldset>
<ol>
<li>
<input type="radio" id="x" />
<label for="x">
stuff<br/>
stuff1
</label>
</li>
<li>
<input type="radio" id="x" />
<label for="x">
stuff<br/>
stuff1
</label>
</li>
</ol>
</fieldset>
however I was unable to use:
fieldset label {
vertical-align: middle;
}
to center the label vertically on the radio button, even when applying a width (both suggestions in Dmitri Farkov's answer. My main purpose was to prevent wrapping under the radio button, so this solution will be fine for the time being.
Since I asked how to handle really long labels above, and I finally solved it myself. Here is the solution to my problem. Maybe it could help you to?
<style type="text/css">
#master_frame {
background: #BBB;
height: 300px;
width: 300px;
}
fieldset.radios {
border: none;
}
fieldset fields {
clear: both;
}
input {
float: left;
display: block;
}
label {
position: relative;
margin-left: 30px;
display: block;
}
</style>
<div id="master_frame">
<fieldset class='radios'>
<div class='field'>
<input type="radio" id="a" />
<label for="a">Short</label>
</div>
<div class='field'>
<input type="radio" id="b" />
<label for="b">
A really long and massive text that does not fit on one row!
</label>
</div>
</fieldset>
</div>
Make input and label both
float: left;
display: block;
Set width's for the label and input.
apply
clear: both;
vertical-align: middle;
to all the li's.
You should use white-space: normal; in label for multiline