ansaurus

Question

How to position a liquid/elastic textbox next to a button?

Answer 1

+3 A:

I was able to get this to work within a table (I know, but it works) where it would correctly handle page resizing as well as the value of the button changing:

<table class="elastic">
    <tr>
        <td><input class="textbox" type="text"></td>
        <td class="button"><input type="button" value="Test Button"></td>
    </tr>
</table>

There may be a <div> alternative out there for styling.

EDIT: I revamped my example to use the following style sheet:

.elastic { width:100%; }
.elastic .textbox { width: 100%; }
.elastic .button { width: 1%; }

CAbbott 2009-06-05 17:30:58

I was trying to avoid tables but I guess that's the best/only way to achieve what I want. Thanks.

Josef 2009-06-08 16:08:35

Answer 2

A:

It's hard to give a definitive answer without seeing some code but the following will size the input 50% of the browser width with the button next to it.

input {width:50%}

<input>
<button>save</button>

Emily 2009-06-05 17:33:08

..but I want the textbox to be 'the rest of the available width', not a fixed percentage of the brwoser width?

Josef 2009-06-08 16:19:58

Answer 3

A:

HTML:

<div class="widebox">
  <input type="text" value="" />
  <button>Button</button>
</div>

jQuery:

<script type="text/javascript">
$(document).ready(function(){
  var w = $(".widebox");
  $(".widebox input:text").css({ width: (w.width - (w.children("button:first").width + 20)) });
});
</script>

Note: Be sure to include the jQuery library in your document's <head>. For speed I recommend using the one hosted by Google: http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

NGJ Graphics 2010-01-27 22:50:04

ansaurus

tags:

views:

answers:

How to position a liquid/elastic textbox next to a button?

related questions