CODEWITHSUNDEEP
htmlcss
Szabolcs Antal
Szabolcs Antal

Reputation: 957

Text input and button input in the same line

I would like to create a div that contains a text input and a button input on the same line.

The width of the div will be set by me. These two inputs have to fill the div in the way that the button input's width is to be set by it's value, and the rest of the space to be filled by the text input.

I want something like:

<div style="width: 300px; background-color: orange">
    <input type="text" />
    <input type="button" value="Save" />
</div>

enter image description here

Sorry for my bad English.

Upvotes: 10

Views: 26965

Answers (6)

nouri
nouri

Reputation: 1

This work me fine:

<div class="input-group">
  <input type="text" class="form-control width: 100%;" id="IWEDIT3" name="IWEDIT3">
  <div class="input-group-append" style="margin-right: 1px">
    <button class="btn-primary" id="BTNLOCCODE">...</button>
  </div>
</div>

Upvotes: -1

Damilare David Oyediran
Damilare David Oyediran

Reputation: 229

Another way is to use display flex on their parent.

<div class="parent" style="width: 300px; background-color: orange">
    <input type="text" />
    <input type="button" value="Save" />
</div>

CSS

.parent{
  display: flex;
  width: 100%;
  height: 50px;
}

input[type="text"] {
  height: 50px;
  width: 90%;
  border: none;
  outline: none;
  padding: 10px;
  font-size: 14px;
}

input[type="button"] {
  width: 10%;
  height: 50px;
  border: none;
  outline: none;
  background-color: orange;
}

Note, you can play around with the font-size and height to have the desired height and font-size that you want.

Upvotes: 0

Abhitalks
Abhitalks

Reputation: 28387

Demo: http://jsfiddle.net/abhitalks/Y64ny/

You need to wrap your text input in another div. Apply display:table to the container div and display:table-cell and width:100% to the wrapper div.

HTML:

<div style="width: 300px; background-color: orange">
    <div class="t"> <!-- This is the wrapper div around the text input -->
        <input type="text" />
    </div>
    <input type="button" value="Save" />
</div>

CSS:

div { display: table; }
div.t {
    display: table-cell;
    width: 100%;
}
div.t > input {
    width: 100%;
}

Update:

As the Op (@ChocapicSz) states in the comment below, adding box-sizing:border-box will fix the paddings.

Updated fiddle: http://jsfiddle.net/abhitalks/Y64ny/1/

Upvotes: 4

Karthikeyan
Karthikeyan

Reputation: 323

<style>

.f-lft {
    float:left;
    border:2px solid orange;
 }

</style>

<body>
<div style="width: 300px;">
  <div> 
    <input class="f-lft"type="text" style="width:80%"/>
    <input class="f-lft" type="button" value="Save"/> 
 </div>
</div>
</body>

I have attached a fiddle for you http://jsfiddle.net/GLAee/

I have done a single one. Remaining you better practice.

Edited : add width of text field in percent

Upvotes: 1

user115014
user115014

Reputation: 922

Using position absolute and slightly restructuring the css might work better for you.

Also using <button> instead of <input type="button"> makes life a little easier to style.

I've created an example at codepen for you to see.

HTML:

<div class="container" style="width: 300px">
  <input type="text" class="text_input" />
  <button value="Save" class="btn">CLICK</button>
</div>

<div class="container" style="width: 500px">
  <input type="text" class="text_input" />
  <button value="Save" class="btn">CLICK</button>
</div>

<div class="container" style="width: 200px">
  <input type="text" class="text_input" />
  <button value="Save" class="btn">CLICK</button>
</div>

CSS:

.container {
  position: relative;
  border: 3px solid orange;
  height: 50px;
  overflow: hidden;
  margin-bottom: 10px;
}

.text_input {
  height: 44px;
  width: 60%;
  padding: 0;
  line-height: 30px;
  font-size: 20px;
  padding: 0;
  margin: 3px;
  margin-left: 20px;
  border: none;
}
.text_input:focus {
  outline: none;
}

.btn {
  position: absolute; 
  height: 50px;
  line-height: 50px;
  right: 0;
  top: 0;
  margin: 0;
  padding: 0;
  background: orange;
  color: white;
  border: none;
  width: 30%;
  font-weight: bold;
}

.btn:hover {
  color: black;
  cursor: pointer;
}

Gives you this:

enter image description here

See it working on codepen

Upvotes: 2

Vikram Jakkampudi
Vikram Jakkampudi

Reputation: 512

http://jsfiddle.net/8FC2t/

    <div>
    <input type="text"  class='save'/>
    <input type="button" value="Save" />
</div>
<br>
<div>
    <input type="text" class='dns' />
    <input type="button" value="Do not Save" />
</div>



div{
    width:200px;
    background-color:orange;

}
.dns{
    width:calc(100% - 105px)
}
.save{
    width:calc(100% - 65px)
}
div>input[type='button']{
  float:right;
}

Upvotes: 1

Related Questions