2

我试图让我的 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但最近没有任何答案,而且他似乎专注于获取标签,而不是专门获取内联布局。我不直接关心,如果我可以让我的小部件的顶级标签内联流动,我很高兴。

4

2 回答 2

3

看来您的问题是由使用display: run-in而不是更“标准”引起的display: inline。IEFirefox 不支持run-in,并且似乎 Firebug 在添加时会修剪样式。

尝试将样式更改为display: inline(或者inline-block如果您想要块的某些属性,例如宽度,但要注意IE +的怪癖inline-block)。

于 2010-03-20T06:31:16.027 回答
2

它应该是<g:HTMLPanel styleName="{style.section}">,而不是<g:HTMLPanel styleNames="{style.section}">- styleNames 是一个错字(它出现在 UiBinder 文档中,所以我确定你就是从那里得到它的)。styleName 是正确使用的东西。

此外,Igor Klimer 是正确的,您应该使用display: inlineordisplay: inline-block而不是display: run-in.

一般来说,你可以通过在UIObject类上查找 setXXX 方法来判断可用的属性名称,而属性名称就是 XXX。因此,UIObject有一个setStyleName方法,您可以使用名为styleName.

于 2010-03-22T14:39:31.083 回答