here is my html and css as follows. i just can not understand why city & state is showing differently. in case of city & state label comes & input type come side by side but i want they should stay on form one after one like other input.
here is my html
<div style="background-color: rgb(241, 242, 242); height: auto; width: auto;" id="Register">
<fieldset>
<legend>información sobre el transporte</legend>
<br>
<span id="lblBillShip" name="lblBillShip">Marque si misma que la dirección de facturación</span>
<span style="margin-left:330px; margin-top:-21px; display:block;" class="noEnterSubmit"><input type="checkbox" name="chkBillShipSame" id="chkBillShipSame"></span><br><br>
<span id="lblAdd1" name="lblAdd1">Dirección 1</span>
<input type="text" class="noEnterSubmit" id="txtAdd1" name="txtAdd1"><br><br>
<span id="lblAdd2" name="lblAdd2">Dirección 2</span>
<input type="text" class="noEnterSubmit" id="txtAdd2" name="txtAdd2"><br><br>
<span id="lblCity" name="lblCity">City</span>
<input type="text" class="noEnterSubmit" id="txtCity" name="txtCity"><br><br>
<span id="lblState" name="lblState">State</span>
<input type="text" class="noEnterSubmit" id="txtState" name="txtState"><br><br>
<br><br>
<span id="lblPostCode" name="lblPostCode">PostCode</span>
<input type="text" class="noEnterSubmit" id="txtPostCode" name="txtPostCode"><br><br><br>
</fieldset>
</div>
and CSS
#main1 { width:560px; margin: 0px auto; padding:40px 20px 20px; background-color:#FFFFFF; top:50px;}
legend { font-size:18px; margin:0px; padding:10px 0px; color:#2F9934; font-weight:bold;}
fieldset { border-style: none;
border-color: inherit;
border-width: medium;
width:322px;
margin-left:30px;
}
#overlay {
position: fixed;
height: 100%;
width: 100%;
z-index: 1000000;
color:Blue;
background: url('/images/busy.gif');
background-repeat:no-repeat;
background-position:600px 390px;
text-align:center;
}
#Register label { display:block; margin:15px 0 5px;}
#Register input[type=text], input[type=password] { width:300px; }
#Register input[type=checkbox] {padding-top:5px;}
#Register select {width:175px; height:19px; padding-top:5px;}
here is jsfiddle link
please guide me what i need to change as a result label & text boxes should stay on form one after one like other input. thanks
It is a matter of how much you are able to display in one line, and as the label "City" and State" are shorter than the other labels these will fit in one line and not break.
To force a line-break after your labels you could add something like this to your stylesheet:
#Register span {
display:block;
}
If you add CSS to the span elements float:left. This resolves the issue
#Register span{
float: left;
width: 100%;
}
Updated your fiddle
#Register span {
display:block;
}
Will solve the issue.
You should be using label instead of span though.
JSFiddle Demo
Related
I'm trying to set a width limit on a input label and at the same time align a styled check to the right.
The below image shows how it currently looks and how I'd like it to look:
This is the HTML I'm using:
<a href='#' class='tooltip' title='tooltip text.'><img src='images/tooltip.png'></a> <b>This is my Text Label:</b></div>
<label class="switch"><input type="checkbox" name='check' id='check' title='checkbox' value="1"><div class="slider"></div></label>
<br/><input type="text" id="textinput" name="textinput" size="40" maxlength="40" autocomplete="off" placeholder="enter text here" value="" tabindex='1' disabled/></div><br/>
I've created a fiddle showing it here:
https://jsfiddle.net/bywgqnrg/1/
Can anyone advise the best way to do this ?
Thanks
Here's a possible solution, I added a fieldwrap to wrap the whole content and sets a fixed width and floated the switch to right check the code below:
.switch { position:relative; display:inline-block; width:53px; height:19px }
.switch input { display:none }
.slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background-color:#ccc; -webkit-transition:.4s; transition:.4s }
.slider:before { position:absolute; content:""; height:11px; width:19px; left:4px; bottom:4px; background-color:#fff; -webkit-transition:.4s; transition:.4s }
input:checked+.slider { background-color:#008c00 } input:focus+.slider { box-shadow:0 0 1px #2196F3 }
input:checked+.slider:before { -webkit-transform:translateX(26px); -ms-transform:translateX(26px); transform:translateX(26px) }
input, select, textarea {border: 1px solid #A0A0A0; background: #FFF; padding: 3px 4px; color: #222; margin: 2px 5px 2px 0px; }
input:focus, select:focus, textarea:focus { outline: none;}
.fieldwrap { width : 320px; overflow : hidden; }
.fieldwrap .switch {float : right;}
<div class="fieldwrap">
<a href='#' class='tooltip' title='tooltip text.'><img src='images/tooltip.png'></a> <b>This is my Text Label:</b>
<label class="switch"><input type="checkbox" name='check' id='check' title='checkbox' value="1"><div class="slider"></div></label>
<div><input type="text" id="textinput" name="textinput" size="40" maxlength="40" autocomplete="off" placeholder="enter text here" value="" tabindex='1' disabled/></div>
</div>
I want my firstLabel to be just right side of the textfield on the same line.
//css
input[type="text"]{
display:block;
margin-bottom:10px;
width: 50px;
text-align:center;
float:center;
}
label {
float: right;
text-align:right;
color: white;
font:12;
}
//html
<label for="first">First Value</label>
<input type="text" value="93" id="firstTF"/><br/>
http://jsfiddle.net/x3gb6gcw/2/
html
<input type="text" value="93" id="firstTF"/>
<label for="first">First Value</label>
css
input[type="text"]{
display:block;
margin-bottom:10px;
width: 50px;
text-align:center;
display:inline-block;
}
label {
text-align:left;
color: #000;
font:12;
display:inline-block;
}
Try this-
CSS Code-
input[type="text"]{
display:inline;
margin-bottom:10px;
width: 50px;
text-align:center;
float:left;
}
label {
display: inline;
text-align:right;
color: white;
font:12;
}
Fiddle - http://jsfiddle.net/Ashish_developer/gjamenoy/
In fiddle, I have changed the color of label since fiddle's background is white, so giving white color to label will not show it. Just to show it in fiddle I have given color black to it.
Form controls are inline elements so if you just put your label tag after the textbox input control then they'll line up on their own(unless you set the width of the parent element too narrow for them both to fit naturally.
<input type="text" id="myText"/><label for="myText">My Label</label>
No need for CSS to position them this way, they float left by default.
I want to set that in put textbox's location on initial condition header div. But that textbox is getting hidden under initial condition div.
Are there any alternative to z-index. I have attached my css also.
HTML:
<div id="initialCondHdr" class="initialCondHdr">Demo Experiment</div>
<div id="archiveTable_filter" class="dataTables_filter">
<label>
<input type="text" placeholder="Search" style="width:220px;height:30px;" />
</label>
</div>
CSS:
#initialCondHdr {
color:#043751;
font-family:calibri;
font-size:19px;
line-height:42px;
position:relative;
text-indent:15px;
}
.dataTables_filter {
float: left;
left: 119px;
margin: 12px 0 22px 12px;
overflow: hidden;
position: absolute;
text-align: right;
top: -20px;
z-index: 5;
}
It's not entirely clear to me what you are trying to do but I think you are trying to lay the input on top of the first div.
That being the case, you will have to change the HTML structure and adjust the positioning of your input as follows:
JSfiddle Demo
Revised HTML
<div id="initialCondHdr" class="initialCondHdr">Demo Experiment
<div id="archiveTable_filter" class="dataTables_filter">
<label>
<input type="text" placeholder="Search" style="width:220px;height:30px;"/>
</label>
</div>
</div>
Revised CSS
#initialCondHdr{
color:#043751;
font-family:calibri;
font-size:19px;
line-height:42px;
position:relative;
text-indent:15px;
color:red; /* visual reference only */
}
.dataTables_filter{
overflow: hidden;
position: absolute;
opacity:0.5; /* visual reference only */
top:0;
text-align: right;
z-index: 1;
}
I have been trying for several hours to format my form neatly without the use of a table.
I've floated the labels left and the inputs right but they still don't line up neatly with each other. Ideally it would look like so:
Label(Root Diameter) | Input(text) | label(mm)
I know I can do it using a table but I am looking for a more elegant and professional way of doing it. If someone could just point me in the right direction and perhaps give me an example I would appreciate it greatly.
Here is my code.
html:
<head>
<script src="jquery-1.11.0.min.js"></script>
<script src="criticalSpeedCalc.js"></script>
<link rel="stylesheet" href="calcstyle.css">
</head>
<body>
<div id="calcWrapper">
<form name="calculator" id="calculator">
<label class="type">Unit of Measurement:</label>
<br>
<select name="unit" class="input">
<option value="120904000">Metric (cm)</option>
<option value="4760000">Imperial (inches)</option>
</select>
<br>
<label class="type">Root Diameter:</label>
<br>
<input type="text" name="root" class="input" autocomplete="off">
<label for="unit">mm</label>
<br>
<label class="type">Width between bearings:</label>
<br>
<input type="text" name="bearings" class="input" autocomplete="off">
<label for="unit">mm</label>
<br>
<label class="type">End Fixity:</label>
<br>
<select name="fixity" class="input">
<option value=".36">1</option>
<option value="1.0">2</option>
<option value="1.47">3</option>
<option value="2.23">4</option>
</select>
<br>
<label class="type">Max Speed:</label>
<br>
<input type="text" name="speed" class="input" autocomplete="off">
<label for="rpm">rpm</label>
<br>
<br> Reset
Calculate
Exit
</form>
</div>
</body>
#calcWrapper {
background-image: url("Design1.png");
width: 265px;
height: 365px;
float: left;
/*border-width: 2px;
border-style: solid;*/
}
css:
#calculator {
width: 186px;
height: 230px;
margin-left: 38px;
margin-top: 115px;
padding-left: 5px;
font: bold 11px Helvetica, Arial, sans-serif;
text-align: center;
-moz-box-sizing:content;
/*border-width: 2px;
border-style: solid;*/
}
.input {
margin: 1px;
max-width: 80px;
max-height: 10px;
font: bold 10px Helvetica, Arial, sans-serif;
display: block;
vertical-align:middle;
margin-bottom: 10px;
float: right;
}
select.input {
max-height: 18px;
}
label.type {
width: 80px;
display: block;
vertical-align:middle;
float:left;
clear:left;
margin: 2px;
}
And here is a fiddle link
You can have "normal" html tags and table-like display using the CSS Table Model
Since this is not a tabular data not using table is the right choice however you can use div elements to create a table :)
.table {
display:table;
}
.table-row {
display: table-row;
}
.table-cell {
display:table-cell;
vertical-align:middle;
}
Here is the fiddle: http://jsfiddle.net/3Ej7Q/3/
You can just float your .input class to the left and make it a bit narrower (max-width:70px).
See it here: http://jsbin.com/pepixare/1/edit
I use div's to solve this problem.
my width is in % you can use px if you prefer.
col- represents the width of the div in %.(col-40 == width:40%;)
you can easily implement this with other attributes like inputs,ul,ol,a,img ect.
<div class="table">
<div class="tr">
<div class="th col-40 fl pd-l-2">monday</div>
<div class="td col-2 fl">:</div>
<div class="td col-58 fr txt-alnC">09:30 - 18:00</div>
</div>
<div class="tr">
<div class="th col-40 fl">tuesday</div>
<div class="td col-2 fl">:</div>
<div class="td col-58 fr txt-alnC">09:30 - 18:00</div>
</div>
</div>
.table {
width: 100%;
float: left;
cursor: pointer;
}
.table .tr {
float:left;
width:100%;
height:40px;
}
.table .tr .th,
.table .tr .td {
height:47%;
padding:5% 0;
}
I managed to find the solution to my problem which involved setting all the elements inside the form to display:inline-block, and setting the form's text-aligntment to justify.
For a better explanation than I am able to give give this a squiz. (The answer is in the text align section)
And here is a link to an updated fiddle
Hope I was able to help anyone in the same predicament.
html code
<div id="signup">
<p>
<label>Frist Name</label>
<input type="text"/>
<p>
<p>
<label>Last Name</label>
<input type="text"/>
<p>
<p>
<label>Email</label>
<input type="text"/>
<p>
<p>
<label>Mobile Number</label>
<input type="text"/>
<p>
<p>
<label>Password</label>
<input type="password"/>
<p>
<p>
<label>Re Password</label>
<input type="password"/>
<p>
</div>
and this is css
css
#signup{
width: 860px;
background-color: white;
border: 1px black solid;
padding: 0px;
margin: 0px;
}
#signup p label{
padding: 0.4em;
color: #0986e3;
}
#signup p input{
width: 300px;
padding: 0.4em;
}
if u run this code u will see the input files right and left , and that is not good , i can correct this problems using div or li , but i want the best practice for doing that , i want the input filds to be exaclty below each other
,this is the code in jsfiddle
http://jsfiddle.net/Wiliam_Kinaan/EfBD7/
Make the labels display as block elements. That way, you can set it's width. But you still need them to be inline. You need to apply either float:left, or display:inline-block so they act inline as well as block.
#signup p label{
display:inline-block;
width:100px;
}
/*or*/
#signup p label{
float:left;
width:100px;
}
If you want to support older browsers, then use the float:left. If you target new browsers, then display:inline-block is better. If you use the float approach, add this to the CSS to clear the float:
#signup p{
overflow:hidden;
zoom:1;
}
Here, I did it how I would do it. I stripped out the p and some css to make text right side. but you can of course add display:inline-block;width:300px; to the label and swap the label and input locations in html
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#signup{
width: 500px;
background-color: #ececec;
border: 1px black solid;
padding: 0px;
margin: 0px;
}
#signup label{
font:12px arial;
color: #0986e3;
}
#signup input{
margin:10px;
width: 300px;
padding 0.4em;
}
#signup input[type=button]{
margin:10px;
width: 80px;
padding 0.4em;
}
</style>
</head>
<body>
<div id="signup">
<input type="text"/>
<label>Frist Name</label>
<input type="text"/>
<label>Last Name</label>
<input type="text"/>
<label>Email</label>
<input type="text"/>
<label>Mobile Number</label>
<input type="password"/>
<label>Password</label>
<input type="password"/>
<label>Re Password</label>
<input type="button" value="click me!" />
</div>
</body>
</html>
Give the label a definite width, like:
#signup p label{
padding: 0.4em;
color: #0986e3;
width: 100px;
display: inline-block;
}
Can you use table , might help your cause , see the example , sorry for not aligning the markup well.