showing label and input in same line using css

Question

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

Check the API documentation. I did this for an app of mine, but at the moment I'm on my phone and can't really help you. Its all in the documentation though. — Brendan Lesniak
– Brendan Lesniak, Commented Jun 25, 2012 at 19:32
Found it. Use <div data-role=” fieldcontain”> around the elements you want inline. — Brendan Lesniak
– Brendan Lesniak, Commented Jun 25, 2012 at 19:37
jquerymobile.com/test/docs/forms/docs-forms.html look under field containers — Brendan Lesniak
– Brendan Lesniak, Commented Jun 25, 2012 at 19:37
The problem with fieldcontain is it puts the border around the inputbox and also moves inputbox to next line on small screen. I want it to stay on the same screen. In addition I am trying to set border around the div and not just around inputbox so it gives a feeling that the whole container is an inputbox — Kiran
– Kiran, Commented Jun 25, 2012 at 19:43
Yeah I just read that under 480px it breaks to a newline. Have you tried using a grid view to align the elements? — Brendan Lesniak
– Brendan Lesniak, Commented Jun 25, 2012 at 19:45

Braj · Accepted Answer · 2015-04-05 05:29:11Z

11

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"

edited Apr 5, 2015 at 5:29

Braj

46.9k5 gold badges63 silver badges77 bronze badges

answered Jun 25, 2012 at 22:42

Marcio Mazzucato

9,36511 gold badges71 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kiran Over a year ago

Hey, on a related note, can you pls take a look at stackoverflow.com/questions/11249888/… ?

Marcio Mazzucato Over a year ago

@Kiran, Sorry for my delay, i saw your comment just now. I will take a look in your question.

cwiggo Over a year ago

Absolutely perfect for what I needed! Reputation++

Collectives™ on Stack Overflow

showing label and input in same line using css

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related