FlowPanel वर्टिकल पैनेल की तरह अपने बच्चों को लंबवत रूप से कैसे प्रवाहित करें?

Question

Google suggets वर्टिकल पैनेल की जगह फ़्लोपेनल का उपयोग करते हैं क्योंकि वर्टिकल पैनेल मानक मोड (http://www.gwtproject.org/doc/latest/DevGuideUiPanels.html) में अच्छी तरह से काम नहीं करता है।

myflowPanel.getElement().getStyle().setFloat(Float.NONE); 

तो कैसे FlowPanel VerticalPanel की तरह खड़ी अपने बच्चों प्रवाह बनाने के लिए काम नहीं करता है?

Answer 1

ए FlowPanel को एचटीएमएल '< div>' के रूप में प्रस्तुत किया गया है, इसलिए इसमें कुछ भी जोड़ा गया है जो इसके डिफ़ॉल्ट प्रदर्शन के आधार पर रखा जाएगा।

उदाहरण बच्चों के लिए के रूप में प्रदान विगेट्स एक '< div>' की तरह Label खड़ी तैनात किया जाएगा, क्योंकि उनके डिफ़ॉल्ट व्यवहार एक ब्लॉक के रूप में है, लेकिन अगर आप एक TextBox जोड़ने यह एक '< इनपुट>' जिसका डिफ़ॉल्ट के रूप में रेंडर किया जाएगा प्रदर्शन इनलाइन-ब्लॉक है।

तो जिस तरह से एक FlowPanel में बच्चों निपटान के लिए प्रत्येक बच्चों के लिए उचित रूप से संपत्ति display स्थापित कर रही है, float संपत्ति, या flexbox की तरह किसी भी अन्य सीएसएस ट्वीक साथ खेल रहा है। आम तौर पर gwt डिजाइनर ui-binder टेम्पलेट्स में इस सेटिंग शैलियों करते हैं। लेकिन आप यह कर सकते हैं यदि आप कोड से क्या करना चाहते हैं:

// Example of a flow panel with all elements disposed in vertical 
    FlowPanel verticalFlowPanel = new FlowPanel(); 
    TextBox textBox = new TextBox(); 
    Label label = new Label("Foo"); 
    textBox.getElement().getStyle().setDisplay(Display.BLOCK); 
    verticalFlowPanel.add(textBox); 
    verticalFlowPanel.add(label); 
    RootPanel.get().add(verticalFlowPanel); 

    // Example of a flow panel with all elements disposed in horizontal 
    FlowPanel horizontalFlowPanel = new FlowPanel(); 
    TextBox textBox2 = new TextBox(); 
    Label label2 = new Label("Foo"); 
    label2.getElement().getStyle().setDisplay(Display.INLINE_BLOCK); 
    horizontalFlowPanel.add(textBox2); 
    horizontalFlowPanel.add(label2); 
    RootPanel.get().add(horizontalFlowPanel);