2010-03-19 66 views
2

我試圖讓我的UiBinder定義的小部件顯示內聯,但我不能。我當前的代碼是:獲取UiBinder小部件以顯示內聯而不是塊

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder' xmlns:g='urn:import:com.google.gwt.user.client.ui'> 
    <ui:style> 
    .section { 
     border: 1px solid #000000; 
     width: 330px; 
     padding: 5px; 
     display: run-in; 
    } 
    </ui:style> 

    <g:HTMLPanel> 
    <div class="{style.section}"> 
     <div ui:field="titleSpan" class="{style.title}" /> 
     <div class="{style.contents}"> 
     <g:VerticalPanel ui:field="messagesPanel" /> 
     </div> 
    </div> 
    </g:HTMLPanel> 
</ui:UiBinder> 

這工作正常的部件內部看起來像什麼,但我想拋出一堆這些小部件的成FlowPanel並有當窗口大小它們流動。 HTMLPanel是一個div,但我無法獲得要分配的顯示屬性。我不能強迫式的名字,因爲下面拋出一個錯誤:

<g:HTMLPanel styleNames="{style.section}"> 

,我還可以指定一個額外的風格,但它並不適用的顯示設置。

<g:HTMLPanel addStyleNames="{style.section}"> 

這會顯示邊框並按預期設置大小,但不會流動。 Firebug顯示div上的樣式是邊框,寬度和填充,但不顯示。

有沒有辦法在UiBinder中創建一個小部件,以便顯示內聯而不是塊?如果是這樣,我可以使它兼容有一個VerticalPanel裏面(我可以做到這一點,而無需使整個小部件純粹的HTML沒有任何GWT小部件)?

PS:我看到了問題2257924但最近沒有任何答案,他似乎專注於獲取標籤,而不是專門獲取內聯佈局。我不關心,如果我可以讓我的小部件的頂級標籤以內聯方式流動,我很高興。

回答

3

看來你的問題是由使用display: run-in而不是更「標準」的display: inline造成的。 IE Firefox不支持run-in,看起來Firebug在添加時修剪樣式。

嘗試改變風格display: inline(或inline-block如果你想有一個塊的一些屬性,如寬度,但IE的quirks + inline-block的提防)。

2

它應該是<g:HTMLPanel styleName="{style.section}">,而不是<g:HTMLPanel styleNames="{style.section}"> - styleNames是一個錯字(它出現在UiBinder文檔中,所以我確信這就是您從中得到的地方)。 styleName是使用正確的東西。

此外,伊戈爾克利默是正確的,你應該使用display: inlinedisplay: inline-block而不是display: run-in

通常,您可以通過在UIObject類中查找setXXX方法來告訴可用的屬性名稱,而屬性名稱只是XXX。因此,UIObject有一個setStyleName方法,您可以使用名爲styleName的屬性訪問該方法。

+0

感謝有關styleName和文檔中的錯字的信息 – 2010-03-22 18:31:20

相關問題