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
Related
I have this html which i want to target with css. The problem is that i can't find the right css selector.
The problem is that . entry-content doesn't work. Neither does.event-manager-form. The form itself is a Wordpress event manager form and want to style in with, amongst others,, border-radius
<div class="entry-content">
<form action="/post-an-event/" method="post" id="submit-event-form" class="event-manager-form" enctype="multipart/form-data">
<fieldset>
<label>Your account</label>
<div class="field
account-sign-in">
You are currently signed in as <strong>Bla bla</strong>. <a c class="button" href="...">Sign out</a>.
</div>
</fieldset>
<!-- Event
Information Fields -->
<h2 class="section-title">Event Details</h2>
<fieldset class="fieldset-event_title">
<label for="event_title">Event Title<span class="require-field">*.
</span></label>
<div class="field required-field">
<input type="text" class="input-text event_title" name="event_title" id="event_title" placeholder="Event title" attribute="" value="" maxlength="" required />
</div>
</fieldset>
<fieldset class="fieldset- event_online">
<label for="event_online">Online Event<span class="require-
field">*</span></label>
<div class="field
required-field">
<label><input
type="radio" name="event_online" id="event_online"
attribute="" value="yes" /> Yes</label>
<label><input
type="radio" name="event_online" id="event_online"
attribute="" value="no" /> No</label>
I have an form that I want to have a user fill in. I want to lay it out that the name fields are next to each other and all other fields are on their own separate line.
I have used the below code, have tried putting paragraphs and "brs" , but still no luck...
The code below:
<div style="float:left;">
<label for="username"><b>First Name*</b><span class="required"></span> </label>
<input id="user_first_name" name="FirstName" size="30" type="text" placeholder="First" />
</div>
<div style="float:right;">
<label for="name"><b>Last Name*</b><span class="required"></span></label>
<input id="user_last_name" name="LastName" size="30" type="text" placeholder="Last"/>
</div>
<!--<label><b>Full Name </b><span class="required">*</span></label><input type="text" name="FirstName" class="field-divided" placeholder="First" style="float:left" />;<input type="text" name="Surname" class="field-divided" placeholder="Last" style="float:right"/> <p></p>-->
<label><b>Email </b><span class="required">*</span></label><input type="email" name="Email" class="field-long" placeholder="Email" value="<?php echo $_POST['Turnover']; ?>" />
<label><b>Phone </b><span class="required">*</span></label><input type="number" name="Phone" class="field-divided" placeholder="Number" />
<label style="font-size:10px">only numbers, no special characters</label>
Returns the below image:
So, for some reason the Email Address Label is very much out of place (it should be above the input that is reading 1500 - the way Phone is above number
I'm sure that it's a silly little thing, but I just can't place it
I have tried various combinations of "< p>" and "< br >",but to no avail.
You need to add "clear both" ( <div style="clear:both"></div> ) to prevent the content below mixed up with your 2 floating divs.
Example code:
<div style="float:left;">
<!-- something here -->
</div>
<div style="float:right;">
<!-- something here -->
</div>
<div style="clear:both"></div>
<!-- more goes here -->
I would use something like Bootstrap, if I were you. However, here's a custom solution:
input {
width: 100%;
display: block;
}
div.inline {
width: 100%;
display: table;
}
div.inline div {
display: table-cell;
}
div.inline div:nth-child(n+2) {
padding-left: 10px;
}
<div class="inline">
<div>
<label>First Name:</label>
<input>
</div>
<div>
<label>Last Name:</label>
<input>
</div>
</div>
<div>
<label>Email:</label>
<input>
</div>
<div>
<label>Phone:</label>
<input>
</div>
wrap your bottom 3 inputs and labels in a div and add 100% width to each input and label
<div style="width:100%;clear:both;display:block;">
<label style="width:100%;display:block;"></label
<input style="width:100%;display:block;">
</div>
.flexi{
display:flex;
flex-flow:row;
}
<div class="flexi">
<div>
<label for="username"><b>First Name*</b><span class="required"></span> </label>
<input id="user_first_name" name="FirstName" size="30" type="text" placeholder="First" />
</div>
<div>
<label for="name"><b>Last Name*</b><span class="required"></span></label>
<input id="user_last_name" name="LastName" size="30" type="text" placeholder="Last"/>
</div>
</div>
<div>
<!--<label><b>Full Name </b><span class="required">*</span></label><input type="text" name="FirstName" class="field-divided" placeholder="First" style="float:left" />;<input type="text" name="Surname" class="field-divided" placeholder="Last" style="float:right"/> <p></p>-->
<div>
<label><b>Email </b><span class="required">*</span></label><input type="email" name="Email" class="field-long" placeholder="Email" value="<?php echo $_POST['Turnover']; ?>" />
</div>
<div>
<label><b>Phone </b><span class="required">*</span></label><input type="number" name="Phone" class="field-divided" placeholder="Number" />
<label style="font-size:10px">only numbers, no special characters</label>
</div>
</div>
Read about css and html on internet .
Floating causes parent to remove height. thats why yo email pops in mill
https://jsfiddle.net/d69Lxmst/3/
I have a checkbox button and a Paragraph side-by-side.
It's inline-block and everything is nice... Look:
When I turn my view into responsive, it just drops down a line. Like this:
How do I overcome this issue elegently in CSS without starting build divs around elements and bootstrap the whole deal here? Thanks!
re code; those are 2 columns and both button and paragraph reside in he left column.
EDITED FOR CODE ADDITION:
<div class="row no-pad">
<div class="col-xs-6 left-hand-input">
<!--FORM BEGIN-->
<form class="form-control-static" action="leadGen.php" method="post">
<p>PERSONAL DETAILS</p>
<hr>
<label for="firstName">FIRST NAME:</label><br>
<input name="firstName" id="firstName" type="text"><br>
<label for="email">EMAIL:</label><br>
<input name="email" id="email" type="email">
<p>SHIPMENT ADDRESS</p>
<hr>
<label for="address">ADDRESS:</label><br>
<input name="address" id="address" type="text"><br>
<label for="country">COUNTRY:</label><br>
<input name="country" id="country" type="text"><br>
<label for="zip">ZIP CODE:</label><br>
<input name="zip" id="zip" type="text"><br>
<input type="submit" id="submit" value="SEND">
<p style="display: inline-block; vertical-align: -10px;"> *Required fields</p><br>
<input checked type="checkbox" id="mailingList"/>
<p style="display: inline-block; font-size: 75%;">
Receive exclusive membership deals and offers.</p>
</form>
</div>
</div>
You need to use labels
<label><input type="checkbox" value=" id="mailingList">Receive exclusive membership deals and offers.</label>
Here is the jsfiddle demo: https://jsfiddle.net/o4qgu4gv/2/
You should also consider using col-sm-6 instead of col-xs-6 because it may look nice on an iPhone 4 screen
if it is for the checkbox or any input type tag in particular then a more suitable choice would be to use a label tag instead of a paragraph.
You could use label with its for attribute and it should work fine.
<div id="wrapper">
<input type="checkbox" id="btn"> check
<label for="btn">
this should not shift
</label>
</div>
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