Uploaded image for project: 'Alloy'
  1. Alloy
  2. ALOY-1071

Can't dynamically override backgroundColor of a view

    Details

    • Type: New Feature
    • Status: Closed
    • Priority: Medium
    • Resolution: Invalid
    • Affects Version/s: None
    • Fix Version/s: None
    • Component/s: Styling
    • Labels:
    • Environment:
      • os: Ubuntu 14.04
      • ti-sdk: 3.2.3.GA

      Description

      I am playing with touch start/end/cancel events to change view colors dynamically, and it seems like I can't override the background color of a view if a background color for that view has been previously defined without the aid of a style class.

      Take a look at this simple example:

      index.xml

      <Alloy>
          <Window id="index">
              <View id="view" class="view"
                  onTouchstart="change_view_background"
                  onTouchend="reset_view_background"
                  onTouchcancel="reset_view_background" />
          </Window>
      </Alloy>
      

      index.js

      $.index.open();
       
       
      function change_view_background(e) {
          console.log('change view background');
          $.addClass($.view, 'clicked');
      }
       
      function reset_view_background(e) {
          console.log('reset view background');
          $.removeClass($.view, 'clicked');
      }
      

      index.tss

      "#view": {
          backgroundColor: "blue",
      }
       
      ".view": {
      }
       
      ".clicked": {
          backgroundColor: "green",
      }
      

      When I click the view, instead of watching its background color change from blue to green, nothing happens.

      If on the other hand I move the backgroundColor definition out of the #view block and into the .view one:

      index.tss

      "#view": {
      }
       
      ".view": {
          backgroundColor: "blue",
      }
       
      ".clicked": {
          backgroundColor: "green",
      }
      

      I can see the background color change from blue to green.

      Why is that happening? And why after the $.removeClass the background color happens to be transparent and not blue? Am I doing something wrong?

        Attachments

          Activity

            People

            • Assignee:
              Unassigned
              Reporter:
              landimatte Matteo Landi
            • Watchers:
              6 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:

                Backbone Issue Sync

                • Backbone Issue Sync is enabled for your project, but we do not have any synchronization info for this issue.

                  Git Integration