adding scroll panel to popup panel

[sreenivas]

Hi,

I have a popup panel which opens on a button click event. Popup panel height should be fixed and if contents of popup panel exceeds the height of popup panel, then a vertical scroll bar needs to be attached to it, and i should be able to scroll it to see the contents. How to achieve this? Can any body please help?


Thanks,
Sreenivas

[Mike Dee]

It's fairly simple.  Do as expected.  Put a ScrollPanel inside a popup.  Set the width and height of the ScrollPanel to that of the Popup width and height.  Put something (another panel) in the ScrollPanel and set its width and height independently.  

Here is an example with an HTMLPanel inside ScrollPanel.  Done with uibinder.

Main:

public class Tpopscroll implements EntryPoint

{

interface Binder extends UiBinder<Widget, Tpopscroll>

{

}

private static final Binder binder = GWT.create( Binder.class );

@UiField SimplePanel mainPanel;

@UiField Button button;

/**

* This is the entry point method.

*/

public void onModuleLoad()

{

binder.createAndBindUi( this );

RootLayoutPanel.get().add( mainPanel );

}

@UiHandler("button")

void onButtonClick( ClickEvent event )

{

ThePopup popup = new ThePopup();

popup.show();

}

}

Main's uibinder:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'

xmlns:g='urn:import:com.google.gwt.user.client.ui'>

<g:SimplePanel ui:field="mainPanel">

<g:Button ui:field="button">Hey</g:Button>

</g:SimplePanel>

</ui:UiBinder>

A popup class:

public class ThePopup extends PopupPanel

{

private static final Binder binder = GWT.create( Binder.class );

@UiField ScrollPanel scrollPanel;

@UiField HTMLPanel htmlPanel;

interface Binder extends UiBinder<Widget, ThePopup>

{

}

public ThePopup()

{

super( true );

setWidget( binder.createAndBindUi( this ) );

HTML html = new HTML();

html.setHTML( s );

htmlPanel.add( html );

}

static String s = "Here is some<br/>HTML in an HTML Panel.<br/><br/>" + 

"This hypertext markup sample can get very wide...so wide that it extends outside the viewable area.";

}

Popup uibinder:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder' xmlns:g='urn:import:com.google.gwt.user.client.ui'>

<g:ScrollPanel ui:field="scrollPanel" width="450px" height="300px">

<g:HTMLPanel width="600px" height="400px" ui:field="htmlPanel"/>

</g:ScrollPanel>

</ui:UiBinder>