1. #1
    Sencha User
    Join Date
    Jul 2011
    Posts
    13
    Vote Rating
    0
    chuckie474 is on a distinguished road

      0  

    Default FieldLabel.setStyleName causes the corresponding widget to be misaligned

    FieldLabel.setStyleName causes the corresponding widget to be misaligned


    I have a FieldLabel and I want to set the style to be bold. However, when I call setStyleName, the corresponding widget gets moved down a line so it isn't aligned with the field label:

    So this code:

    FieldLabel name = new FieldLabel();
    name.setText("Name");
    name.setStyleName("boldText");
    TextField nameFld = new TextField();
    nameFld.setEmptyText(""Enter your name...");
    name.add(nameFld);

    Looks like this:
    fldLabel.jpg

    Doing things such as:
    name.addStyleName("boldText");
    or
    name.setStyleName("boldText", true)
    keeps the alignment, but it results in the style not getting recognized and displays in plain text.

    Has anyone seen this or figured out a workaround? If I set the style to something different, such as changing the color to red, the addStyleName works - for some reason it just doesn't like the text to be bold.

  2. #2
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,734
    Vote Rating
    90
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    How is your boldText css style defined? Have you tried addStylename instead?

    I suspect setStyleName is *replacing* the existing styles instead of adding a new one, so you are removing the styles that the FieldLabel needs to function correctly.

    We could make this harder to break by adding an extra wrapper around the FieldLabel dom contents, but that would make the dom unnecessarily bigger.

  3. #3
    Sencha User
    Join Date
    Jul 2011
    Posts
    13
    Vote Rating
    0
    chuckie474 is on a distinguished road

      0  

    Default


    boldText is defined as:
    boldText {font-size: 11px; font-weight: bold}
    I did try addStyleName but the font-weight doesn't get rendered at all.

    I ended up creating my own wrapper around FieldLabel with new attributes called labelStyle and labelText, and then when it gets rendered, I do a:
    super.setHTML("<span class=\"" + labelStyle + "\">" + labelText + "</span>");
    That seems to do the trick.

Thread Participants: 1

Tags for this Thread