Click
  1. Click
  2. CLK-595

Can't apply to TextField label the same style as the one assigned to the Control

    Details

    • Type: New Feature New Feature
    • Status: Resolved
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: 2.1.0 RC1
    • Fix Version/s: 2.2.0
    • Component/s: core
    • Labels:
      None
    • Environment:
      tomcat on linux

      Description

      I need to set the same margin-bottom to the TextFiled and its label, but when I call the method setStyle("margin-bottom", "20px") of the TextField, it does not set the same margin/style to its label; for the java code:
      TextField cld = new TextField("cld", "My Text Field: ");
      cld.setSize(20);
      cld.setRequired(false);
      cld.setStyle("margin-bottom", "20px");
      form.add(cld);

      the resultant html code (generated putting $form in the html) is:

      <td class="fields" align="left"><label for="form_cld">My Text Field: </label> </td>
      <td align="left"><input type="text" name="cld" id="form_cld" value="" size="20" style="margin-bottom:20px;"/></td>

      As you can see the style is applied to the intput text, but not to its label.

      This generate a very ugly page, where all the label are rendered not near the fields they refer to.

        Activity

        Stefax created issue -
        Hide
        Bob Schellink added a comment -

        This is not a bug. The Label is set by the Form and does not apply the Field styles to the label.

        If you need fine grain control you can style the field and label using CSS selectors or if that doesn't work, use manual layout or a custom Form.

        Show
        Bob Schellink added a comment - This is not a bug. The Label is set by the Form and does not apply the Field styles to the label. If you need fine grain control you can style the field and label using CSS selectors or if that doesn't work, use manual layout or a custom Form.
        Bob Schellink made changes -
        Field Original Value New Value
        Status Open [ 1 ] Closed [ 6 ]
        Resolution Won't Fix [ 2 ]
        Hide
        Stefax added a comment -

        Styling margin is something usual and would be nice that the label associated to a field inherit that settings.
        I think that would be useful if the field itself can set the style of its label with a method like setLabelStyle as the one of the form.
        Thinking that all the label in the form must have the same style (form.setLabelStyle()) is a questionable choice, not convenient for web programming.
        I like click framework and I find it very easy to use, so I hope that we can find a solution convenient for the users and the developers.

        Show
        Stefax added a comment - Styling margin is something usual and would be nice that the label associated to a field inherit that settings. I think that would be useful if the field itself can set the style of its label with a method like setLabelStyle as the one of the form. Thinking that all the label in the form must have the same style (form.setLabelStyle()) is a questionable choice, not convenient for web programming. I like click framework and I find it very easy to use, so I hope that we can find a solution convenient for the users and the developers.
        Hide
        Bob Schellink added a comment -

        Ok, instead of filing this as a bug, lets make it a new feature: add setLabelStyle / setLabelStyleClass methods on Field.

        Show
        Bob Schellink added a comment - Ok, instead of filing this as a bug, lets make it a new feature: add setLabelStyle / setLabelStyleClass methods on Field.
        Bob Schellink made changes -
        Issue Type Bug [ 1 ] New Feature [ 2 ]
        Fix Version/s 2.2.0 [ 12314164 ]
        Bob Schellink made changes -
        Resolution Won't Fix [ 2 ]
        Status Closed [ 6 ] Reopened [ 4 ]
        Hide
        Stefax added a comment -

        Perfect! Have I to resubmit this issue as a new Feature request?
        Thanks for your help!

        Show
        Stefax added a comment - Perfect! Have I to resubmit this issue as a new Feature request? Thanks for your help!
        Hide
        Bob Schellink added a comment -

        No need, I've already updated the status.

        Show
        Bob Schellink added a comment - No need, I've already updated the status.
        Hide
        Stefax added a comment -

        Excuse me, I only see now that you have still changed the type to new feature...

        Show
        Stefax added a comment - Excuse me, I only see now that you have still changed the type to new feature...
        Hide
        Bob Schellink added a comment -

        Hi Stefax

        I just attempted an implementation as discussed above, but it doesn't give the desired effect, especially when using margins. Applying the margin to the Field and Label still leaves the Label floating off-center.

        Where do you expect the Field's labelStyle to be rendered. On the label element or the surround table cell?

        kind regards

        bob

        Show
        Bob Schellink added a comment - Hi Stefax I just attempted an implementation as discussed above, but it doesn't give the desired effect, especially when using margins. Applying the margin to the Field and Label still leaves the Label floating off-center. Where do you expect the Field's labelStyle to be rendered. On the label element or the surround table cell? kind regards bob
        Hide
        Bob Schellink added a comment -

        It might be worth exposing Field methods getParentStlyeClass and getParentStyle that can be applied by parent containers such as Form/Fieldset. The getParentXXX methods are really just hints, since its up to the parent container how and if it will be applied.

        For example Form could add the parentStyle to both the Label and Field cells:

        this statement:
        field.setParentStyle("padding-bottom:20px");

        could render:
        <td style='padding-bottom:20px">LABEL</td> <td style="padding-bottom:20px">FIELD</td>

        Show
        Bob Schellink added a comment - It might be worth exposing Field methods getParentStlyeClass and getParentStyle that can be applied by parent containers such as Form/Fieldset. The getParentXXX methods are really just hints, since its up to the parent container how and if it will be applied. For example Form could add the parentStyle to both the Label and Field cells: this statement: field.setParentStyle("padding-bottom:20px"); could render: <td style='padding-bottom:20px">LABEL</td> <td style="padding-bottom:20px">FIELD</td>
        Hide
        Bob Schellink added a comment -

        Added new Field methods added for controlling the label style and style class.

        Also added new methods for providing style and class hints to a parent container such as Form and FieldSet

        Show
        Bob Schellink added a comment - Added new Field methods added for controlling the label style and style class. Also added new methods for providing style and class hints to a parent container such as Form and FieldSet
        Bob Schellink made changes -
        Status Reopened [ 4 ] Resolved [ 5 ]
        Resolution Fixed [ 1 ]

          People

          • Assignee:
            Unassigned
            Reporter:
            Stefax
          • Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved:

              Development