100% width text area with adjacent button

Long time to post, between being sick and doing a bunch of really boring coding work nothing of value to post has come up recently, until now. Last week I was working on a contract where they have the entire layout as a series of tables set to 100% width (I know tables, how retro). Anyway I was trying to do something I had done hundreds of times before on their site, a text area thats 100% wide (so it flexes with the width of the page) that has a button next to as (as opposed to below it like would naturally happen). After spending some time on it i figured it out and decided I would post it here on the weekend so I would always be able to find it. Come today and wouldn’t you know it I forgot how I did it, so I played around a bit and found a solution. It’s not the same as the one I used for them but the end effect is the same. First it requires you to but some code around your input (it’s never that simple), a mini example table is below.

Enter Text

Snipplr: http://snipplr.com/view/52532/100-width-text-area-with-adjacent-button/

The last 2 empty table cells are not important, there just there because thats the same style that the contract sets everything up with. Anyways as you can see you have to wrap the entire input in a div, then just the text area in a div. Another thing you have to do it give your button a width, I usually use 95px since it seems to fit the majority of buttons out there (after all buttons names are usually things like “Submit” or “Load” not “Press here to do the thing you want to do”). That width of the button, along with any margins or passing you add to it to make the format clean, as then added as right padding to the cell this div cluster is placed in so in this case 95+5 to make the final product look clean is a nice round 100px. That code there is paired with the css below (it’s normal CSS here but it works just as well being all inline).

Snipplr: http://snipplr.com/view/52532/100-width-text-area-with-adjacent-button/

That css code prevents wrapping and plays with margins (equal to the amount of padding above, button width + margin) to get a nice clean look when your done. The simplest way to description what it does it in throws the button off the end, outside of the box, but the box is made shorter (by the inline padding added to that cell) to compensate and move it look as if it’s in the box.

One thing to note, if your going to use jQuery to pull values from the box laters you probably want to avoid the child selector “>” to make it easier, just use a space as it acts as a simple inside selector going all the say down when looking for elements, in this example that text area could easily be selected with #(“table input[type=’text’]”).

You can see it on the worlds more boring example page here: 100% width text area with adjacent button.

I know this is a poor way to do this, and if I run across any of my old code that does it in a better way I’ll update according, but this effectively works and I can now at least reference this myself later, even if nobody else is ever helped by it. If you know of a better way to achieve the same thing please comment.

Leave a Reply

Your email address will not be published. Required fields are marked *