0

这是我遇到的一个奇怪问题，尽管我有一个解决方法，但我仍然想了解它为什么会发生。

这是我的复合类

    import com.google.gwt.event.dom.client.ClickEvent;
    import com.google.gwt.event.dom.client.ClickHandler;
    import com.google.gwt.event.dom.client.HasClickHandlers;
    import com.google.gwt.event.shared.HandlerRegistration;
    import com.google.gwt.user.client.ui.*;

    public class ExpandingOvalButton extends Composite implements HasClickHandlers
    {   
        private PushButton button;
        private Label label = new Label();
        private AbsolutePanel panel = new AbsolutePanel();

        public ExpandingOvalButton(String text)
        {       
            int width = 40;
            initWidget( panel );
            Image image = new Image( "icons/ovalBlueButton.png");
            label.setText(text);
            width = width + (text.length() * 8);
            String widthStr = width + "px";
            image.setWidth(widthStr);
            image.setHeight("50px");
            button = new PushButton( image );
            button.setWidth(widthStr);
            button.setHeight("50px");
            panel.setSize(widthStr, "50px");                
            panel.add(button, 0, 0);
            panel.add(label, 18, 14);
        }

        ...

当我将它与其他小部件一起添加到弹性表时，它对我来说非常有效，然后我可以将 css 样式应用到弹性表并很好地定位它。问题是，如果我想将 css 定位应用于不位于其他面板内的 ExpandingOvalButton 实例，则它无法正常工作。

private ExpandingOvalButton startBtn = new ExpandingOvalButton("Start");
startBtn .getElement().setId("myId");


#myId
{
    position: absolute;
    left: 30%;
    top: 120px;
}

这不会将自身定位在距左侧 30% 的位置。但是，如果我将 startBtn 添加到面板，然后将相同的 CSS 样式应用于面板，它会将自身定位在距左侧 30% 的位置。

panel.add(startBtn);
panel.getElement().setId("myId");

有人遇到过这种情况或知道可能是什么原因造成的吗？

4

1 回答 1

0

如果您查看 AbsolutePanel 的源代码，您会在构造函数中找到：

DOM.setStyleAttribute(getElement(), "position", "relative");

这优先于您的 CSS 中声明的样式。您可以通过执行类似操作来强制它使用绝对定位：

DOM.setStyleAttribute(startBtn.getElement(), "position", "absolute");
于 2013-03-20T01:23:40.077 回答