Uploaded image for project: 'Alloy'
  1. Alloy
  2. ALOY-210 Support Dynamic Styling
  3. ALOY-717

Improve "reflow"/"repaint" functionality when adding and removing classes




      Currently when adding/removing position or visual properties from a proxy via the Alloy.addClass() or Alloy.removeClass(), these properties are not reset. To illustrate what I mean, consider the following styles:

      ".label": {
          text: "I'm in the middle",
          width: 150
      ".right": {
          text: "I'll be on the right",
          right: 0

      If I create an XML UI component like this:

      <Label class="label"/>

      The label will say "I'm in the middle" and be centered. If I add the "right" class to it via Alloy.addClass(), as expected, it will then say "I'll be on the right" and will move to the right side of the screen. If I then use Alloy.removeClass() to remove the "right" class, the expectation would be that it would move back to the center and reset the text to the original. Unfortunately, only the text will be reset since it will be reapplied by the "label" class, but right:0 will remain attached to the proxy, keeping it on the right.

      We need to devise a way to automatically, and safely, reset positioning and visual properties on a proxy when removing classes.


      The case given above would behave as expected if you set right:null in the "label" style, like this:

      ".label": {
          text: "I'm in the middle",
          width: 150,
          right: null
      ".right": {
          text: "I'll be on the right",
          right: 0


          Issue Links



              • Assignee:
                tlukasavage Tony Lukasavage
              • Watchers:
                4 Start watching this issue


                • Created:

                  Backbone Issue Sync

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

                    Git Integration