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"/>
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;
}
Hi i want to make a customized input text box like this image:
I search many articles but found nothing to do this so please help me
This is not a new answer. But some modification to answer of #alvaro-menéndez to make it more compact and generic.
div {
position:relative;
display:inline-block;
margin:50px;
}
input[type="text"] {
width:300px;
padding:10px;
outline:0;
border:0;
background-color: #eee;
}
.preinput {
position:absolute;
z-index:-1;
display:block;
bottom:-1px;
left:-1px;
border-bottom:1px solid #999;
border-right:1px solid #999;
border-left:1px solid #999;
width:100%;
height:20px;
}
<div>
<span class="preinput"></span>
<input type="text" placeholder="Search" />
</div>
You could use this little and simple jquery to add an element after your input:
$(".input").after("<span></span>");
and then you just have to style it like in this FIDDLE
Edited: updated fiddle to put the element UNDER the input and move it slightly bottom and left so it will be visible even if input has a background-color
You can just use a css background image on your input. Use a placeholder attribute for you "search".
HTML
<input type="search" placeholder="Search" />
CSS
input[type="search"]{
background:url(your_image_path) left bottom no-repeat;
}
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.
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.
Strange issue here which I can't see the problem with! I'm setting the width of the entire element using the class sale_container. But it's width is not changing at all!
See JSFiddle Demo
CSS:
/*Sale styles*/
.add_sales input {
background:none;
border:none;
color:#FFF;
}
.sales_toolbar input {
width:30px;
}
.sale_container {
width:500px;
border:2px solid #FFF;
}
.sale_image {
height:200px;
width:200px;
background-size:cover;
border-radius:10px;
}
.sale_image_container {
border:solid #000 1px;
float:left;
border-radius:10px;
background-color:#353535;
}
.sale_image_container p {
margin:10px;
}
.sales_toolbar {
float:right;
}
HTML:
<form class="add_sales" name="add_sales" action="php/process_sales.php" method="post">
<div class="sale_container">
<div class="sale_image_container">
<div style="background-image:url(data/images/20140121/0/image8.jpg)" class="sale_image"></div>
<p>KR</p>
</div>
<div class="sales_toolbar">
<input type="text" readonly value="KRR" id="50_selected" /> <!-- Selected -->
</div>
</div>
</form>
It seems to be working on the JSFiddle, but when I preview it in Chrome, it looks like this:
It's possible that additional styles are being included from an alternate CSS source. Have you tried using Inspect Element to view the div, and see if it has any unexpected styles being applied? Chrome natively has the feature built-in if you right-click any element.
Glad to help.
Set position to absolute of sale_container to change width.
.sale_container{
width: 300px;
position: absolute;
border: 2px solid #E97676;
}
Use firebug (http://getfirebug.com/) to inspect html element and css attributes.