<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<input type="text" id="expiry_month" name="expiry_month" data-native-menu="false">
<input type="text" id="expiry_year" name="expiry_year" data-native-menu="false">
</fieldset>
I have this html. I'm using jquery mobile for building a form, but I can't make the two input fields on a single line. The second input field jumps to the next line. Can someone help me out?
Check this Demo Fiddle
You can modify the selector .ui-input-text changing the display property:
.ui-input-text {
display:inline-block;
}
Just to be sure of change the inputs inside this fieldset assign a classname:
<fieldset ... class="aside">
And then make more specific the CSS rule:
.aside .ui-input-text {
display:inline-block;
}
Related
I've got a fieldset like this:
<fieldset>
<legend>Testsituation</legend>
Field 1: <input type="text"/><br>
My field 2: <input type="text" />
</fieldset>
Now my field 2's input field is displayed way right of field 1's.
My question here is: Is there an easy way to accomplish the input fields being displayed exactly under each other?
As a fiddle example for how it looks like and what I try to achieve:
http://jsfiddle.net/0pj92kxc/
(the effect that is accomplished by the table is what I'm looking for thus both input boxes at the same horizontal locatoin)
Try like this: Demo
<p> <label> Field 1:</label> <input type="text"></p>
<p> <label>My field 2: </label><input type="text"></p>
CSS:
p{
margin:5px;
display:block;
}
label{
width:100px;
display:block;
float:left;
}
You can archive this in different ways.
I think the Table way is not really wrong to do it, you also can just put them UNDER the the text like
*Loginname*
[ Enter your username.. ]
But if you want to stay the way you want to do, you can define a fixed width for the first text part like following:
HTML
<fieldset>
<legend>Testsituation</legend>
<p class="field">
<label for="f1"><span>Field 1:</span></label> <input id="f1" type="text">
</p>
<p class="field">
<label for="f2"><span>Field 1:</span></label> <input id="f2" type="text">
</p>
</fieldset>
CSS
.field span {
min-width: 75px;
width: auto;
display: inline-block;
}
JSFiddle: http://jsfiddle.net/cqrs10b5/4/
I'm trying to create an input form on a web page, and I want all of the input elements to be lined up along a certain column. My idea was to use absolute positioning to just shift all of the input elements over to a specific point on the page. It's working fine, except for one problem: the input elements are overlapping with each other a little bit, vertically.
Here's a MVCE:
<!DOCTYPE html>
<html><head>
<style>
span.right_align {
display: inline;
position: absolute;
left: 80px;
}
div.form_container {
position: relative;
}
</style>
<title>World's Best GUI</title></head>
<body type="text/css" style="background-color: #F7D879; font-family: Georgia, serif">
<div class="form_container">
<form name="guiForm" method="post" action="return false;">
Input 1: <span class="right_align"><input type="text"></span><br>
Input 2: <span class="right_align"><select autocomplete="off">
<option value="yes">Yes</option>
<option value="no">No</option></select></span><br>
Input 3: <span class="right_align"><input type="text" size="50"></span><br>
Input 4: <span class="right_align"><input type="text"></span>
</form>
</div>
</body>
</html>
As far as I can tell, the problem is because the font is smaller than the size of the input box, but it's the size of the font that determines where a new line "begins". If you comment out or remove everything in the right_align class, they stop overlapping (but they also stop lining up so nicely).
I'll also note that the reason I went for the span-class solution is because I need to 1) have some lines dynamically disappear and reappear, depending on the current state of a drop-down, and 2) dynamically create new input items that will also line themselves up nicely. This seemed like a solution that would interfere very little with the current workings of my web page.
Is there a simple way to fix this? Should I be creating these columns in an entirely different way? I'm open to totally new ideas as well.
EDIT: someone suggested I create a jsfiddle, so I did: http://jsfiddle.net/uy9comxk/
EDIT 2: there will be lines where I have multiple inputs that have to appear beside each other on the same line (for date inputs). I didn't include them because it would have increased the MCVE size by a lot.
In your css, use a line-height and it will work:
div.form_container {
position: relative;
line-height: 25px;
}
With a fiddle
Since you're using a form, you should use the label tag and set the width of each - ideally a little longer than than width of the inputs' names to account for longer ones. Using the label for the inputs will also fix the overlapping issue of the inputs.
CSS:
label {
display: inline-block;
width: 80px;
}
input {
margin-left:10px;
}
HTML:
<form name="guiForm" method="post" action="return false;">
<label for="input1">Input 1:</label> <input name="input1" type="text"><br>
<label for="input2">Input 2:</label> <input name="input2" type="text"><br>
<label for="input3">Input 3:</label> <input name="input3" type="text"><br>
<label for="input4">Input 4:</label> <input name="input4" type="text"><br>
<label for="input5">Input 5:</label> <input name="input5" type="text"><br>
</form>
http://jsfiddle.net/ub3bw1rv/
I'm really not that good at CSS, and I want to know how to correctly style a form in a manner that it puts each single text input and label in a line. like this :
<label for="input1">...</label>
<input type="text" id="input1"/>
<label for="input2">...</label>
<input type="text" id="input2"/>
<label for="input3">...</label>
<input type="text" id="input3"/>
<label for="input3">...</label>
<input type="text" id="input3"/>
and it would be shown in the webpage like :
(label)(input)
(label)(input)
(label)(input)
(label)(input)
<label>foo</label>
<input type="text"/>
<label>foo</label>
<input type="text"/>
<style>
input, label { float:left }
label { clear:left; }
</style>
http://jsfiddle.net/RpRS5/
I recommend this tutorial by A List Apart about Prettier Accessible Forms. You can also use a definition list with some custom styling, e.g.,
<dl><dt><label></label></dt>
<dd><input></dd></dl>
And something like:
dl dt {
float: left;
width: 8em;
}
Edit: to sum up the A List Apart article, they suggest you put form fields in an ordered list ol. Labels are displayed as inline-block so they appear horizontally next to their associated fields.
Put them in a list, or in a structure like a list (that is to say, wrap each "row" in a div).
Put your inputs inside the label element and then you can simply display: block them or float them, I prefer display but it would be easy enough to change.
<label>Hello <input type="radio" name="what" value="Hello" /></label>
http://jsfiddle.net/Bpxfp/
http://jsfiddle.net/ud7YE/1/
you can control the space between the label and input by varying the width of the wrapper. Just set the height of the label and the top margin of the input same in value but negative
I find enclosing label and input or select tags in a div or list. And the label and select tags should be of type inline-block
<div>
<label>Name: </label><input type="text" />
</div>
<div>
<label>Place: </label><input type="text" />
</div>
CSS:
label {
display: inline-block;
}
input {
display: inline-block;
padding: 2px;
}
div {
display: block;
margin: 2px 0;
}
This would work out well.
How do I correct the following E-mail textbox alignment: ?
To make it look like this:
I know I can use tables, but how do I solve this problem without using tables? CSS maybe?
HTML:
<form action="" name="contactform" method="post">
<p></p>
First name: <input type="text" class="contact" name="contactfirstname" value="">
<br/>
Last name: <input type="text" class="contact" name="contactlastname" value="">
<br/>
E-mail: <input type="text" class="contact" name="email" value="">
<p></p>
The most minimalized version I could think of...
<form>
<label>First Name: <input type="text" name="firstName"></label>
<label>Last Name: <input type="text" name="lastName"></label>
<label>Email Address: <input type="email" name="emailAddress"></label>
</form>
and
form {
width: 300px;
}
label {
display: block;
margin: 5px;
padding: 5px;
clear: both;
}
label input {
float: right;
}
Since OP has edited his question to include his markup, I'll expand the answer.
Some Points of Improvement:
Remove the empty <p> element, and the <br/> elements. They have no value inside a form.
Use <label>s, that's what they were made for. You can wrap the label and the input inside of the <label> tag, or you can use <label for="element_id">Label</label><input id="element_id">.
Be consistent. If you decided to go with the <br /> type of format for singular tags, stick with it to the <input />s as well.
Use correct input types for specific inputs, there is type="email" for the email field, which will optionally have the browser check for you if it's a valid email address or not!.
Use CSS for design and layout, not <p>s and <br>s.
Good luck!
I'm assuming your HTML is something like:
<p>
Email
<input />
</p>
Change this to:
<p>
<label>Email</label>
<input />
</p>
This means you can then apply a fixed width to all your labels, making them consistent:
label
{
width:100px;
float:left;
}
http://jsfiddle.net/zvWqk/1/
Or as #Zeta has pointed out, nest your input inside the label, and float right. This will prevent you needing to apply a for attribute to your label.
http://jsfiddle.net/tt8gx/
Use CSS to make the labels display as block elements and have a fixed width. Display the inputs as block elements and float them left. Put a clear:left on the labels so they'll each be on a new line.
How do I make forms with background colour? Using tables?
Also I can't seem to line up the text to the first row of each textarea?
Edit:
To clarify, this is my code:
Summary: <textarea rows="1" cols="50"> </textarea><br/><br/>
Changing the background colour of the form is very simple. Using CSS and a unique id, apply a style to the form:
<form id="myForm"></form>
Using CSS
#myForm {
background-color: your-color-of choice;
}
In fact, you don't even have to use an ID, but it's advisable if you are going to have several forms with each requiring a unique style. Otherwise, you could just reference the form element in your CSS as such: form { background-color: your-color-of choice; }
As far as aligning the text along with a text area, you can use plain CSS, divs, or tables. But I think you should ask this separately as it is another scope altogether. Do some research and search for other questions on alignment here on SO to see which method will work best for you.
To give you an idea, though, try this:
<form id="myForm">
<label for="myTextArea">Summary</label>
<textarea id="myTextArea"></textarea>
</form>
In CSS
#myForm {
width:500px
}
#myForm label {
float:left;
display:block;
width:150px;
}
#myForm textarea {
float:left;
width:200px;
}
I don't recommend you do it exactly this way, but this should give you a start.
If you will have many different fields in the form, you might consider wrapping each section in a fieldset:
<form id="myform">
<fieldset id="customerinfo">
<legend>Personal Info</legend>
Name: <input type="text" /><br/>
Address: <input type="text" /><br/>
etc...
</fieldset>
<fieldset id="orderinfo">
<legend>Your Order:</legend>
Product: <input type="text" /><br/>
Quantity: <input type="text" /><br />
etc...
</fieldset>
</form>
The fieldset lets you define a "legend" for the group of fields (the name at the top) and puts a box around them. IMHO it gives a pretty cool effect. And, of course, you can style them with css.
Good luck!