I have this html code:
<label for="label_name">aome:</label>
<input type="text" id="nome" size="37" maxlength="50" style="vertical-align: middle;"><br />
I need to put to right of the page. Anyone can help me?
You can put it in a <div> with float:right;.
Here's an example:
<div style="float: right;">
<label for="label_name">aome:</label>
<input type="text" id="nome" size="37" maxlength="50" style="vertical-align: middle;">
<br />
</div>
That depents on the elements around it.
.classforlabel, .classforinput{
float:right;
}
However, I may recommend you to put that label and input inside a parent, and add the css above to that parent
Put your elements in a div with align right
<div align='right'>
<label for="label_name">aome:</label>
<input type="text" id="nome" size="37" maxlength="50" style="vertical-align: middle;"><br />
Related
I want to my text box start at in line. What should I do? This my code.
<div id="middle">
<div id="left">
</div >
<div id="m">
Name: <input type="text" name="y1" id="Name1"> <label style="display: none " id="Name" name="y2" >A </label><br />
Family: <input type="text" name="y1" id="Family1"> <label style="display: none " id="Family" name="y2" >B </label><br />
Phone: <input type="text" name="y1" id="Phone1"><label style="display: none " id="Phone" name="y2" >C </label><br />
<button onclick="myFunction()">save</button>
<button onclick="myFunction1()">refresh</button>
<div>
The result is:
But I want it to display like so without using space:
label{
width:50px;
display:inline-block
}
<div id="middle">
<div id="left">
</div >
<div id="m">
<label>Name:</label> <input type="text" name="y1" id="Name1"> <label style="display: none " id="Name" name="y2" >A </label><br />
<label>Family:</label> <input type="text" name="y1" id="Family1"> <label style="display: none " id="Family" name="y2" >B </label><br />
<label>Phone:</label> <input type="text" name="y1" id="Phone1"><label style="display: none " id="Phone" name="y2" >C </label><br />
<button onclick="myFunction()">save</button>
<button onclick="myFunction1()">refresh</button>
adding label solve it!
There are quite a few improvements that you could implement into your code. I would like to help solve your problem and improve your coding standards.
First of all to solve the issue in question. First, you need to wrap your label text in an element, this will allow you to apply a width to them so they align nicely, a <label> element will be best suited.
Like so:
HTML
<label>Name:</label> <input type="text" name="y1" id="Name1"> <label style="display: none " id="Name" name="y2" >A </label><br />
<label>Family:</label> <input type="text" name="y1" id="Family1"> <label style="display: none " id="Family" name="y2" >B </label><br />
<label>Phone:</label> <input type="text" name="y1" id="Phone1"><label style="display: none " id="Phone" name="y2" >C </label><br />
CSS
label {
display: inline-block; // a label is display: inline; by default so needs to be set to display: inline-block; so it takes a new width
width: 70px;
}
This will solve the issue.
To take your code further I have some recommendations.
Try and use IDs less, it is a good practice to use classes for all styling and only use IDs when necessary for JS DOM manipulation.
<label> elements can be given a for attribute that links it to an input, meaning when you click the label it will select the input, this is better user experience.
I recommend using the BEM class naming conventions to make sure you have clear and understandable CSS class names. BEM
In your <input> elements you have the same name. This is semantically ok but only when using type="radio", for all other input types they should each have a unique name.
Try and avoid putting inline style="..." unless absolutely necessary, it is much cleaner to keep CSS inside a CSS file.
If we apply all of these you will end up with code like so:
.inputs__row {
margin-bottom: 10px;
}
.inputs__label {
display: inline-block;
width: 70px;
}
<div class="inputs">
<div class="inputs__row">
<label class="inputs__label" for="name">Name:</label>
<input type="text" class="inputs__input" name="name" id="name" />
</div>
<div class="inputs__row">
<label class="inputs__label" for="family">Family:</label>
<input type="text" class="inputs__input" name="family" id="family" />
</div>
<div class="inputs__row">
<label class="inputs__label" for="phone">Phone:</label>
<input type="text" class="inputs__input" name="phone" id="phone" />
</div>
<div class="inputs__row">
<button onclick="myFunction()">save</button>
<button onclick="myFunction1()">refresh</button>
</div>
</div>
Hope this helps.
I need to align two textfields in the same row, but one on the left and the other in the page center. I'm trying this:
<div class="pure-g margin-1-0">
<div class="pure-u-1-4">
<label for="tipologia">
<fmt:message key="label.table.lavorazioni.spese.tipologia"/>
</label>
<s:textfield cssClass="pure-u-23-24 required" size="35" name="" id="tipologia" />
</div>
<div class="pure-u-1-4" style="align:center">
<label for="valore">
<fmt:message key="label.table.lavorazioni.spese.valore"/>
</label>
<s:textfield cssClass="pure-u-23-24 required" size="35" name="" id="valore" />
</div>
</div>
But I see the left one correctly but the other remains next to the first and not at the center.
Any suggestion?
To align elements inside the container use text-align css rule. Struts2 tags use themes to generate additional content in the forms. So it could break the initial design.
<div class="pure-g margin-1-0">
<div class="pure-u-1-4" style="text-align:center">
<label for="tipologia">
<fmt:message key="label.table.lavorazioni.spese.tipologia"/>
</label>
<input type="text" class="pure-u-23-24 required" size="35" name="" id="tipologia" />
</div>
<div class="pure-u-1-4" style="text-align:center">
<label for="valore">
<fmt:message key="label.table.lavorazioni.spese.valore"/>
</label>
<input type="text" class="pure-u-23-24 required" size="35" name="" id="valore" />
</div>
</div>
JSFiddle
Here is the jsfiddle.
This is suppose to give this :
But it does that instead :
Here is the HTML for that part of the page :
<input type="submit" name="BT_resetZoom" value="Reset coordinates" id="BT_resetZoom" tabindex="10" style="height:50px;width:125px;">
<div style="display: inline-block;">
<span id="LBL_Xmin" class="labelsAxis">X :</span>
<input name="TXT_graphXmin" id="TXT_graphXmin"
tabindex="3" type="text" style="width:75px;">
<span id="MainContent_LBL_Xmax"
class="labelsAxis">to</span>
<input name="TXT_graphXmax" id="TXT_graphXmax"
tabindex="4" type="text" style="width:75px;">
<br>
<span id=LBL_Ymin" class="labelsAxis">Y :</span>
<input name="TXT_graphYmin" id="TXT_graphYmin"
tabindex="5" type="text" style="width:75px;">
<span id="MainContent_LBL_YMax"
class="labelsAxis">to</span>
<input name="TXT_graphYmax" id="TXT_graphYmax"
tabindex="6" type="text" style="width:75px;">
<br>
<br>
</div>
I have tryied fiddling with heights, I tryied to surround the button with <div> tags. Nothing works.
How can I make a button align with a div?
To your input's CSS add vertical-align:top:
<input type="submit" name="ctl00$MainContent$BT_resetZoom" value="Reset coordinates" id="MainContent_BT_resetZoom" tabindex="10" style="height:50px;width:125px;vertical-align:top;">
jsFiddle example
The default vertical alignment is baseline, which is what gives your original output.
Try defining the float attribute.
For input float:left
For div float:right
You can add
display:block;
float:left;
to your MainContent_BT_resetZoom
If you do not want to use float, then use
vertical-align:top;
on your MainContent_BT_resetZoom
I have two examples of a label and a text field that I'm trying to align (You can see it in this fiddle). In the first example I have a label and a text field like this:
<label for="firstname" style="width:100px;display:inline-block;background-color:red;">Firstname: </label>
<input type="text" style="margin:0;padding:0;" id="firstname" name="firstname" value="" />
In the second example, I have a label and a three floated text fields in a div like this:
<div>
<div style="width:100px;float:left;background-color:red;">Date: </div>
<div>
<div style="float:left;">
<input type="text" style="margin:0;padding:0;" id="day" name="day" maxlength="2" size="2" value="" /> / <br />
<label for="day">Day</label>
</div>
<div style="float:left;">
<input type="text" style="margin:0;padding:0;" id="month" name="month" maxlength="2" size="2" value="" /> / <br />
<label for="month">Month</label>
</div>
<div style="float:left;">
<input type="text" style="margin:0;padding:0;" id="year" name="year" maxlength="4" size="4" value="" /><br />
<label for="year">Year</label>
</div>
</div>
</div>
As you can see above, I give each label a width of 100px, but for some reason, in the second example, there is no space between my label and the first text field. Does anybody know why this is happening and why my width of 100px does not seem to have any effect in my second example (view fiddle link above).
Thank you
You can use inline-block instead of float to make it appear as of the previous section to get the margin effect else you need to add a margin with floated element.
<div style="width:100px;display:inline-block;vertical-align:top;background-color:red;">Date: </div>
<div style="display:inline-block;">
<div style="display:inline-block;">
<input type="text" style="margin:0;padding:0;" id="day" name="day" maxlength="2" size="2" value="" /> / <br />
<label for="day">Day</label>
</div>
<div style="display:inline-block;">
<input type="text" style="margin:0;padding:0;" id="month" name="month" maxlength="2" size="2" value="" /> / <br />
<label for="month">Month</label>
</div>
<div style="display:inline-block;">
<input type="text" style="margin:0;padding:0;" id="year" name="year" maxlength="4" size="4" value="" /><br />
<label for="year">Year</label>
</div>
</div>
Demo
or add a margin.
<div style="width:100px;float:left;margin-right:4px;background-color:red;">Date: </div>
Demo
On a side note, consider using css rules instead of inline styles
The space is because the first element is a replaced inline element, which kinda has the same behaviour as inline-block and adds margin.
And for the width, remove size="2" and maxlength="2" to make it the same with as the upper input fields
Well first of all your first example with the "Firstname" label is using a "label" tag which is treated differently then a "div". That brings me to the second example of "Date" which is surrounded by "div" tags. Because of this, the default way for the browser to handle them is different.
You could easily compensate for this difference by adding a right margin to the label using the "div" to surround it.
<div style="width:100px;float:left;background-color:red; margin-right:5px;">Date: </div>
Although it is ok to use inline styles, I would suggest if you are going to be using this in a larger document to put this inside a external CSS file and use a class (or ID) for the div instead.
I have a html form that is basically vertical but i really have no idea how to make two text fields on the same line. For example the following form below i want the First and Last name on the same line rather then one below the other.
<form action="/users" method="post"><div style="margin:0;padding:0">
<div>
<label for="username">First Name</label>
<input id="user_first_name" name="user[first_name]" size="30" type="text" />
</div>
<div>
<label for="name">Last Name</label>
<input id="user_last_name" name="user[last_name]" size="30" type="text" />
</div>
<div>
<label for="email">Email</label>
<input id="user_email" name="user[email]" size="30" type="text" />
</div>
<div>
<label for="pass1">Password</label>
<input id="user_password" name="user[password]" size="30" type="password" />
</div>
<div>
<label for="pass2">Confirm Password</label>
<input id="user_password_confirmation" name="user[password_confirmation]" size="30" type="password" />
</div>
Put style="float:left" on each of your divs:
<div style="float:left;">...........
Example:
<div style="float:left;">
<label for="username">First Name</label>
<input id="user_first_name" name="user[first_name]" size="30" type="text" />
</div>
<div style="float:left;">
<label for="name">Last Name</label>
<input id="user_last_name" name="user[last_name]" size="30" type="text" />
</div>
To put an element on new line, put this div below it:
<div style="clear:both;"> </div>
Of course, you can also create classes in the CSS file:
.left{
float:left;
}
.clear{
clear:both;
}
And then your html should look like this:
<div class="left">
<label for="username">First Name</label>
<input id="user_first_name" name="user[first_name]" size="30" type="text" />
</div>
<div class="left">
<label for="name">Last Name</label>
<input id="user_last_name" name="user[last_name]" size="30" type="text" />
</div>
To put an element on new line, put this div below it:
<div class="clear"> </div>
More Info:
CSS Float Clear Tutorial
The default display style for a div is "block." This means that each new div will be under the prior one.
You can:
Override the flow style by using float as #Sarfraz suggests.
or
Change your html to use something other than divs for elements you want on the same line. I suggest that you just leave out the divs for the "last_name" field
<form action="/users" method="post"><div style="margin:0;padding:0">
<div>
<label for="username">First Name</label>
<input id="user_first_name" name="user[first_name]" size="30" type="text" />
<label for="name">Last Name</label>
<input id="user_last_name" name="user[last_name]" size="30" type="text" />
</div>
... rest is same
For the sake of bandwidth saving, we shouldn't include <div> for each of <label> and <input> pair
This solution may serve you better and may increase readability
<div class="form">
<label for="product_name">Name</label>
<input id="product_name" name="product[name]" size="30" type="text" value="4">
<label for="product_stock">Stock</label>
<input id="product_stock" name="product[stock]" size="30" type="text" value="-1">
<label for="price_amount">Amount</label>
<input id="price_amount" name="price[amount]" size="30" type="text" value="6.0">
</div>
The css for above form would be
.form > label
{
float: left;
clear: right;
}
.form > input
{
float: right;
}
I believe the output would be as following:
I would go with Larry K's solution, but you can also set the display to inline-block if you want the benefits of both block and inline elements.
You can do this in the div tag by inserting:
style="display:inline-block;"
Or in a CSS stylesheet with this method:
div { display:inline-block; }
Hope it helps, but as earlier mentioned, I would personally go for Larry K's solution ;-)
You should put the input for the last name into the same div where you have the first name.
<div>
<label for="username">First Name</label>
<input id="user_first_name" name="user[first_name]" size="30" type="text" />
<input id="user_last_name" name="user[last_name]" size="30" type="text" />
</div>
Then, in your CSS give your #user_first_name and #user_last_name height and float them both to the left. For example:
#user_first_name{
max-width:100px; /*max-width for responsiveness*/
float:left;
}
#user_lastname_name{
max-width:100px;
float:left;
}
You could use the {display: inline-flex;}
this would produce this:
inline-flex