Cleaning up my customLabel with CSS

Question

I am customizing a label and placed the name of the label in the one cell of a grid and an asterisk(image) in the next cell.

<ui:image field="requiredImage" src="images/required_indicator.gif"/>
<ui:style type="com.equillore.mcmexternal.client.ui.IndicatorLabel.Style">
    @sprite 
    .requiredAsterisk
     {
        gwt-image: 'requiredImage';
        width: 7px;
        height: 14px;
    }
    .labRequired
    {
        color:#B22222;
        font-size:14;
        font-style:normal;
        font-weight:bold;
        font-family: serif;
        letter-spacing: 0.07em; 
    }
</ui:style>
<g:Grid >
    <g:row>
        <g:customCell>
            <g:Label ui:field="label" addStyleNames="{style.labRequired}"/>
        </g:customCell>
        <g:customCell>
            <g:Label addStyleNames="{style.requiredAsterisk}"/>
        </g:customCell>
    </g:row>
</g:Grid>

when I run this the asterisk image is however displayed in front of the label(labRequired) as well just after it. So it is displayed twice.

why is this happening and how can I get rid of the 'extra' astersik image?

Kind regards

Kenoyer130 · Accepted Answer · 2012-06-06T19:48:35.050

1

<ui:image field="requiredImage" src="images/required_indicator.gif"/>

This line is actually inserting the image in the UIBinder. Remove it.

Instead add it as a managed resource in the client bundle.

https://developers.google.com/web-toolkit/doc/latest/DevGuideClientBundle#Image_Sprites

edited Jun 06 '12 at 19:48

answered Jun 06 '12 at 17:54

Kenoyer130

6,874
9
51
73

If I remove the line and manually inserting the image in the Css class rule creates an exception. How would I insert the image in this case? – Arianule Jun 06 '12 at 19:11

Cleaning up my customLabel with CSS

1 Answers1