Skip to main content
V
vivekanandak95833733
Participant
July 15, 2020
Answered

Overlapping issue with Components

  • July 15, 2020
  • 3 replies
  • 3334 views

How do I fix the overlapping components in my design. I’ve got two buttons adjacent to each other and each with two states inside them. One of the states is bringing a pop up dialog. When the dialog pops up, I see the other button overlapping onto this. I’ve tried the to arrange them multiple times like sending the other component back to the dialog. Please help.

      Correct answer Martin224147498mr8

      Hello, I know it is a few Years ago but I kinda have a solution to the problem.
      Because i had the same problem when i want pictures to pop up. it is fine with the first one but then the next one is under the first one and the 3 is under the 2 first pictures and so on.

      so what i did was:
      1. Take the 3 image and place them where i want them.
      2. Mark all 3 pictures and put them in 1 Component

      3. Make the Default State so you can see all 3 pictures
      4. Make 3 new states - "State 2" "State 3" "State 4"
      5. Do so the "State 2" pop up the first Picture and then Either hide or lower the opacity to 0% on the 2 other pictures
      6. Pick "State 3" and make it pop up, and hide the first picture and the 3th picture
      7. Do the same for "State 4" with the 3th Picture

      Then go to "Prototype"
      1. Make sure you are on the Component layer in the Default State and pick the first picture and make the trigger to "Tap" and Choose Destination to "State 2"
      2. 2. picture choose "State 3" - 3. picture Choose "State 4"
      3. Go back to the Component Layer and Choose "State 2" - and make a tap for that to "Default State"

      4- then "State 3" to "Default State" and the same for "State 4"

      That's the way i came around this problem.


      Hope this will help anyone who need that guide

      Best regards Martin

      3 replies

      M
      Martin224147498mr8Correct answer
      Participant
      January 18, 2024

      Hello, I know it is a few Years ago but I kinda have a solution to the problem.
      Because i had the same problem when i want pictures to pop up. it is fine with the first one but then the next one is under the first one and the 3 is under the 2 first pictures and so on.

      so what i did was:
      1. Take the 3 image and place them where i want them.
      2. Mark all 3 pictures and put them in 1 Component

      3. Make the Default State so you can see all 3 pictures
      4. Make 3 new states - "State 2" "State 3" "State 4"
      5. Do so the "State 2" pop up the first Picture and then Either hide or lower the opacity to 0% on the 2 other pictures
      6. Pick "State 3" and make it pop up, and hide the first picture and the 3th picture
      7. Do the same for "State 4" with the 3th Picture

      Then go to "Prototype"
      1. Make sure you are on the Component layer in the Default State and pick the first picture and make the trigger to "Tap" and Choose Destination to "State 2"
      2. 2. picture choose "State 3" - 3. picture Choose "State 4"
      3. Go back to the Component Layer and Choose "State 2" - and make a tap for that to "Default State"

      4- then "State 3" to "Default State" and the same for "State 4"

      That's the way i came around this problem.


      Hope this will help anyone who need that guide

      Best regards Martin

        A
        AV1LAY
        Participant
        May 10, 2021

        I have a similar kinda issue. I have a home screen with a bunch of buttons leading to a different artboard, and component (a menu button) that pulls up a new page (eg. "page-ABC") over the homescreen. This new page is not a new artboard but a different state inside the menu componenet, so it overlaps onto the homescreen. But since the homescreen is still their in the back with its own respective buttons, they are still clickable through my new "page-ABC".

        I wanna disable those homescreen buttons when they're overlapped by some other object OR, make one component trigger movement in another component that way I can trigger the menu to move the homescreen buttons out of the artboard.

         

        But I can't seem to find a way to do it.

        V
        Community Manager
        Vertika GuptaCommunity Manager
        Community Manager
        July 16, 2020

        Hi Vivek,

        Sorry to hear that, 

        Can you please let me know how you created pop up dialog, what color and interaction you use for that.

        and how you created your second button with what color and what interaction.

        It will be great if you can attach video or screenshot of the issue you are facing.

         

        Thanks, 

        Vertika Gupta

        Adobe XD

          V
          vivekanandak95833733Author
          Participant
          July 17, 2020

           Thanks for your response.

           

          Here is the link to the video

           

          https://www.youtube.com/watch?v=QS9TvzYZepw&feature

           

          Please let me know if you need any other information.

           

          Many Thanks

          Vivek

           

           

          Terms & ConditionsAccessibility statement
          Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices