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>
Sorry for my bad English.
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/
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:
See it working on codepen
<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;
}
<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
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.
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>
