This is my code where I am trying to put 3 Buttons in parallel.
<!DOCTYPE html>
<html>
<head>
<div class="aParent">
<div id="left_side">
<form accept-charset="UTF-8" action="/new" data-remote="true" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /></div>
<label for="q">Make A new folder:</label><br>
<input id="q" name="q" type="text" /><br>
<input name="commit" type="submit" value="Submit" />
</form></div>
<div id="centre">
<input id="btn" type="button" value="Save" action="update" alignment="center" />
</div>
<div id="right_side">
<form accept-charset="UTF-8" action="/target" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /></div>
<input name="commit" type="submit" value="Customize Weight" />
</form></div>
</div>
<style type="text/css">
#left_side {
float: left;
}
#center_s {
margin:50px 50px;
width: 65px;
}
#right_side {
float: right;
}
</style>
Now if I change margin values save button position is not changing . Any guesses for changes to be made to put 3 buttons in parallel.
Add this:
#centre{ float:left;}
If you're looking to centre this div, you will need to add an appropriate margin-left value, so long as your parent container is of fixed width.
add display:inline-block to all the three container div and remove the float property.
#left_side {
display: inline-block;
}
#center_s {
margin: 50px 50px;
width: 65px;
display: inline-block;
}
#right_side {
background: Green;
display: inline-block;
}
Js Fiddle Example
You have some complex html structure to do this simple thing as you can achieve without using the css and just you need to put simple markup like this
<div class="aParent">
<form accept-charset="UTF-8" action="/new" data-remote="true" method="get">
<div id="label">
<label for="q">Make A new folder:</label>
</div>
<div id="input-control">
<input id="q" name="q" type="text" />
</div>
<div id="button-control">
<input name="commit" type="submit" value="Submit" />
<input id="btn" type="button" value="Save" action="update" alignment="center" />
<input name="commit" type="submit" value="Customize Weight" />
</div>
</form>
</div>
Js Fiddle - Simple design
Can you just put all 3 divs {float: left} and then add a small margin to them to separate them?
You have two options for this:
1.You can float the elements you want to position. Add a line in the css code, for example
#center_s {
margin: 50px 50px;
width: 65px;
float: left;
}
This will change the element model from box to inline.
Using float will stack the elements next to one another.
You can read this great article about float property - http://css-tricks.com/all-about-floats/
You can change the display property to inline-block - add a new css property - display: inline block; to all three elements.
This will change the div from block model to inline model!
Another great article about display property - http://www.impressivewebs.com/difference-block-inline-css/
Hope this answered your question.
Related
I'm trying to set up my form so that the text input is on one side, and two buttons take up the rest of the side, one on top and the other on the bottom.
I've tried to use br, but this has not done anything. I'm also doing this on Angular 7.0 if it matters.
HTML
<form class="form" (ngSubmit)="onSubmit()">
<input type="text" name="title" [(ngModel)]="title" placeholder="Add Todo">
<input type="submit" value="Submit" class="btn">
<input type="reset" value="Reset" class="btn">
</form>
CSS
.form {
display: flex;
}
.form input[type='text'] {
flex: 10;
padding: 5px;
height: 40px;
}
.form input[type='submit'] {
flex: 2;
height: 20px;
display: block;
}
.form input[type='reset'] {
flex: 2;
height: 20px;
display: block;
}
Currently, all three are side by side, like this. I want the two buttons to be on top of each other.
If you don't want to change your markup, you can use display: grid.
form {
display: grid;
grid-template-areas: 'form topbutton' 'form bottombutton'
}
input[type="text"] {
grid-area: form;
}
input[type="submit"] {
grid-area: topbutton;
}
input[type="reset"] {
grid-area: bottombutton;
}
<form class="form" (ngSubmit)="onSubmit()">
<input type="text" name="title" [(ngModel)]="title" placeholder="Add Todo">
<input type="submit" value="Submit" class="btn">
<input type="reset" value="Reset" class="btn">
</form>
A more solid solution may use flexbox:
div.row {
display: flex;
width: 100%;
/* you may add height if you need it */
/* height: 125px; */
}
div.row > * {
flex: 1 1 80%;
}
div.row > .buttons {
flex: 1 1 20%;
display: flex;
flex-direction: column;
}
div.row > .buttons > * {
flex: 1 1 auto;
}
<form class="form" (ngSubmit)="onSubmit()">
<div class="row">
<input type="text" name="title" [(ngModel)]="title" placeholder="Add Todo">
<div class="buttons">
<input type="submit" value="Submit" class="btn">
<input type="reset" value="Reset" class="btn">
</div>
</div>
</form>
Add display: block to your input elements to have them occupy a new line.
You can also divide the elements into two columns by wrapping the desired elements in <div> classes (in this case of .left and .right), and floating them both to the left.
This can be seen in the following:
.left, .right {
width: 50%;
float: left;
}
.right input {
display: block;
}
<form class="form" (ngSubmit)="onSubmit()">
<div class="left">
<input type="text" name="title" [(ngModel)]="title" placeholder="Add Todo">
</div>
<div class="right">
<input type="submit" value="Submit" class="btn">
<input type="reset" value="Reset" class="btn">
</div>
</form>
I've never used Angular, but I usually use two br afterward with html and it works fine, alternatively you could use css to manually change the location of each element with style and margin (top,left,etc.). ie: like so:
br example:
<form class="form" (ngSubmit)="onSubmit()">
<input type="text" name="title" [(ngModel)]="title" placeholder="Add Todo"><br><br>
<input type="submit" value="Submit" class="btn"><br><br>
<input type="reset" value="Reset" class="btn"><br><br>
</form>
css example:
<form class="form" (ngSubmit)="onSubmit()">
<input style=margin-top:90px type="text" name="title" [(ngModel)]="title" placeholder="Add Todo"><br><br>
<input style=margin-top:100px type="submit" value="Submit" class="btn"><br><br>
<input style=margin-top:110px type="reset" value="Reset" class="btn"><br><br>
</form>
I am very new to HTML and hesitate before posting this question, because it very simple looking problem, but I am not getting good answer after Googling.
So following is my simple form code, I wanted to keep both the form input elements in different line. Problem is I literally need to use hardcoded 250px width to div, so that element will code in different lines.
How do I improve my code so it will be portable across different browsers and screens?
Secondly, distance between all the lines in very less, they are actually collapsing on each other. How to give more vertical space to elements?
<form id="frm">
<div style="width: 250px;">
<label>Name </label>
<input type="text" required="required" />
<label>Email</label>
<input type="text" placeholder="pranit#gmail.com" />
<input type="submit" value="submit" />
</div>
</form>
If you want each label/input pair to appear on a line of its own, you should make that happen in markup using elements that actually cause line breaks, such as wrapping each of the pairs in a div or p element, or using <br> between them, or making each of them a row of a table. It is very unreliable to set just a width on a block and expect browsers to automatically wrap lines. Consider e.g. what happens in your example if the user sets font size to 60px (maybe due to eyesight problems).
To set vertical spacing, use CSS. There are many ways to do that, and the techniques partly depend on the markup chosen. Here is one example:
<style>
td { padding-bottom: 0.5em; }
</style>
<form id="frm">
<table>
<tr>
<td>
<label for="name">Name</label>
<td>
<input id="name" name="name" type="text" required="required">
<tr>
<td>
<label for="email">Email</label>
<td>
<input id="email" name="email" type="email"
placeholder="someone#example.com">
<tr>
<td colspan="2">
<input type="submit" value="submit">
</table>
</form>
Float the label and inputs and specify 50% width with border-box box sizing method. You also need a wrapper element for each label-input pair which is used to contain the floats.
form > div {
width: 250px;
margin: 1em 0;
overflow: hidden;
}
label,
input {
display: block;
float: left;
width: 50%;
box-sizing: border-box;
}
input[type="submit"] {
width: 100%;
}
<form id="frm">
<div>
<label>Name</label>
<input type="text" required="required" />
</div>
<div>
<label>Email</label>
<input type="text" placeholder="pranit#gmail.com" />
</div>
<div>
<input type="submit" value="submit" />
</div>
</form>
1) you can define the diplay style for the label to block, this will bring label onto new line,
http://jsfiddle.net/naeemshaikh27/rvg4jdbo/
label{
display:block;
}
<form id="frm">
<div>
<label>Name </label>
<input type="text" required="required" />
<label>Email</label>
<input type="text" placeholder="pranit#gmail.com" />
<input type="submit" value="submit" />
</div>
</form>
2) Or if you want to keep the label with the input element, then just add a div element between them http://jsfiddle.net/naeemshaikh27/rvg4jdbo/1/
If each element (labels and inputs) has to have own line, set them display: block;
#frm label, #frm input {display: block}
or
#frm div > * {display: block;}
If you need to have the label and input on one line, you can try to work with floats and clear.
label, input {float: left;}
label {width: 80px; clear: left;} /* set width to align inputs and clear to 'set' a new line */
First use block elements for vertical placement of elements.
label{
display:block;
}
Use width in percentages not pixels if you can. It will keep it better, specially if they are in same line(inline).
<p style="width:50%"> </p> <p style="width:50%"> </p>
Can use media queries too for different resolutions.
label tags and input tags are inline by default. You can set them both to display: block to make them stack. You can also add some margin to space them out:
label, input{
display: block;
margin: 10px 0;
}
EXAMPLE 1
OR
If you want the label and input inline but each one stacked, you can simply wrap them with a block element like a div:
<form id="frm">
<div>
<div>
<label>Name </label>
<input type="text" required="required" />
</div>
<div>
<label>Email</label>
<input type="text" placeholder="pranit#gmail.com" />
</div>
<input type="submit" value="submit" />
</div>
</form>
EXAMPLE 2
I'm taking my first steps in jQuery Mobile and I'm getting a bit disappointed with the lack of customization it provides...
As an example, I have a simple form and I'd like to customize the layout of the form components.
This is my code:
<form id="loginForm" action="#" method="post">
<input id="rememberMe" name="rememberMe" type="checkbox"/>
<label for="rememberMe">Remember me in this computer</label>
<a id="info" href="#" data-role="button" data-icon="info" data-iconpos="notext">Info</a>
<input id="submit" type="submit" value="log in" data-inline="true"/>
</form>
See the fiddle.
Concretely I'd like:
The rememberMe checkbox to be as wide as the text inside, and the info button to be inline with the checkbox.
The "group" containing the previous checkbox and button to be aligned to the right.
The submit button to be to the right as well.
Please provide an example of how such things can be achieved...
EDIT: I'd like something like this:
Customization you require will not come from jQM but from custom css.
Usually this could be easily done with jQuery Mobile grids but they are not that flexible. So you need a custom solution.
A div around every element is needed because jQM recreates every element with new style and unless we have a parent div everything will go to hell.
Working example: http://jsfiddle.net/Gajotres/8NB22/
HTML :
<form id="loginForm" action="..." method="post">
<div class="row">
<div class="inline-mid">
<a id="info" href="..." data-role="button" data-icon="info" data-iconpos="notext" class="middle-button">Info</a>
</div>
<div class="inline-left">
<input id="rememberMe" name="rememberMe" type="checkbox"/>
<label for="rememberMe">Remember me in this computer</label>
</div>
</div>
<div class="row">
<div class="inline-left">
<input id="submit" type="submit" value="log in" data-inline="true"/>
</div>
</div>
</form>
CSS :
.row {
min-width: 400px;
width: 400px;
}
.inline-left, .inline-mid , .row {
position: relative;
float: right;
}
.inline-mid {
margin-left: 10px;
padding-top: 5px;
}
This can be achieved using ui-grid classes.
Working Demo
Markup
<form id="loginForm" action="..." method="post">
<div class=ui-grid-a>
<div class=ui-block-a>
<input id="rememberMe" name="rememberMe" type="checkbox"/>
<label for="rememberMe" data-inline="true">Remember me in this computer</label>
</div>
<div class=ui-block-b>
<a id="info" href="..." data-role="button" data-icon="info" data-iconpos="notext">Info</a>
</div>
</div>
<div class=ui-grid-solo>
<input id="submit" type="submit" value="log in" data-inline="true"/>
</div>
</form>
Override CSS
.ui-block-a { width: 95% !important; text-align: right !important; }
.ui-block-b { width: 5% !important; padding-top: 5px !important; }
.ui-grid-solo { text-align: right !important; }
Layout should never be primarily the responsibility of Javascript code, as such you shouldn't blame jQuery Mobile for this.
Customization for different screen sizes should be done with CSS Media Queries instead, click the link for more examples than you'll ever need.
I'm trying to do something that must be relatively easy, but I've spent hours mucking around with this and I'm no getting to the answer.
I need to layout some input fields and their layers on a grid (or like a table I guess) with
lable input label input
label input label input
Because the input fields are different widths (and would look pretty crappy if they were all the same width) the best I've managed to get is
label input label input
label logerinput label input
How do I line up the second set of labels and there inputs?
I've made two classes for the labels
#dpi_form label {
display: inline-block;
width: 150px;
margin-left: 20px;
}
#dpi_form .right-label {
display: inline-block;
width: 150px;
margin-left: 220px;
}
and the associated controls are
<label for="req_retailer_index_fld">Select the retailer*:</label><select id="req_retailer_index_fld" name="req_retailer_index_fld" class="required selectbox ui-widget-content"><option>item 1</option><option>item 2</option></select>
<label for="req_region_index_fld" class="right-label">Select the region*:</label><select id="req_region_index_fld" name="req_region_index_fld" class="required selectbox ui-widget-content"><option>item 1</option><option>item 2</option></select><br />
<label for="req_customer_type_index_fld">Select the customer type*:</label><select id="req_customer_type_index_fld" name="req_customer_type_index_fld" class="required selectbox ui-widget-content"><option>item 1</option><option>item 2</option></select>
<label for="req_meter_state_index_fldi" class="right-label">Select the meter state*:</label><select id="req_meter_state_index_fld" name="req_meter_state_index_fld" class="required selectbox ui-widget-content"><option>item 1</option><option>item 2</option></select><br />
within a div.
I've tried absolute positioning, relative positioning, padding, all manner of right and left margins but still can't get the result I'm after.
I can find heaps of stuff or vertical alignment of controls.. but nothing showing me how to do this one.
Any clues please?
Peter.
Despite my comment about using tables on your question, this is how I would do it.
CSS:
label,
input {
display: block;
}
label {
padding: 4px 0 0;
}
.labels1 {
float: left;
width: 80px;
}
.labels2 {
float: left;
width: 80px;
}
.inputs1 {
float: left;
width: 200px;
}
.inputs2 {
float: left;
width: 200px;
}
HTML:
<div class="labels1">
<label for="input1">Input 1: </label>
<label for="input2">Input 2: </label>
<label for="input3">Input 2: </label>
</div>
<div class="inputs1">
<input type="text" value="" name="input1" id="input1" />
<input type="text" value="" name="input2" id="input2" />
<input type="text" value="" name="input3" id="input3" />
</div>
<div class="labels2">
<label for="input4">Input 4: </label>
<label for="input5">Input 5: </label>
<label for="input6">Input 6: </label>
</div>
<div class="inputs2">
<input type="text" value="" name="input4" id="input4" />
<input type="text" value="" name="input5" id="input5" />
<input type="text" value="" name="input6" id="input6" />
</div>
Then you can change the labels and inputs classes to the width you want.
Although I still think tables are easier because then you don't have to worry about setting widths yourself; you also don't have to worry about vertical alignment with tables.
use following styles.
for parent container
display: table;
for row container
display: table-row;
for cell container
display: table-cell;
example
<div style="display: table;">
<div style="display: table-row;">
<div style="display: table-cell;">
lable
</div>
<div style="display: table-cell;">
input
</div>
<div style="display: table-cell;">
label input
</div>
</div>
<div>
<div style="display: table-cell;">
lable
</div>
<div style="display: table-cell;">
input
</div>
<div style="display: table-cell;">
label input
</div>
</div>
</div>
Use a table, that's what they are for.
I would suggest using a table or for a pure CSS solution maybe the 960 grid system 960.gs
I would use floats. Here's a jsfiddle showing how I would do it:
http://jsfiddle.net/pSsap/
I'll reproduce the code below.
With html like this:
<form class="grid">
<section>
<label for="wind">wind</label>
<span class="field"><input id="wind" name="wind" type="input" class="regular"></span>
<label for="earth">earth</label>
<span class="field"><input id="earth" name="earth" type="input" class="regular"></span>
</section>
<section>
<label for="fire">fire</label>
<span class="field"><input id="fire" name="fire" type="input" class="long"></span>
<label for="air">air</label>
<span class="field"><input id="air" name="air" type="input" class="regular"></span>
</section>
</form>
And css like this:
form.grid section {
clear: both;
}
form.grid section label, form.grid section span.field {
display: block;
float: left;
}
form.grid section label {
width: 50px;
}
form.grid section span.field {
width: 150px;
}
input.regular {
width: 100px;
}
input.long {
width: 140px;
}
Solutions:
Use a list: <ol> or <ul>
Set a width for that list: (in the example, 960px is the width of the <ul>)
Float the lists: <li> and set a width to limit its floating point: (in the example, 320px is the set width)
If you want to have a consistent alignment with the <label> and <select> pairs, set a width to the <label> (make sure you set it as a block-level element first: in the example, the <label> was set to 160px)
Make sure to clear (clear: left) any elements following this list (<ul>) used.
The Markup:
<ul>
<li>
<label for="req_retailer_index_fld">Select the retailer*:</label>
<select id="req_retailer_index_fld" name="req_retailer_index_fld" class="required selectbox ui-widget-content">
<option>item 1</option><option>item 2</option>
</select>
</li>
<li>
<label for="req_region_index_fld" class="right-label">Select the region*:</label>
<select id="req_region_index_fld" name="req_region_index_fld" class="required selectbox ui-widget-content">
<option>item 1</option><option>item 2</option>
</select>
</li>
<li>
<label for="req_customer_type_index_fld">Select the customer type*:</label>
<select id="req_customer_type_index_fld" name="req_customer_type_index_fld" class="required selectbox ui-widget-content">
<option>item 1</option><option>item 2</option>
</select>
</li>
<li>
<label for="req_meter_state_index_fldi" class="right-label">Select the meter state*:</label>
<select id="req_meter_state_index_fld" name="req_meter_state_index_fld" class="required selectbox ui-widget-content">
<option>item 1</option><option>item 2</option>
</select>
</li>
</ul>
The CSS
ul {
background: #EEE;
width: 960px;
}
li {
background: #FFC0CB;
float: left;
list-style: none;
width: 320px;
}
label {
display: inline-block;
width: 160px;
}
The result is that, the list will just drop when the <ul> can't contain it any longer (since you have set a width in it). On the other hand, the width of the <li>s will consistently make them align to each other, while being floated.
I have the following:
<div style="float: left; padding-right: 1%;">
<label class="editor-label" for="BrowserTitle">Browser Title</label>
<input class="editor-field" id="BrowserTitle" name="Question.BrowserTitle" size="30" type="text" value="Test title" />
</div>
I want to make the input field appear below the label. Right now it just follows the label on the same line. Is there a way that I can do this with CSS?
Set
display: block;
on either the label or the input.
Note: As pointed out in a comment, you'd also need to remove the float style from your containing div if you want the divs to appear below each other.
Why not remove the float on the DIV and make the LABEL a block?
<div style=" padding-right: 1%;">
<label class="editor-label" style='display:block;' for="BrowserTitle">Browser Title</label>
<input class="editor-field" id="BrowserTitle" name="Question.BrowserTitle" size="30" type="text" value="Test title" />
</div>
Demo : http://jsfiddle.net/h7mnJ/
You can put the label and the input in their own divs or set each to display: block in CSS.
put label inside a div:
<div style="float: left; padding-right: 1%;">
<div>
<label class="editor-label" for="BrowserTitle">Browser Title</label>
<div>
<input class="editor-field" id="BrowserTitle" name="Question.BrowserTitle" size="30" type="text" value="Test title" />
See the results at: http://jsfiddle.net/uUEn8/
Also you can set display:block on either label or input.
You can put display: block on the label:
.editor-label {
display: block;
}
Example: http://jsfiddle.net/ambiguous/b5UrP/
Or you could float both the label and input to the left and put clear: left on the input:
.editor-label {
float: left;
}
.editor-field {
clear: left;
float: left;
}
Example: http://jsfiddle.net/ambiguous/hxhCx/
As all of the CSS solutions have been exhausted, here's a HTML solution with the <br /> element:
<div style="float: left; padding-right: 1%;">
<label class="editor-label" for="BrowserTitle">Browser Title</label>
<br />
<input class="editor-field" id="BrowserTitle" name="Question.BrowserTitle" size="30" type="text" value="Test title" />
</div>