4 Replies Latest reply on Sep 10, 2013 12:04 PM by resdesign

    Centering a symbol on a responsive stage

    Matt Abron Abron

      First, I am completly aware that many have posted about this...but after a good part of the day...I can not make it work...I am having some real dificulty in centering an object based on viewport.

       

      I am surprised at how much of a challenge this has turned into

       

      Very Simple proof of functionality...online here: http://www.mattabron.com/animate_test/

       

      1. Isolated out simple functionality

      2. Created a stage called 'test' @ 2600x470pxs (targeting HD monitors to tablet)

      3. Set Stage to 100 percentage width

      stage.jpg

      4. Added a simple shape called 'test1' > converted it to a symbol

      5. Centered on stage

      6. Changed Settings as per below

      element.jpg

      7. Added this into the creationComplete Code Window:

      sym.$("test1").css({

       

         width : '2600px',

       

         margin : '0 auto',

       

         position: 'relative'

       

      });

       

      ***THE RESULT: it is fine at 2600 viewport but for 1024 it does not center.

       

      Here it is online: http://www.mattabron.com/animate_test/

       

      THANKS FOR TAKING THE TIME TO HELP!