Here is my code:
<div>
<label>Name</label><input type="text" id='name'/><br />
<label>Email</label><input type="text" id='email'/><br />
<label>Place</label><input type="text" id='place'/><br />
</div>
I'm new to CSS, I don't want table to get aligned, but the perfection should be like same, and don't want to apply style to individual elements.
Any help is appreciated.
I'm assuming you want to align the labels and inputs next to one another, in which case you'll be needing floats. Here's the quick css code:
form {
width: 500px;
overflow:hidden;}
label {
clear: both;
float: left;
width: 40%;}
input {
float: left;
width: 55%;}
I think that should work :)
Related
I have multiple input/textarea with some label. What I want is to make a space between label and input it self. Problem is that label text is different always
For example:
<p class="formfield">
<label translate="case.calculation.label.price"></label>
<input ng-model="part.priceByUser" class="table-form">
</p>
<p class="formfield">
<label for="textarea" translate="case.calculation.parts.description"></label>
<textarea id="textarea" rows="3" ng-model="part.descriptionByUser" class="table-form"></textarea>
</p>
Looks like:
I think this may be done with fixed label width, so i added something like:
.formfield label {
padding-right:10px;
width: 15%;
}
With what it looks correct on all normal screen e.g.:
But have problem on small device as mobile phones where label text can overflow below input area e.g.:
I will be happy for any advise or best practice for this kind of issue :)
Thanks guys.
You are correct, you must set fixed label width (15% is NOT fixed width). I also would use table layout for better looks:
.formfield {
display: table;
width: 100%;
padding-bottom: 25px;
}
.formfield label,
.formfield .input-wrapper {
display: table-cell;
vertical-align: top;
}
.formfield label {
width: 100px;
}
.formfield .input-wrapper .table-form {
width: 100%;
}
<div class="formfield">
<label for="price">Price</label>
<div class="input-wrapper">
<input id="price" class="table-form" />
</div>
</div>
<div class="formfield">
<label for="textarea">Description</label>
<div class="input-wrapper">
<textarea id="textarea" rows="3" class="table-form"></textarea>
</div>
</div>
If you already know the maximum space taking by a label then apply that space's value as min-width to all labels. Something like this:
.formfield label {
padding-right:10px;
width: 15%; /* to maintain responsive */
min-width: 120px; /* minimum threshold width */
}
This makes sure that the minimum width of the labels are not less than 120px even when 15% of the width is less than 120px. Hence, the layout will be still responsive.
So we talked about using media queries in the comments (and you did ask for best practises) of your answer. I'm not saying this always is the best practise but would work in your situation and leaves a lot of space for the label and the input which is generally a good practise in mobile. A simple way to possibly do some changes to your labels would be to use css like this:
#media (max-width: 480px) {
.formfield label {
padding-right:0px;
width: 100%;
}
.formfield input, .formfield textarea {
width: 100%;
}
}
Please consider all of your other css may be different from mine but in your example this would probably work great. Just set the 480px to what ever suites your needs the best. It's the breakpoint when the media query takes affect.
Just for reference: MDN - Using media queries
I have a textbox and checkbox next to each other, my problem is the checkbox goes to the next line:
<td><div class='allDropdown'><input type='text' class='vendorDropdown' /> <input type='checkbox' class='checkbox' /></div></td>
I am trying to get them next to each other.
Here is my CSS:
.allDropdown {
width: 100%;
}
.allDropdown input[type=text] {
float: left;
width: 150px;
}
.allDropdown input[type=checkbox] {
float: left;
}
I have a very long table and I am also using bootstrap, when I try to decrease the size of the textbox, the td just gets smaller and the checkbox goes to the second line
you can position your text box as absolute so it will stick in any side you want
try this..
.allDropdown {
width: 100%;
}
.allDropdown input[type=text] {
float: left;
width: 150px;
}
.allDropdown input[type=checkbox] {
position:absolute;
right:<x>px;
top :<x>px;
}
Yes, actually that code seems about right. It's not rendering the two inputs in different lines. Can you show more code please? There might be some bootstrap styling going on there. On the other hand, instead of floating them, you should always try to change the way the box is being displayed instead of taking it ouf of the frame with the float; have you tried with display:inline-block for both?. Does the table have any styling going on that might be adjusting the size of the TDs?
I'm trying to get my form, specifically the field and text elements within the form, to be center justified, similar to this:
Form example
How would I go about doing that? I've tried doing
table > tbody {
text-align: justify;
text-align: center;
background-color: #e8e8e8;
}
Which just ends up centering everything(except the fieldset, oddly) and doesnt justify anything. Any help would be appreciated.
My Code
While this is arguably a reasonable case for a table, you could eliminate all the extra markup that tables bring by using the label element set to display:block which kind of acts like a table column. I often lay out my forms in the following way. This has the added advantage that at smallscreen views, you can have the label above the input by taking away the float.
If you want the input elements on the right side (text, email, textarea, etc) to all look the same, you'll have to style them with specific widths, paddings, font-sizes, etc to override the default browser styles. Otherwise they'll all have different default widths.
label, input[type="text"] {
display: block;
float: left;
}
label {
width: 30%;
text-align: right;
margin: 8px;
clear: left;
}
input[type="text"] {
margin: 8px 0;
}
<form>
<label for="name">Name</label>
<input type="text" name="name">
<label for="phone">Phone</label>
<input type="text" name="phone" placeholder="555-5555">
<label for="email">Email</label>
<input type="text" name="email">
...
</form>
Using the following css
.prenom { width: 200px; background-image: url('/Images/Prénom.jpg') ;background-repeat: no-repeat;display: block;background-position: left top;}
I get this
I want this
where the background image would be on top and OUTSIDE of the textbox
Do I need to create a different object for my image or can i set a css property to have a padding on top for the textbox
Thanks
I would suggest to attach it to different object in your HTML. The advantage is that you probably get less problems to make a consistent experience across browsers.
Try this,
.prenom { width: 200px;
display: block;
position:relative
}
.prenom:after{
content:url('/Images/Prénom.jpg');
display:block;
position:relative;
top: -30px;
left:0;
}
-30px can be change to adjust the image
You can try
.prenom {
width: 200px;
display: block;
background:url('/Images/Prénom.jpg') 0 -10px no-repeat;
}
The value -10px can be modified to suit your requirement.
You looking for something like this?
HTML
<div>
<form>
<label for="text1">Random Text</label>
<input type="text" name="text1" />
</form>
</div>
CSS
label{
display:block;
}
http://jsfiddle.net/Xero1212/u56qF/5/
I have another small problem with centering elements. I thought about the previous questions that I've asked, but I can't seem to find the answer on this problem. I have the following example code to demonstrate my problem.
<div id="main" style="width: 960px;">
<form>
<label>Test</label>
<input type="text" value="Test" id="inputfield" />
</form>
....
</div>
Now I tried to treat it as a block-element using width and margin to position it correctly, but somehow it failed. Do I need to use an id field or is it recommanded that I put a div around every input text field (using #main input[type=text]{...})?
For this case, the best way would be assigning specific rule as per the id #inputfiled
Add this in the CSS Demo
#inputfield { display: block; margin: 0 auto; }
Relying on attribute selectors like input[type="text"] is very risky in terms of cross-browser compatibility.
Updates
In case you want to center all input elements, but not other, you can use a name selector
input,select,textarea { /* These three elements round up all the input types */
display: block;
margin: 0 auto;
}
when centering this way, you need to add width
input{
display:block;
margin:0 auto;
width:100px;
}
Use the following css and make sure you add a width.
<style type="text/css">
#inputfield {
display: block;
margin: 0 auto;
width: 200px;
}
</style>