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.
Related
I'm trying to align a text area and a button on the same line. I've successfully managed to do so, the code is in the fiddle below (though for some reason the fiddle won't align them).
Problem: Whenever I insert a value in the button, the button will go something like 30px downwards, still on the same line but just lower than the text area. This will only happen when a value is inserted within the button.
All the code is in the fiddle: https://jsfiddle.net/13qy0acp
Code:
HTML
<div id="messagebox">
<p id="headings"><textarea name="msg" style="height:40px;text-align:center" id="message" placeholder="Insert message"></textarea></p>
<p id="button"><input type="button" value="Send" onclick="submitChat()" id="innerbutton"></p>
</div>
CSS
#headings {
text-align:center;
display:inline-block;
width:70% !important;
margin-top:20px;
}
#message {
width:100%;
}
#button {
text-align:center;
display:inline-block;
width:8%;
margin-top:-30px !important;
border:solid black;
height:50px;
}
#innerbutton {
width:100%;
height:20px;
text-decoration:none;
}
If you want to horizontally align two elements, use the float property and set a width that adds to no more than 100% of the width of the parent element.
example:
textarea {
width:90%;
float: left;
}
button {
width:10%;
float: left;
}
I wanted to create a textbox for a unit measurement. E.g "1 Kg".
I know can wrap a text just behind the textbox, but I wanted the unit to be inside the textbox itself. While the number can be changed, the unit behind it should stay just at the end of the textbox itself. Is there a way to do it? Possibly using CSS?
Thanks!
Wrap your input in a div, add your unit as a sub element to that div and position it above the textbox.
JSBIN: http://jsbin.com/mayurexoyi/1/edit?html,css,output
HTML
<div class="input_wrapper">
<input type="text" value="20" />
<div class="unit">KG</div>
</div>
CSS
input {
font-size:14px;
padding:10px 25px 10px 10px;
border:1px solid #CCC;
}
.input_wrapper {
float:left;
position:relative;
}
.input_wrapper .unit {
position:absolute;
right:10px;
top: 14px;
color:#999;
}
I think THis will help you out .
HTML :
<div>
<input type="text" />
<label>kg</label>
</div>
CSS :
div{
border:1px solid gray;
width: 180px;
}
label{
font-family:arial;
font-size:.8em;
}
input{
border:none;
}
input:focus{
outline:none;
}
check out the fiddle
Try this:
<span contenteditable name="kgData" style='border: thin solid #000;'> Enter Value </span>
<span contenteditable=false> Kg</span>
After submit, get kgData, then you can access that data on other page/ save it in db. See, if that helps.
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
i have a form element- text input and a submit button- Im trying to get them to render inline with each, the submit button renders slightly above the input button- i tried wrapping the two in a div and making the maximum height the same still didnt work. Here's my code/css- the button has a height of 29px- they are both in line
<div class="submit_form">
<input type="text" name="unique_code" class="unique_code"/>
<input type="image" name="submit_btn" src="/imgs/submitbg.png"/>
</div>
.submit_form{
height:30px;
}
.unique_code{
background-color:#000;
border: 1px solid #e31e25;
width:250px;
height:25px;
color:#fff;
}
Change your CSS to this:
.submit_form *
{
height: 30px;
display: inline;
vertical-align: middle;
}
It should work now. Have tested it in IE and Chrome.
Simply add vertical-align to the textbox:
.unique_code{
vertical-align: top;
background-color:#000;
border: 1px solid #e31e25;
width:250px;
height:25px;
color:#fff;
}
Try this.
// css
.img_fix {
vertical-align: text-top
}
// html
<input type="image" name="submit_btn" class='img_fix' src="http://www.google.com/images/nav_logo29.png"/>
I have a input box for users to enter search terms in. I have a input button beside the search box. for some reason the button is rendering below the search box.
I want the button to be right beside the input box.
My html:
<div id="searchbox">
<form method="post" action="/search/test">
<div class="searchinput">
<input type="text" id="searchbox" value="" /></div>
<div class="searchbutton">
<input type="submit" id="searchboxbutton" value="Go" /></div>
</form>
</div>
CSS:
#header #searchbox
{
float:left;
width:400px;
padding:5px 0px 0px 0px;
}
#header #searchbox #searchinput
{
display:inline;
float:left;
}
#header #searchbox #searchbox
{
display:inline;
float:left;
}
#header #searchbox #searchbutton
{
display:inline;
float:left;
}
Simplify, simplify, simplify.
HTML
<form method="post" action="/search/test">
<input type="text" id="searchbox" value="" />
<input type="submit" id="searchboxbutton" value="Go" />
</form>
CSS
input {display: inline}
Your <input type="text" id="searchbox" value="" /> is matching this style (width: 400px) as well:
#header #searchbox
{
float:left;
width:400px;
padding:5px 0px 0px 0px;
}
IDs must be unique - change it or the containing element and write your styles accordingly.
http://validator.w3.org/docs/errors.html
141: ID X already defined
An "id" is a unique identifier. Each time this attribute is used in a
document it must have a different
value. If you are using this attribute
as a hook for style sheets it may be
more appropriate to use classes (which
group elements) than id (which are
used to identify exactly one element).
Just add this CSS to your CSS style sheet:
.searchinput{
display:inline-block
}
It will add your content in one row.
You have an id based selector in CSS (#searchinput) but you are using classes in markup (<div class="searchinput">). Change either of the ones and it should work.
Third, you don't need the display:inline. Just float: left will do. Also, floated elements are required to have a width. So set a width.
Probably because your #searchbox width is 400px and your input tag and button tag is more than 400 px.
Try making the #searchbox width to 600px and see what happens.
Change your css from
#header #searchbox
{
float:left;
width:400px;
padding:5px 0px 0px 0px;
}
#header #searchbox #searchinput
{
display:inline;
float:left;
}
#header #searchbox #searchbox
{
display:inline;
float:left;
}
#header #searchbox #searchbutton
{
display:inline;
float:left;
}
to
#header
{
float:left;
width:400px;
padding:5px 0px 0px 0px;
}
#searchinput, #searchbox, #searchbutton, #searchboxbutton
{
display:inline;
float:left;
}