Few Odd Things on Dialog / Form

[TampaBay55]

Greetings:

Still playing with what seems to be a pretty nice product.  Came across a couple of things trying to create a dialog form.  Here is the form markup:

Code:

<div id='pradata-update'><div>
	<form id='pradata-form' method='post' novalidate>		
    	<div id='pradata-frm-tabs'>
       		<div title='Practice General'>
				<fieldset><legend>Practice Demographics</legend>
					<div class='fitem'><label>Practice Name:</label><input name='practicename'/></div>
					<div class='fitem'><label>Address 1:</label><input name='address1'/></div>
					<div class='fitem'><label>Address 2:</label><input name='address2'/></div>
					<div style='display:table'>
						<div class='fitem' style='display:table-cell;padding-right:5px'><label>City/ST/Zip:</label><input name='city'/></div>
						<div class='fitem' style='display:table-cell;padding-right:5px'><input name='state'/></div>
						<div class='fitem' style='display:table-cell;'><input name='zipcode'/></div>
					</div>
					<div style='display:table'>
						<div class='fitem' style='display:table-cell;padding-right:5px'><label>Telephone:</label><input name='telephone'/></div>
						<div class='fitem' style='display:table-cell'><label style='width:20px;'>Fax:</label><input name='faxnumber'/></div>
					</div>					
					<div class='fitem'><label>Web Address:</label><input name='webaddress'/></div>
				</fieldset>
				<fieldset><legend>Practice Identifiers</legend>
					<div style="display:table">
						<label style='padding-left:3px;text-align:left;display:table-cell;width:152px'>Federal Tax ID:</label>
						<label style='text-align:left;display:table-cell;width:152px'>Practice NPI:</label>
						<label style='text-align:left;display:table-cell;width:153px'>Practice PIN:</label>
					</div>
					<div style="display:table">	
						<div class='fitem' style='display:table-cell;width:152px'><input name='taxid'/></div>
						<div class='fitem' style='display:table-cell;width:152px'><input name='npi'/></div>
						<div class='fitem' style='display:table-cell;width:153px'><input name='practicepin'/></div>
					</div>						
				</fieldset>				
			</div>
			<div title='Users'>
			<div>
		</div>
	</form>
</div>

This following code initializes the form / elements:

Code:

	$('#pradata-update').dialog({title: 'Practice Record Editor',width:520,height:470,closed:true,shadow:false,modal:true});		
	$('#pradata-form').append($('#pradata-frm-tabs').tabs({border:false,plain:true}));
	
	/** Define the Form Fields **/
	$('input[name=practicename]').textbox({width: 350,height: 24});
	$('input[name=address1]').textbox({width: 350,height: 24});
	$('input[name=address2]').textbox({width: 350,height: 24});
	$('input[name=city]').textbox({width: 200,height: 24});
	$('input[name=state]').textbox({width: 60,height: 24});
	$('input[name=zipcode]').textbox({width: 80,height: 24});
	$('input[name=telephone]').textbox({width: 157,height:24});
	$('input[name=faxnumber]').textbox({width: 157,height: 24});
	$('input[name=webaddress]').textbox({width: 350,height: 24});
	$('input[name=taxid]').textbox({width: 148,height:24});
	$('input[name=npi]').textbox({width: 148,height: 24});
	$('input[name=practicepin]').textbox({width: 154,height: 24});
	$('#pradata-form').form({});

The dialog element at a height of 470 is too tall and 467 is too small (the window height is not relevent the the number I put in the height.  Much easier to show you visually.
If I remove the height property, the window shows perfect - EXCEPT - for when I select the second tab where the window shrinks because there is nothing on the tab. 

I need the window height to be consistent - no matter what tab I select on the form.  Any help would be appreciated.  Let me know if you need images and where I can send them.

[stworthy]

The simple way is to set a height for your tabs component.

Code:

$('#pradata-update').dialog({title: 'Practice Record Editor',width:520,height:'auto',closed:true,shadow:false,modal:true});		
$('#pradata-frm-tabs').tabs({border:false,plain:true,width:'100%',height:470})

[TampaBay55]

Greetings and thanks.

Attempting to find the correct height for the window, I set  the tab height to 420 which was too small.  Setting the the tab height to 422 made the window jump in height - now way to tall.  Not sure what is causing this but I am still unable to put the window height where I need it.

[TampaBay55]

I'd like to bump this, please.  I can send images of the behavior if necessary.

[TampaBay55]

Was able to resolve this issue by setting the overflow:hidden style on the dialog window and on the individual tabs.