Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-16517

MobileWeb: Button "font" property not working

    Details

      Description

      In Mobile Web "font" property of Ti.UI.Button isn't working properly.
      Code below shows how a Label and a Button are being placed in the screen and both of their "font" properties are being set; Label font property works well, but Button's font never gets changed.

      View:

      <Alloy>
      <Window class="container">
      <Label id="label" text="This is a label"/>
      <Button id="button" title="This is a button"/>
      </Window>
      </Alloy>

      Tss file

      "Label": {
      width: Ti.UI.SIZE,
      height: Ti.UI.SIZE,
      color: "#000",
      font:

      { fontFamily: "Helvetica-Light", fontSize: 25 }

      },
      "#button" : {
      width: Ti.UI.SIZE,
      height: Ti.UI.SIZE,
      borderColor: "transparent",
      backgroundColor: "transparent",
      font:

      { fontFamily: "Helvetica-Light", fontSize: 25 }

      }

      This gets generated in the Resources folder as follows:

      $.__views.label = Ti.UI.createLabel({
      width: Ti.UI.SIZE,
      height: Ti.UI.SIZE,
      color: "#000",
      font:

      { fontFamily: "Helvetica-Light", fontSize: 25 }

      ,
      id: "label",
      text: "This is a label"
      });

      $.__views.button = Ti.UI.createButton({
      width: Ti.UI.SIZE,
      height: Ti.UI.SIZE,
      borderColor: "transparent",
      backgroundColor: "transparent",
      font:

      { fontFamily: "Helvetica-Light", fontSize: 25 }

      ,
      id: "button",
      title: "This is a button"
      });

      So it seems font property is being set, BUT when the application runs in a browser, the font of the label gets correctly styled and the font of the button remains the same as the default is set.

      This is how the style looks in browsers inspector:

      Label style

      element.style

      { overflow: visible; white-space: normal; color: rgb(0, 0, 0); font-family: Helvetica-Light; font-size: 25px; left: 0px; top: 0px; width: 157px; height: 29px; }

      Button style (no font-family/font-size generated at all):

      element.style

      { overflow: visible; white-space: normal; text-align: center; left: 0px; top: 0px; width: 109px; height: 18px; }

        Attachments

        1. TIMOB-16517_Screenshoot.jpg
          64 kB
          Eduardo Gomez

          Issue Links

            Activity

              People

              • Assignee:
                cbarber Chris Barber
                Reporter:
                carolina_lopez Carolina Lopez
              • Watchers:
                0 Start watching this issue

                Dates

                • Due:
                  Created:
                  Updated:
                  Resolved:

                  Backbone Issue Sync

                  • Titanium SDK/CLI <> Titanium Mobile
                    Synced with:
                    TIMOB-18407
                    Sync status:
                    ERROR
                    Last received:
                    Last sent:

                    Git Integration