StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POCan't apply absolute css positioning to my own composite button
text
Body
copied!<p>Here is a strange problem I am having, althougt I have a work around I would still like to understand why it is happening.</p> <p>Here is my Composite class</p> <pre><code> 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); } ... </code></pre> <p>It works perfectly for me when I add it to a flex table along with other widget and then I can apply css styles to the flextable and position it fine. Problem is if I want to apply css positioning to a ExpandingOvalButton instance which does not sit inside of an other panel it does not work properly. </p> <pre><code>private ExpandingOvalButton startBtn = new ExpandingOvalButton("Start"); startBtn .getElement().setId("myId"); #myId { position: absolute; left: 30%; top: 120px; } </code></pre> <p>This will NOT position itself 30% from the left side. However if I add startBtn to a Panel and then apply the same CSS style to the Panel it WILL position itself 30% from the left.</p> <pre><code>panel.add(startBtn); panel.getElement().setId("myId"); </code></pre> <p>Anyone come across this before or know what might be causing it? </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload