I have this HTML:
<div>
<label>field 1</label>
<input type="text">
<label>field 2</label>
<input type="text">
<label>field 3</label>
<input type="text">
</div>
How can I make a label-input pair use 100% of the width with CSS ? (and each pair be on their own line)
I used to put the label-input pair in a sub div of their own. But I'm wondering if there's a way to do it with just CSS. (I'm using compass to generate the CSS).
For bonus points .. can you have the same CSS make the label a line above on mobile (small screen) devices.
Thanks heaps.
Sort of like this? http://jsfiddle.net/m6pZH/13/
I suggest you modify your HTML slightly, as it will be hard (if even possible) to properly maintain your current HTML properly:
<ul>
<li>
<label>field 1</label>
<input type="text" />
</li>
<li>
<label>field 2</label>
<input type="text" />
</li>
<li>
<label>field 3</label>
<input type="text" />
</li>
</ul>
CSS:
li {
display: block;
overflow: auto;
}
li > label {
float: left;
}
li > input {
width: auto;
float: right;
}
Try this:
div label, div input {
display: block;
}
displaying elements on block puts them on their own line and makes them a block element.
Edited content:
div { width: 600px }
div label { float: left; width: 200px; }
div input { float: right: width: 390px; }
Try this.
Related
So I basically have a label and text like this:
<label class="labelClass"> for="something">
<input id="inputID" class="inputClass" name="inputName" value="value" type="radio">
Some text inside the label.
</label>
Note that this is just an example and not used for any other means.
So I can and know how to call to this label and input, but They keep looking like this:
I already tried:
margin-right
padding & padding-right
text-align:center
Like in the following css example:
.page-to-the-css label.something.option {
margin-right:20px;
padding-right:20px;
text-align:center;
}
and also for the radio button:
.page-to-the-css input.something.inputClass {
margin-right:20px;
padding-right:20px;
text-align:center;
}
Hope anyone could help me solve this problem.
Note: I also can't touch the jquery, javascript or anything else but css, so keep it at css please.
UPDATE: Neither did any of the current answers work, also not the one of VilleKoo.
EDIT: This is the form it is happening to: form This website is drupal so I can't reach the html or sadly I can't provide you guys of any code. I hope this problem could be solved either way.
This should work for you.
label {
display: block;
}
input {
display: inline-block;
margin-right: 0.5rem;
}
<label id="labelID" for="something">
<input id="inputID" class="inputClass" name="inputName" value="value" type="radio">
Some text inside the label.
</label>
<label id="labelID" for="something">
<input id="inputID" class="inputClass" name="inputName" value="value" type="radio">
Some text inside the label.
</label>
Look my example, it is easy
.labelClass {
position: relative;
display: block;
text-align: center;
padding-left: 20px;
}
.labelClass .inputClass {
position: absolute;
left: 0;
}
<label class="labelClass" for="something">
<input id="inputID" class="inputClass" name="inputName" value="value" type="radio">
Some text inside the label.
</label>
Many HTML elements have a default margin setting. You can override this and set it to 0. In your case, you want to reset margin-right on the radio button:
<input type="radio" name="beds" value="1" style="margin-right: 0" />
You probably want to add it to your stylesheet so that it applies to all radio buttons:
input[type="radio"] {
margin-right: 0;
}
This is what is showing what ever css style I put
I really want to have this please help
<li><div class="wide checkbox-inline">
<label class="required" for="options[3]">Delivery Day <em>*</em> </label>
<div class="input-box">
<ul class="options-list"><li><input type="checkbox" name="options[3][]" id="options_3_text_Sunday" class="checkbox" title="Sunday" value="Sunday"><label for="options_3_text_Sunday"> Sunday</label></li><li><input type="checkbox" name="options[3][]" id="options_3_text_Monday" class="checkbox" title="Monday" value="Monday"><label for="options_3_text_Monday"> Monday</label></li><li><input type="checkbox" name="options[3][]" id="options_3_text_Tuesday" class="checkbox" title="Tuesday" value="Tuesday"><label for="options_3_text_Tuesday"> Tuesday</label></li><li><input type="checkbox" name="options[3][]" id="options_3_text_Wednesday" class="checkbox" title="Wednesday" value="Wednesday"><label for="options_3_text_Wednesday"> Wednesday</label></li><li><input type="checkbox" name="options[3][]" id="options_3_text_Thursday" class="checkbox" title="Thursday" value="Thursday"><label for="options_3_text_Thursday"> Thursday</label></li><li><input type="checkbox" name="options[3][]" id="options_3_text_Friday" class="checkbox" title="Friday" value="Friday"><label for="options_3_text_Friday"> Friday</label></li><li><input type="checkbox" name="options[3][]" id="options_3_text_Saturday" class="checkbox validate-one-required-by-name" title="Saturday" value="Saturday"><label for="options_3_text_Saturday"> Saturday</label></li></ul> </div>
</div></li>
.checkboxes label {
display: block;
float: left;
padding-right: 10px;
white-space: nowrap;
}
.checkboxes input {
vertical-align: middle;
}
.checkboxes label span {
vertical-align: middle;
}
After you added the code, i took a closer look. Seems the problem is caused by use of the UL (unordered list). The list sums up all the list-items (LI's), which normally start on a new rule for every item.
Normally this is what you want by adding a list, but in this case you don't want to sum up the checkboxes in a list.
To solve the problem the fast way, you can use this styling:
.options-list li{
display: inline;
}
The better way is to leave out the < li >- and < ul >-tags in this case.
Check this out for the working example:
https://jsfiddle.net/crix/o1du23b3/
Hope this helps!
I'm new to CSS layouts and have hit a problem.
This is what I currently have. http://jsfiddle.net/EPp5C/5/
#login {
margin: 0;
padding: 0;
width: 500px;
float: right;
}
#login ul {
margin: 0;
padding: 0;
}
#login ul li {
margin: 0;
padding: 0;
display: inline-block;
font-size:14px;
color: white;
}
There are 2 parts to this question.
First part:
I would like the list items to be displayed as
Username: Password:
[textfield] [texfield]
so have the textfields under the corissponding username and password.
http://jsfiddle.net/EPp5C/6/
I added a <br> with a class of clear. I then gave this class the attributes of clear:both;. This will push the floats onto a new line. If you want to line them up, add a width to the elements. If you want to move them further up the page, add a margin-top to the parent elements.
<ul>
<li>Username: </li>
<li>Password: </li>
<br class="clear" />
<li><input type="text" name="username" /></li>
<li><input type="text" name="password" /></li>
</ul>
.clear { clear:both; }
I think you should change your html.
You do not need to put this form info in a ul. In fact, that would be semantically incorrect.
Here is what I suggest:
HTML
<div id="login">
<form>
<label>Username:</label><label>Password:</label>
<br />
<input type="text" name="username" />
<input type="text" name="password" />
</form>
</div>
CSS
label{
display:inline-block;
width:170px;
color: #fff;
}
Also, to put it inside the colored div as much as possible, I used margin-top on the #login
#login {
margin: 0;
padding: 0;
width: 500px;
float: right;
**margin-top:-30px;**
}
Demo
http://jsfiddle.net/EPp5C/9/
i suggest you to put the form child inside span tag
working fiddle
HTML
<div id="login">
<form>
<span>Username:<input type="text" name="username" /></span> 
<span>Password:<input type="text" name="password" /></span>
</form>
</div>
reference:The <span> tag is used to group inline-elements in a document.
CSS (refer complete CSS at the fiddle)
span{
margin-right:10px;
display:inline-block;
width:220px;
color: #fff;
}
hope it can help
I'm new to the play framework and am trying to add a form to the top of my page with a simple username and password field and a submit button. I'm using the play form helper, but it won't allow me to have these fields side by side ,instead it always puts them on top of one another. I keep trying to change the CSS, but no luck.
Here's the relevant part of the HTML
<header id="top_header" class=rounded>
<div id="logo">
<h1>#message</h1>
</div>
<div id="login_pane">
<div id="login">
#helper.form(action=routes.Test.testFunction(), 'id->"login_form"){
#helper.inputText(loginForm("username"), 'id->"username", '_label->"Username")
#helper.inputPassword(loginForm("password"), 'id->"password", '_label->"Password")
<input type="submit" value = "Enter" id="login_button">
}
</div>
</div>
</header>
And the CSS
#top_header{
background: yellow;
height: 30px;
}
#logo{
float: left;
background: green;
width: 200px;
}
#login_pane{
float: right;
background: blue;
width: 500px;
}
#login{
float: left;
background: red;
}
#username, #password, #login_button{
display: inline;
}
By the way, I just use the ugly background colours to see where things are positioned.
I've tried putting display: inline just about everywhere but it's having no effect. Has anybody any ideas on how to position the form elements side by side?
If you check the HTML source you can notice that the form-helper generating HTML like this (maybe similar not exactly identical) :
<form action="/test/testFunction" method="GET" id="login_form">
<dl class=" " id="username_field">
<dt><label for="username">Username</label></dt>
<dd>
<input type="text" id="username" name="username" value="" >
</dd>
</dl>
<dl class=" " id="password_field">
<dt><label for="password">Password</label></dt>
<dd>
<input type="password" id="password" name="password" >
</dd>
</dl>
<input type="submit" value = "Enter" id="login_button">
</form>
So, you can define your css based on dl, dd, or dt element to make it displayed side by side. This is simple but not best sample (I only tell you the basic) :
#login_form dl {
padding: 10px;
float: left;
}
#login_form dd {
margin-left: 0px;
}
Hope this useful for you friend.. :)
I want a row of blocks from left to right, followed by a block underneath.
Here is a picture of what I would like to see rendered in the browser.
I need to do all positioning by CSS, not by tables. Here is my HTML and my CSS...
<!DOCTYPE html>
<html>
<head><link rel="stylesheet" href="demo.css" /><head>
<body>
<form action="">
<fieldset>
<legend>Field set A</legend>
<label for="password">Password
<input id="password" name="password" type="text" value="my password" />
</label>
</fieldset>
<fieldset class="radio">
<legend>Chaining mode</legend>
<label for="chain-cfb">
<input id="chain-cfb" name="chain" type="radio" />CFB
</label>
<label for="chain-cbc">
<input id="chain-cbc" name="chain" type="radio" />CBC
</label>
</fieldset>
</form>
<hr />
<p style="padding-top: 1em;">Some text underneath</p>
</body>
</html>
... and here is the content of demo.css...
fieldset
{
float: left;
display: block;
width: 17em;
margin: 0 1em 1em 0;
padding: 0 1em 1em 1em;
}
fieldset.radio input
{
clear: both;
float: left;
width: auto;
}
input
{
display: block;
width: 15em;
}
label
{
display: block;
margin-bottom: 1em;
font-weight: bold;
}
label.first
{
padding-top: 1em;
}
The way I read it, should be getting the desired result with this code. But I am not. Here is what renders instead ....
What changes do I need to make to my html/css in order to get the stated desired result?
A way without clearing is:
form { overflow: hidden; }
I usually create a class called floatbox and use this on every container which contains floating elements
.floatbox { overflow: hidden; }
the matching html then is
<form class="floatbox" action="">
<fieldset><p>I'm floating</p></fieldset>
<fieldset><p>me too</p></fieldset>
</form>
you need to make the <hr /> element clear the floats. hr { clear: left; }
Add:
hr {
clear: left;
}
to your style sheet to clear your floats.
You could use the ole' dummy clearing element trick:
<form action="">
<fieldset>
<legend>Field set A</legend>
<label for="password">Password
<input id="password" name="password" type="text" value="my password" />
</label>
</fieldset>
<fieldset class="radio">
<legend>Chaining mode</legend>
<label for="chain-cfb">
<input id="chain-cfb" name="chain" type="radio" />CFB
</label>
<label for="chain-cbc">
<input id="chain-cbc" name="chain" type="radio" />CBC
</label>
</fieldset>
<div style="clear:both"> </div>
</form>
This ensures your form actually occupies as much space as the elements inside it.
The problem with simply clearing the hr is that the form has zero width and height, which could be problematic if you're applying styling to the form as well.