[CLOSED] FormPanel Fields Showing On Top of DialogBox

[gte619n]

Hey there,

I have a FormPanel living in a SimplePanel in the Root. I then open a popup with another FormPanel in this DialogBox. In FireFox and Safari, I get a weird issue where the field labels of the Root FormPanel will overlay the DialogBox if you move it over the labels. I have attached a screen shot and sample code is below:

public void onModuleLoad()
{
FormPanel simple = new FormPanel();
simple.setHeading( "Regular Panel" );
simple.setFrame( true );
simple.setHeaderVisible( true );
simple.setWidth( 350 );
simple.setBodyBorder( false );

TextField<String> firstName = new TextField<String>();
firstName.setFieldLabel( "Name" );
firstName.setAllowBlank( false );
simple.add( firstName );

TextField<String> email = new TextField<String>();
email.setFieldLabel( "Email" );
simple.add( email );

DateField date = new DateField();
date.setFieldLabel( "Birthday" );
simple.add( date );

TimeField time = new TimeField();
time.setFieldLabel( "Time" );
simple.add( time );

CheckBox check1 = new CheckBox();
check1.setBoxLabel( "Classical" );

CheckBox check2 = new CheckBox();
check2.setBoxLabel( "Rock" );
check2.setValue( true );

CheckBox check3 = new CheckBox();
check3.setBoxLabel( "Blue" );

CheckBoxGroup checkGroup = new CheckBoxGroup();
checkGroup.setFieldLabel( "Music" );
checkGroup.add( check1 );
checkGroup.add( check2 );
checkGroup.add( check3 );
simple.add( checkGroup );

Radio radio = new Radio();
radio.setName( "radio" );
radio.setBoxLabel( "Red" );
radio.setValue( true );

Radio radio2 = new Radio();
radio2.setName( "radio" );
radio2.setBoxLabel( "Blue" );

RadioGroup radioGroup = new RadioGroup( "test" );
radioGroup.setFieldLabel( "Favorite Color" );
radioGroup.add( radio );
radioGroup.add( radio2 );
simple.add( radioGroup );

TextArea description = new TextArea();
description.setPreventScrollbars( true );
description.setFieldLabel( "Description" );
simple.add( description );

SimplePanel rP = new SimplePanel();
rP.setWidget( simple );

RootPanel.get().add( rP, 100, 100 );

DialogBox tC = new DialogBox( false );

FormPanel form = new FormPanel();
form.setHeading( "Popup Panel" );
form.setFrame( true );
form.setHeaderVisible( true );
form.setBodyBorder( true );
form.setScrollMode( Scroll.AUTO );

TextField<String> name = new TextField<String>();
TextField<String> phoneNumber = new TextField<String>();
SimpleComboBox<PhoneType> combo = new SimpleComboBox<PhoneType>();

name.setFieldLabel( "Name" );
name.setRegex( "^[a-zA-Z''-'\\s]{1,40}$" );
name.getMessages().setRegexText( "Please enter a valid name." );
name.setValidateOnBlur( true );

phoneNumber.setFieldLabel( "Phone" );
phoneNumber.setRegex( "^[01]?[- .]?(\\([2-9]\\d{2}\\)|[2-9]\\d{2})[- .]?\\d{3}[- .]?\\d{4}$" );
phoneNumber.getMessages().setRegexText( "Please enter a valid phone number." );
phoneNumber.setValidateOnBlur( true );

combo.add( PhoneType.CELL );
combo.add( PhoneType.HOME );
combo.add( PhoneType.OFFICE );
combo.add( PhoneType.INTERNET );
combo.add( PhoneType.OTHER );

combo.setFieldLabel( "Type" );
combo.setAllowBlank( false );

form.add( name );
form.add( combo );
form.add( phoneNumber );

tC.setHTML( "Move This Here" );
tC.setWidget( form );
tC.show();
tC.center();
}

Of Note: If I go into the DialogBox stlye in FireBug and fire a z-index on there, the Labels will behave properly.

Thanks!

Evan

[sven]

Just define a correct zindex on your dialogbox. Closed.