Dynamically resize Inputs

I've got this piece of code for a jQTouch/jQuery page that dynamically resizes inputs to the window's innerWidth - the associated label width - 50px.

<html>
<head>
<title>resizeInputs</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">@import "jqtouch/jqtouch.min.css";</style>
<style type="text/css" media="screen">@import "jqtouch/themes/apple/theme.min.css";</style>
<script src="jqtouch/jquery.1.3.2.min.js" type="application/javascript"></script>
<script src="jqtouch/jqtouch.min.js" type="application/javascript"></script>
<script type="text/javascript">
var jQT = $.jQTouch({
  statusBar: 'default'
});

$(document).ready(function () { 
  function resizeInputs () { 
    $($("input").filter("[type='email'],[type='tel'],[type='text'],[type='url']")).each(function () { 
    $(this).css("width", window.innerWidth - $(this).siblings("label").width() - 50 + "px"); 
    console.log($(this).attr("id")+": " +$(this).siblings("label").length+": "+$(this).siblings("label").width()); 
    }); 
  };
  resizeInputs();
  $("body").bind("turn", resizeInputs);
}); 
</script>

The HTML is...

<div id="pnl"> 
  <div class="toolbar"> 
    <h1>resizeInputs</h1> 
  </div> 
  <ul class="edit rounded"> 
    <li> 
      <label for="in1">Input 1</label> 
      <input id="in1" type="text" pattern="\d*" /> 
    </li> 
    <li> 
      <label for="in2">REAAALLLY LONG LABEL</label> 
      <input id="in2" type="url" /> 
    </li> 
  </ul> 
</div>

It works great if you only have one div panel in the app. Does anyone have any suggestion on how to get this code to resize inputs when the inputs and labels are not on the 1st panel?

ansaurus

tags:

views:

answers:

Dynamically resize Inputs

related questions