Print Page - Few Odd Things on Dialog / Form

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.

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: TampaBay55 on March 01, 2015, 02:49:05 PM