Re: change CSS style of a single GWT widget

This is the reason UI objects have a setStylePrimaryName and addStyleName (and addStyleDependentName): change the primary name of your widget to something other than the default gwt-TabLayoutPanel, or add another style name (class) to the widget, and adapt your CSS. Your selector will look like ".myAwesomeTabLayoutPanel .gwt-TabLayoutPanelContentContainer" (you'll have to style "everything" in your widget though, not just the content area, if myAwesomeTabLayoutPanel is the primary style name; this doesn't apply if you used addStyleName), or ".gwt-TabLayoutPanel.myAwesomeWidget .gwt-TabLayoutPanelContentContainer" (if you used addStyleName and possibly use the same style name with other widgets)

Beware of nesting though, if you put tab layout panels inside tab layout panels (even with intermediary widgets) then the selector could match a panel you don't want to; in that case, use more specific operators in the selector (such as ">" or maybe :not())

On Tuesday, January 6, 2015 10:00:50 AM UTC+1, Magnus wrote:

Hi,

I would like to style the content area of a TabLayoutPanel, but only for a specific one.

I know that I can change it by placing the following into the CSS file included by my host page:

.gwt-TabLayoutPanel .gwt-TabLayoutPanelContentContainer

{

  border-color: #ccc;

  border-style: solid;

  background: #ff0000;

}

But this affects all instance of TabLayoutPanel. How can I apply it to only one instance?

I know how to put CSS into a client bundle, but how can I apply that to a single widget?

Thanks

Magnus

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.