CODEWITHSUNDEEP
css
Awais Imran
Awais Imran

Reputation: 1344

Fluid textboxes exceeding the container

I am using third party tool [jotForm] for creating forms on my wordpress website and I noticed in Firfox, all text boxes are coming inside the container wherease in chrome and IE they are exeeding. I applied 100% width on textboxes so that they could be adjustable in any resolution.

Here is the screenshot of different browsers enter image description here

And here is the URL where you can see the form http://aite.com.sa/about/

Also, I injected custom css for my form

.form-textarea, .form-textbox {
    padding: 4px 0;
    border: solid 1px #AAA;
    outline: 0;
    font-size:12px !important;
    font-family: Verdana, Tahoma, sans-serif;
    background: #fff;
    box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    width:100% !important;
    }
.form-textarea {
    height: 40px;
    line-height: 100%;
    font-family: verdana !important;
    }
input:hover, textarea:hover,
input:focus, textarea:focus {
    border-color: #C9C9C9;
    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
    }
.form-all{
    float:left;
    padding-top: 0px !important;
    width:100% !important;
    }
.form-input { width: 100%  !important; }
.form-line-error {background:none repeat scroll 0 0;}
.form-error-message { display: none !important; }
.form-label-left {
    display:none;
    }
.form-validation-error {border: 1px solid #C85959 !important;}
.form-button-error { color: #C85959;}

Upvotes: 0

Views: 282

Answers (3)

Webberig
Webberig

Reputation: 2806

Since you tagged CSS3, check out box-sizing: http://www.paulirish.com/2012/box-sizing-border-box-ftw/

By default, the total width of an element consists of:

  • given width (in your case 100% of the container)
  • border (if your border is 1px, add 2px in total)
  • padding

For example:

div {
    width: 100%;
    border: 1px solid black;
    padding: 5px;
}

This div will be 12px wider then the container. Add box-sizing to the CSS: 

div {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid black;
    padding: 5px;
}

If you provide box-sizing: border-box, the element width will be calculated differently, and will INCLUDE padding and the border. The total width of this second div will be 100%.

Here's a working example: http://jsfiddle.net/7gW3R/

Upvotes: 1

omma2289
omma2289

Reputation: 54659

Remove the padding from your list items and add it to your list since it is adding to the 100% width

.form-line {
    /* padding: 10px; remove this*/
}

.form-section, .form-section-closed {
    padding: 10px
}

Upvotes: 1

o3fingers
o3fingers

Reputation: 31

The problem is up a couple of levels in your markup.

The input is 100% of the width of your .form-input Your .form-input is 100% of the width of your li.form-line Your .form-line is wider than your form

Check this LI

<li class="form-line form-line-error" id="id_3">
</li>

And the styles

.form-line {
    clear: both;
    padding: 10px;
    margin: 0px;
    display: block;
    width: 97%;
    width: -moz-available;
    position: relative;
}

Margin, border, and padding widths are normally added to your defined width, so width: 97% is getting added to 10px of padding on each side. Your li is too wide and its children are filling it.

Read up on the box-model. There's a property called "box-sizing" you might be able to use for a quick fix on newer browsers, but understanding the box model properly will save headaches in the long run.

Here's the official box-model page from the W3C

Here's Chris Coyier's more readable version

Upvotes: 0

Related Questions