I encountered a peculiar issue that I have managed to work around, but I am still curious about why it is happening.
Below is the code for my Composite class:
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);
}
...
When I add this ExpandingOvalButton instance to a flex table along with other widgets and apply CSS styles to the flextable, everything works perfectly. However, if I try to apply CSS positioning directly to an ExpandingOvalButton instance without putting it inside another panel, the positioning does not work as expected.
private ExpandingOvalButton startBtn = new ExpandingOvalButton("Start");
startBtn.getElement().setId("myId");
#myId
{
position: absolute;
left: 30%;
top: 120px;
}
The above code does not position the element 30% from the left side. But when I add startBtn to a Panel and then apply the same CSS style to the Panel, it does position the element correctly.
panel.add(startBtn);
panel.getElement().setId("myId");
Has anyone else experienced this issue before or have any insights into what might be causing it?