Menu
I have a html mark up with label and inputbox. However, for business reasons, I need to show the label and inputbox on sameline and hide the placeholdertext. The end result should look like the placeholder text is staying there. Example is here: http://jsfiddle.net/XhwJU/
Here is the markup for reference:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test Page</title>
</head>
<body>
<h1> test </h1>
<div class="inputdata">
<label for="AccessCode"> Access Code: </label>
<div style="display:inline"> <input type="text" name="accessCode" id="AccessCode" value="" placeholder="" /> </div>
<div class="clear"></div>
</div>
</body>
</html>
Here is the styles used:
.inputdata {
border: thin solid gray;
padding: 0.1em;
margin: 0.1em;
vertical-align: middle;
}
div .inputdata label {
width:auto;
float:left;
color: gray;
line-height: 2;
padding-top: .4em;
}
input[type='text']{
overflow:hidden;
line-height: 2;
box-shadow: none;
border:none;
vertical-align: middle;
background:none;
width:100%;
}
.clear {
clear: both;
height: 1px;
overflow: hidden;
font-size:0pt;
margin-top: -1px;
}
As you can see in the jsfiddle, label and input show in separate lines. I want the label and input to show up on same line irrespective of the screenwidth. Label shall have a fixed size that allows it to fit contents in one line and the input shall occupy the rest of the screen width.
appreciate any help
915
I've done some changes in your CSS and i think i got what you want, here is an example and below HTML and CSS.
CSS
div.inputdata{
border:thin solid gray;
padding:0.1em;
margin:0.1em;
}
div.inputdata label{
float:left;
margin-right:10px;
padding:5px 0;
color:gray;
}
div.inputdata span{
display: block;
overflow: hidden;
}
div.inputdata input{
width:100%;
padding-top:8px;
border:none;
background:none;
}
.clear {
clear: both;
}
HTML
<h1>test</h1>
<div class="inputdata">
<label for="AccessCode"> Access Code: </label>
<span><input type="text" name="accessCode" id="AccessCode" value="" placeholder="" /></span>
<div class="clear"></div>
</div>
To understand better the reason of overflow:hidden in span you can read this: The magic of "overflow:hidden"
96
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
