You've worked diligently on your webform and it looks great, but when testing it you discover that the select menus and textareas are suddenly breaking out the side. Why did this happen? How can you fix it?

Here's an example of the behavior you might see that illustrates this issue. Note how the fields extend outside the white body background area into the side margin:

What's causing the break?

When a webform is built you might include fieldsets or containers that group content together and/or you might have long answers available in your select menu options. When one or both of these conditions occur, the fieldset and/or select option expands to contain the text you've included. This is a generally known issue with both of these webform elements and, unfortunately, we can't apply a global fix as it might interfere with the behavior of not just the rest of your form, but of everyone's form on SiteFarm. Better to create a more granular fix that addresses your specific form.

Fixes you can try

1. If possible, shorten the amount of text in the Select menu option
2. Don’t wrap everything in a <fieldset>
3. Add some CSS via the CSS Editor fieldset select { width: 100%; } to target all select elements within a fieldset.
4. Or: Target just select elements in the webform’s fieldset .webform-type-fieldset select { width: 100%; }
5. Target just the offending element in the CSS Editor #edit-how-did-you-hear-about-aggie-jumpstart { width: 100%; }.
6. Create a custom class in the CSS Editor .force-contain { width: 100%; } to add to select elements in Webform’s field “Advanced > Element attributes > Element CSS classes”.