CODEWITHSUNDEEP
csshtmltwitter-bootstrap
Elisabeth
Elisabeth

Reputation: 21206

Why does the input tags not shrink when the window is resized

When I resize my window smaller I wonder why the textboxes do not shrink in width either?

It looks the same on FF,IE and Chrome. How can I say to the textboxes to adapt their width when the window is resized?

I can give the text input this style: `style="display:block;width:auto"

Then the textbox does not overflow the div but then it seems to have a fixed width and is not stretched anymore to the divs end what I do not like at all.

enter image description here

<div class="row">
    <div class="span6">
        <div class="row">
            <div style="background-color: green" class="span3">
                <span>Schoolyear name</span>
            </div>
            <div style="background-color: orange" class="span3">
                <input type="text" />
            </div>
        </div>
        <div class="row">
            <div style="background-color: red;" class="span3">
                <span>Schoolyear from</span>
            </div>
            <div style="background-color: yellow" class="span3">
                <input type="text" />
            </div>
        </div>
        <div class="row">
            <div style="background-color: red" class="span3">
                <span>Schoolyear to</span>
            </div>
            <div style="background-color: yellow" class="span3">
                <input type="text" />
            </div>
        </div>
        <div class="row">
            <div style="background-color: red" class="span3">
                <span>Start week</span>
            </div>
            <div style="background-color: yellow" class="span3">
                <label class="radio">
                    <input type="radio" />Week A</label>
                <label class="radio">
                    <input type="radio" />Week B</label>
            </div>
        </div>
        <div class="row">
            <div style="background-color: blue" class="span3">
                <span>Weekly rotation</span>
            </div>
            <div style="background-color: greenyellow" class="span3">
                <select>
                    <option>Please select</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                </select>
            </div>
        </div>
    </div>
    <div style="background-color: gray" class="span3">
        <div class="row">
            <div class="span3">Days to display</div>
            <div class="span3">
                <label class="checkbox">
                    <input type="checkbox" />Sunday</label>
                <label class="checkbox">
                    <input type="checkbox" />Sunday</label>
                <label class="checkbox">
                    <input type="checkbox" />Sunday</label>
                <label class="checkbox">
                    <input type="checkbox" />Sunday</label>
                <label class="checkbox">
                    <input type="checkbox" />Sunday</label>
                <label class="checkbox">
                    <input type="checkbox" />Sunday</label>
                <label class="checkbox">
                    <input type="checkbox" />Sunday</label>
            </div>
        </div>
    </div>
    <div class="span3">
        <div class="row">
            <div style="background-color: red" class="span3">Weeks start day</div>
            <div style="background-color: yellow" class="span3">
                <label class="radio">
                    <input type="radio" />Tuesday</label>
            </div>
            <div style="background-color: red" class="span3">
                <label class="radio">
                    <input type="radio" />Monday</label>
            </div>

        </div>
    </div>
</div>

<div class="row">
    <div style="background-color: burlywood" class="span12">99999999999999999999</div>
</div>

Upvotes: 0

Views: 5682

Answers (3)

Arpit
Arpit

Reputation: 12797

What you have to do is :

    <div style="background-color: orange; width:100%" class="span3">
                                          ^^^^^^^^^^|________________set this as per your size in % or px
          <input type="text" style="width:50%;"
                                   ^^^^^^^^^^|___________set this in % as per your need.

Check this Resize Input Demo

Upvotes: 0

Rajender Joshi
Rajender Joshi

Reputation: 4205

This will do the trick!

Demo

input[type="text"], select{
    width:100%;
    box-sizing: border-box;
}

Upvotes: 3

Vin&#237;cius Moraes
Vin&#237;cius Moraes

Reputation: 3516

I can see you are using a grid system on your markup, you should take a look if this grid system provide you a option to do that, that would be the better way to accomplish what you want.

Anyway for do that you should use `%``instead of pixels or auto, example:

CSS

input{
    width: 80%;
}

And if its possible a url so we can't take a look would make much easier to help you out

Upvotes: 0

Related Questions