FlowPanelの要素にPanelを追加しても浮動化してくれない
GWTを使用していて、FlowPanelの要素にPanelを追加しても浮動化してくれないとき。
追加する要素を<span></span>で囲み、CSSでfloat属性を指定すればよい
参考:
Simplifying GWT Markup with HTML Widgets « TurboManage
Main.java
public class Gwt_tmp implements EntryPoint { private static final int COUNT = 10; public void onModuleLoad() { VerticalPanel mainPanel = new VerticalPanel(); RootPanel.get().add(mainPanel); mainPanel.addStyleName("contents"); { mainPanel.add(new Label("ボタンをFlowPanelに追加")); FlowPanel fp = new FlowPanel(); fp.setWidth("800px"); mainPanel.add(fp); fp.clear(); for (int i=0; i<COUNT; i++) { Button item= new Button("button"+i); item.setWidth("100px"); fp.add(item); } } mainPanel.add(new HTML("<hr>"));[f:id:black-skin:20150315175347p:plain] { mainPanel.add(new Label("VerticalPanelはFlowPanelでも横配置できない")); FlowPanel fp = new FlowPanel(); mainPanel.add(fp); for (int i = 0; i < COUNT; i++) { VerticalPanel item = new VerticalPanel(); item.setStyleName("name-" + i); item.add(new Label("title" + i)); item.add(new Button("ボタン")); fp.add(item); } } mainPanel.add(new HTML("<hr>")); { mainPanel.add(new Label("<span>で囲み、floatを指定")); FlowPanel fp = new FlowPanel(); fp.setWidth("800px"); mainPanel.add(fp); fp.clear(); for (int i=0; i<COUNT; i++) { VerticalPanel item = new VerticalPanel(); item.setWidth("150px"); item.setStyleName("name-" + i); item.add(new Label("title" + i)); item.add(new Button("ボタン")); fp.add(new FloatSpanItemWidget(item)); } } } }
FloatSpanItemWidget.java
import com.google.gwt.dom.client.Document; import com.google.gwt.dom.client.Element; import com.google.gwt.user.client.ui.SimplePanel; import com.google.gwt.user.client.ui.Widget; public class FloatSpanItemWidget extends SimplePanel { public FloatSpanItemWidget() { super((Element) Document.get().createSpanElement().cast()); addStyleName("float"); } public FloatSpanItemWidget(String s) { this(); getElement().setInnerText(s); } public FloatSpanItemWidget(Widget w) { this(); this.add(w); } }
<!--(中略)--> .float{ float: left; }