How to set full auto width for input tag

Question

I have 3 elements inline, first is span with image and defined with using padding left and right, I don't want to resize her width, just only like now width padding left and right.

My problem is on different resolution to fit this 3 inline element to be fit to container full 100% width.

How to set resizable width for INPUT on different resolution.

On small resolution I may to write new smaller width for INPUT tag.

Is it possible to set resizable input tag.

I want three elements to be 100% width in container of 90%, without resizing span elements, only INPUT.

I tried for this set width:78% of input tag, but thats it for large resolution, how to set for all resolution?

Is it posible to do using only HTML and CSS??

https://jsfiddle.net/4654eaue/4/

HTML

<div class="container">
    <span><img src="http://science.psu.edu/alert/icons/video-iconSmall.png"></span><input type="text" name="fname" value="John Doe" disabled class="profileusername bordertop"><span><img src="http://science.psu.edu/alert/icons/video-iconSmall.png"></span>
    </div>

CSS

.container{
    width:90%;
}
input{
    width:78%;
    vertical-align:top;
    display:inline-block;
    height:23px;
}
span img{
    vertical-align:middle;
    padding-right:10px;
    padding-left:10px;
}
span{
    vertical-align:top;
    display:inline-block;
    background-color:grey;
}

About that images... did they must be one bellow other or on both side of input? — nelek, Jul 27 '15 at 20:02
ok.... is it acceptable for You to put those spans and input in 3 separated divs? — nelek, Jul 27 '15 at 20:04
Take a look at this: http://stackoverflow.com/a/18963730/4059974 — Johan Karlsson, Jul 27 '15 at 20:13
look this jsfiddle (spans are removed and input is placed in div) : https://jsfiddle.net/4654eaue/6/ — nelek, Jul 27 '15 at 20:16
[How to make one column to take all the remaining width?](http://stackoverflow.com/questions/31502449/how-to-make-one-column-to-take-all-the-remaining-width) — Stickers, Jul 27 '15 at 20:19
I modified, now input tag is resizable, but when resizing my right image pops down :( https://jsfiddle.net/4654eaue/8/ — RS92, Jul 27 '15 at 20:23
@RS92 Take a look at my answer, if that is what you need, it is simple :) — Adam Buchanan Smith, Jul 27 '15 at 20:29

nelek · Answer 1 · 2015-07-27T21:33:31.867

2

Well, try this :

There is JSFiddle example

I remove those spans but add one div and place input inside him. I had to change input height to 29px ... using display:table; for container and for img and div table-cell .... if that's ok for You.

html :

<div class="container">
    <img src="http://science.psu.edu/alert/icons/video-iconSmall.png">
<div><input type="text" name="fname" value="John Doe" disabled class="profileusername bordertop"></div>
<img src="http://science.psu.edu/alert/icons/video-iconSmall.png">
    </div>

css :

.container{
    width:90%;
    display:table;
}
.container div {display:table-cell; width:100%; vertical-align:top; }
input{
    width:100%;
    box-sizing:border-box;
    height:29px;
    vertical-align:top;

}
.container img{
    vertical-align:middle;
    padding-right:10px;
    padding-left:10px;
    background-color:gray;
    display:table-cell;
}

Update :

There is example where input fixed height is avoided. Much better solution in comparing with above one. Simple, input height will fit to img height and rest of total width of container.

New fiddle example

edited Jul 27 '15 at 21:33

answered Jul 27 '15 at 20:23

nelek

4,074
3
22
35

thats nice, but how to set to be inline to top? – RS92 Jul 27 '15 at 20:28
then `input` goes about 1 or 2px down... I try that but can't find solution. – nelek Jul 27 '15 at 20:29
@RS92 I update my answer with fiddle example. now using `vertical-align:top;` but then i had to put `margin-top:-2px` for `input` – nelek Jul 27 '15 at 20:37
1

It's almost there, wrap each image into div would be it [demo](https://jsfiddle.net/gcva29um/1/) – Stickers Jul 27 '15 at 20:52
@Pangloss great... my first solution, which I abandon... why? i don't know. maybe to avoid to much elements. – nelek Jul 27 '15 at 20:56
Just add `vertical-algin:top` to the div for your first solution [demo](https://jsfiddle.net/gcva29um/2/) – Stickers Jul 27 '15 at 21:00

Adam Buchanan Smith · Accepted Answer · 2015-07-27T20:32:00.110

1

Is this what you are going for? https://jsfiddle.net/4654eaue/10/

I added a background color to the container so that you can see it takes up all of it https://jsfiddle.net/4654eaue/11/

I used the css calc()

like this:

input{
    width: calc(100% - 125px);
    vertical-align:top;
    display:inline-block;
    height:23px;
}

So the input is now 100% of the 90% (minus the width of the span)

edited Jul 27 '15 at 20:32

answered Jul 27 '15 at 20:25

Adam Buchanan Smith

9,422
5
19
39

hohoho thank you so much, i never before used calc, this is great, thank youuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu mateeeeeeeeeeeeeeeeeeeeeeee – RS92 Jul 27 '15 at 20:43
@RS92 Yeah its a pretty awesome thing! – Adam Buchanan Smith Jul 27 '15 at 20:48

dream3r · Answer 3 · 2015-07-27T20:39:49.733

Try to use display:table, display:table-row, display:table-cell

HTML:

<div class="container">
    <div class="wrapper">
        <span><img src="http://science.psu.edu/alert/icons/video-iconSmall.png"></span>
        <input type="text" name="fname" value="John Doe" disabled class="profileusername bordertop">
        <span><img src="http://science.psu.edu/alert/icons/video-iconSmall.png"></span>
    </div>
</div>

CSS:

.container{
    width:90%;
    display: table;
}
.wrapper {
    display: table-row;
    width: 100%;
}
input{
    vertical-align:top;
    display:table-cell;
    height:23px;
    width: 100%;
}
span img{
    vertical-align:middle;
    padding-right:10px;
    padding-left:10px;
}
span{
    vertical-align:top;
    display:table-cell;
    background-color:grey;
    width: 49px;
}

Working example: https://jsfiddle.net/4654eaue/4/

How to set full auto width for input tag

3 Answers3