On Jan 16, 7:33 pm, PKolenic <[email protected]> wrote:
> I have an application where I need to change dependant styles at run
> time.
> I want to use UIBinding as it easily helps layout the screen, however
> I am seeing a flaw.
>
> The CSS is converted into scoped names, but when you use
> addStyleDependantName("name")
> the applied class is not correct.
>
> Example
>
> CSS:
>
> .ImagePanel {
> width: 125px;
>
> }
>
> .imagePanel-small {
> height: 125px;
>
> }
>
> .ImagePanel-large {
> height: 250px;}
>
> At run time becomes:
>
> .GzkfmseIB{width:125px;}
> .GzkfmseKB{height:125px;}
> .GzkfmseJB{height:250px;}
>
> The problem shows when you add a style Dependant name (or any java
> code to set style):
>
> myImagePanel.addStyleDependantName("large");
>
> When you look at the resulting class name in FireBug the Classes are
> as follow
>
> <div class="GzkfmseIB GzkfmseIB-large">
>
> Which means that the ImagePanel-large style does not get applied.
>
> The correct classes for the div should be:
>
> <div class="GZkfmseIB GzkfmseJB">
>
> ===================
> Has anyone found a work around to this? Or am I missing a simple
> setting?
Just do not use a "dependent name":
interface Style extends CssRessource {
String largeImagePanel();
String smallImagePanel();
}
@UiField Style style;
...
myImagePanel.addStyleName(style.largeImagePanel());
<ui:style type='my.package.MyClass.Style'>
.imagePanel { width: 125px; }
.largeImagePanel { height: 250px; }
.smallImagePanel { height: 125px; }
</ui:style>
--
You received this message because you are subscribed to the Google Groups
"Google Web Toolkit" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
