CODEWITHSUNDEEP
htmlcss
RS92
RS92

Reputation: 485

How to set full auto width for input tag

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;
}

Upvotes: 0

Views: 1324

Answers (3)

nelek
nelek

Reputation: 4322

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

Upvotes: 2

dream3r
dream3r

Reputation: 11

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/

Upvotes: 0

Adam Buchanan Smith
Adam Buchanan Smith

Reputation: 9457

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)

Upvotes: 1

Related Questions