これが私が抱えている奇妙な問題です。回避策はありますが、なぜそれが起こっているのかを理解したいと思っています。
これが私の複合クラスです
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スタイルをフレックステーブルに適用してうまく配置できます。問題は、他のパネル内にない ExpandingOvalButton インスタンスに css ポジショニングを適用したい場合、正しく機能しないことです。
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");
誰もこれに遭遇したことがありますか、それを引き起こしている可能性があることを知っていますか?