CODEWITHSUNDEEP
csshtmlgwtpanel
melchoir55
melchoir55

Reputation: 7276

Set panel component div id

I am using a DockLayoutPanel in GWT. I've added a few things to this panel.

I have a DockLayoutPanel.

DockLayoutPanel dockpanel = new DockLayoutPanel(Unit.EM);

I've added an image to "North":

Image logo = new Image("imageurl.com");
dockpanel.addNorth(logo, 5);

I've added an additional collection of panels as well:

dockpanel.add(otherSplitLayoutPanel, 5);

I need to apply CSS to the individual frames created by the DockLayoutPanel. Specifically, I need to apply CSS to the "North" frame which contains the image. Basically, I want to set the dimensions of the images such that they will be relative to the size of its container. I am having a lot of difficulty figuring out how to assign a div ID to this frame so that I can target it with CSS.

I don't want to just apply the CSS to the entire panel, so assigning and using an ID for the DockLayoutPanel is not an option.

Upvotes: 0

Views: 219

Answers (1)

Andrei Volgin
Andrei Volgin

Reputation: 41089

You don't need to assign ids to set CSS. You can use CSS classes or other selectors instead.

You can set a CSS class on your image:

logo.addStyleName("logo");

In your CSS:

.logo {width: 50%; height: 50%;}

Or you can set it directly in your code:

logo.getElement().getStyle().setWidth(50, Unit.PCT);
logo.getElement().getStyle().setHeight(50, Unit.PCT);

Upvotes: 1

Related Questions