Make HTML input stretch to fill space in container

Asked 8/3, 2013 at 9:23 Answered 10/7, 2020 at 22:39

There is a <div id="MyDiv"> element which is resized depending on page width. It contains <input> and <a> elements.

How can I make the <a> align by the right side of the <div> and the <input> stretch to fit the free space between <div>'s left side and <a>'s right side?

Also the <a> should not jump to the next line and there are also defined min-width and max-width on the container. Here is the code:

<div id="MyDiv" style="background:#AAAAAA; width:100%; min-width:300px; max-width:600px;">
    <input type="text" id="MyInput"/>
    <a id="MyButton" href="#">Button</a>
</div>

and demo.

Hauteur answered 8/3, 2013 at 9:23 Comment(1)

o yea i forgot to tell you to, try not to use inline css. – Bowstring 8/3, 2013 at 10:18

This can be done easily with CSS3 although it will not work in IE9 or below. IE10 is the first Internet Explorer version to support the standard. The other browsers already support the relevant Flexible Box properties.

div {
  background: #AAAAAA;
  width: 100%;
  min-width: 300px;
  max-width: 600px;
  display: -webkit-flex;
}

input {
  -webkit-flex: 1;
}

a {
  margin: 0 10px;
}

<div>
  <input type="text" />
  <a href="#">Button</a>
</div>

However answered 8/3, 2013 at 10:20 Comment(2)

The input won't stretch on webkit engines such as Safari or mobile devices. You'll need to put it inside a block element (such as a div) or make it display:block itself to get the expected result. – Pearsall 10/2, 2014 at 10:57

Here is a link to flex documentation for the current take on this (i.e. use display: flex) w3schools.com/cssref/css3_pr_flex.asp – Aeon 27/3, 2019 at 10:58

Best option is to use jQuery to calculate the width. Try this:

$( window ).bind("resize", function(){
    fitInput();
});
//resize on window change

$(document).ready(function(){
   fitInput(); 
});
//resize after loading

function fitInput(){
    var divW = $("#MyDiv").width();
    var buttonW = $("#MyButton").width();
    $("#MyInput").width(divW - buttonW - 10);
}
//resize function

Fiddle: http://jsfiddle.net/Burnacid/aGHqV/4/

Bowstring answered 8/3, 2013 at 9:37 Comment(4)

Thank You, this is exactly what I needed. Also I'd like to know if it is even possible with html and css only? – Hauteur 8/3, 2013 at 9:42

Not that i know of. you will always be slightly off. i don't know if CSS 3 added anything for this though. – Bowstring 8/3, 2013 at 9:48

If its exactly what you needed, you should mark his answer. I found this answer helpful also. – Ectopia 17/9, 2013 at 2:17

This may have made sense in 2013, but please don't anyone do this in this or any future decade. jQuery is not necessary for styling something to fit a window. – Baumbaugh 1/6, 2022 at 22:36

You can use absolute positioning:

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
            <div id="MyDiv" style="position:relative;background:#AAAAAA; min-width:300px; max-width:600px;padding:0px 2px">
                <input type="text" id="MyInput" style="padding:0px;margin:0px;border:0px;width:100%;"/>
                <a id="MyButton" href="#" style="position:absolute;right:0px;top:0;padding:0px 2px; background:#aaa;">Button</a>
            </div>
        <body>
</html>

http://jsfiddle.net/uPZcW/

Piezochemistry answered 8/3, 2013 at 10:13 Comment(2)

Throw away the inline css plz. it is a nice sollution to the point where the input is filled 100%. Because you layer the button ontop of the input text drops off – Bowstring 8/3, 2013 at 10:17

"text drops off" - in any case, if the text is more than the length of the field. – Piezochemistry 8/3, 2013 at 10:22

-1

try this html :

<div id="MyDiv" style="background:#AAAAAA; width:100%; min-width:300px; max-width:600px;">

       <input type="text" id="MyInput" style="width:74%;float:left"/>

       <a id="MyButton" href="#"  style="width:24%;float:right">Button</a>

  </div>

Altazimuth answered 8/3, 2013 at 9:43 Comment(0)

-1

I was searching for solutions to this very problem, or at least I think it's the same issue. I solved it too. Let me explain.

Depending on the browser, I had the textbox get too long or too short, but also noticed it sometimes did fit as intended. I used @meadia constructs to scale the UI depending on client viewport size and noticed it fit perfectly when the scaling was 100%, only. This led me to a different solution, or rather, pointed me to a different problem.

I am not sure this is the case for all browsers, but I could solve it by adding a few simple settings in the start of my CSS file (the CSS reset part), adding the following:

/***************************************************/
/* Hack to make input[type='text'] fit width of
   parent element */

input {font-size: 1em;}  /* omitting [type=... deliberately */
textarea {font-size: 1em;}

/***************************************************/
/* Media scaling */

*      {margin: 0; border: 0; padding: 0;}
html   {min-width: 300px;}
body   {font-size:  80%;}  /* Default */
@media (min-width:  400px) {body {font-size:  80%;}}
@media (min-width:  600px) {body {font-size:  90%;}}
@media (min-width:  900px) {body {font-size:  95%;}}
@media (min-width: 1300px) {body {font-size: 100%;}}
@media (min-width: 1800px) {body {font-size: 110%;}}
@media (min-width: 2400px) {body {font-size: 120%;}}

Apparently using a CSS reset that specifies font size before scaling fixes the problem. I think this actually makes sense too. The thing easily forgotten is that elements are not always inheriting correctly from the body, in this case text type inputs (and also textareas).

Make sure you are setting the width: 100%; style for the textbox in the TD or DIV, and that you are also setting box-sizing: border-box;. Should make it work.

Hope this helps.

Toothy answered 10/7, 2020 at 22:39 Comment(0)

-4

Just add this in your <head> tag

input{width:92%;}

Animus answered 8/3, 2013 at 9:32 Comment(2)

If you say in head tag, then you should wrap input styling into <style>. Otherwise it will do nothing. Input has to be maximum 90% width as link will not stay inline if more. – Rorqual 8/3, 2013 at 9:37

This is how I did this before. It works while div is maybe at least 500px wide. It should work for page width starting from 300px or even less. – Hauteur 8/3, 2013 at 9:39

Recommended topics

Hot tags