How to expand input field to 100% of the parent

Question

Sorry gals & guys for a potentially dumb question but I have been looking for various ways to solve this issue and it still does not work like I want it to.

This is one of these issues where an input field stays very short (like ~150px) even though the box it is is much wider (like ~1300 px on a wide monitor).

I originally had the html & CSS shown in: http://jsfiddle.net/jjoensuu/qSz5x/5/

In an attempt to solve this issue I found the solutions in: How to make text input box to occupy all the remaining width within parent block?

I created what I think is similar to "wdm"'s answer in above thread, but I am missing something because the result is still a narrow input field. My creation is here: http://jsfiddle.net/jjoensuu/rJ45P/8/

I also tried the solution from "Marty Wallace" in same thread but could not get it to work.

So as a reference to my code on the jsfiddle site, the "topsearch" box gets the width of ~1300 pixels but the "field-topsearch" input field stays at around 156px.

With some of my attempted solutions the "Go" button wraps to the next line below. Any help on how to solve this would be appreciated.

is this fiddle ok?? http://jsfiddle.net/surendraVsingh/rJ45P/11/ — SVS, Jul 30 '12 at 06:33
Thanks SVS, yes it is a lot better than what I managed to do. Thank you! The only issue was that the "Go" button still ended up on the next line but by setting the "display" as "inline" on the "Go" button and the width on input field to 80%, that was resolved. — user100487, Jul 30 '12 at 06:53

score 1 · Answer 1 · answered Sep 27 '13 at 13:55

I took a slightly different approach. It appears to me you wanted the input text field to expand but the label and input button to remain the same size either side of the input field. This may well be useful for generating a form containing multiple rows without resorting to table layouts. Also the previous suggestion does not really work very well regarding keeping the elements on one line. This technique would allow the containing 'box' to be resized to whatever you liked at will.

I did have to tweak your html a little, but I feel the label should be next to the element it is related to anyway. I have also left out the form html for clarity since that is not part of the layout:

<div class="input">
    <label for="field-topsearch">Search</label>
    <div class="value">
        <div>
            <input id="field-topsearch" maxlength="256" type="text" name="search_str" value=""/>
        </div>
        <input type="submit" class="button-start-search submit " value="Go!"/>
    </div>
</div>

And the css:

.value {
    position: relative;
}
.value>div {
    margin-left: 60px;
    margin-right: 40px;
}
label {
    position: absolute;
    top: 0px;
    left: 0px;
}
input.submit {
    position: absolute;
    top: 0px;
    right: 0px;
}
input[type="text"] {
    width: 100%;
}

The fiddle is available here

score 0 · Accepted Answer · answered Jul 30 '12 at 06:59

Here is the working fiddel: http://jsfiddle.net/surendraVsingh/rJ45P/18/

CSS

.topsearch
    {
    height: 40px;
    line-height: 35px;
    padding-right: 10px;
    width:100%;
    display:table;
    }

.topsearch label
    {
    color: #c98116;
    text-transform: uppercase;
    font-weight: normal;
    font-size: 0.9em;
    margin: 0 5px;
    }

.topsearch label, .topsearch form
    {
    display: inline;
    } 

.topsearchfield
    {
    border: none;
    height: 24px;
    font-size: 15px;
    width: auto;
    } 
#field-topsearch{width:80%; display:inline-block;}
.button-start-search submit
    {
    display: table-cell;
    }

How to expand input field to 100% of the parent

2 Answers2