• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
1

Overlapping issue with Components

Community Beginner ,
Jul 15, 2020 Jul 15, 2020

Copy link to clipboard

Copied

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.

Views

2.3K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 2 Correct answers

Adobe Employee , Jul 22, 2020 Jul 22, 2020

Hi There,

Thanks Harshika for sharing file.

I looked into multiple way if we can change order of compoment in layer panel, but compoment in same artboard hold property of ordered in which they are getting arranged.

Only solution for your design is to create two different artboard instead of creating state, wire them using overlay.

I request you if you can raise a feature request for it, so that it will get pick for future development.

 

Thanks, 

Vertika Gupta

Adobe XD

Votes

Translate

Translate
New Here , Jan 18, 2024 Jan 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

...

Votes

Translate

Translate
Adobe Employee ,
Jul 15, 2020 Jul 15, 2020

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 17, 2020 Jul 17, 2020

Copy link to clipboard

Copied

 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

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 20, 2020 Jul 20, 2020

Copy link to clipboard

Copied

Hi Vertika,

 

Did you get a chance to look at the video. Please help me resolve this issue.

 

Here is the link to the video.

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

 

Many Thanks

Vivek

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Jul 20, 2020 Jul 20, 2020

Copy link to clipboard

Copied

Hi Vivek, 

Sorry to say I tried to create near by artboard, but i was not facing same issue. Can you share the XD file with me privately on email ID by clicking on my name.

 

Thanks, 

Vertika Gupta

Adobe XD

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 20, 2020 Jul 20, 2020

Copy link to clipboard

Copied

Hi Vertika,

 

I cant find your email address. Also there is no option to attach a file here. 

 

Please write your email address here so that i can send the source file from my official mailbox.

 

Many Thanks

Vivek

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Jul 21, 2020 Jul 21, 2020

Copy link to clipboard

Copied

Hey Vivek,

 

You can upload the file to a shared location such as Creative Cloud or Dropbox and share the URL with Vertika by clicking on her name and there you will see an option to send a message.

 

Please see attached screenshot

 

Screenshot_4.png

 

If you face trouble sending the message to her. Please share the file with me at: haverma@adobe.com and I will share the file with her.

 

We will try our best to help.

 

Thanks,

Harshika

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Jul 21, 2020 Jul 21, 2020

Copy link to clipboard

Copied

Thanks, Vivek. I received your file and I have forwarded it to Vertika for investigation. 

 

Regards,

Harshika

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Jul 22, 2020 Jul 22, 2020

Copy link to clipboard

Copied

Hi There,

Thanks Harshika for sharing file.

I looked into multiple way if we can change order of compoment in layer panel, but compoment in same artboard hold property of ordered in which they are getting arranged.

Only solution for your design is to create two different artboard instead of creating state, wire them using overlay.

I request you if you can raise a feature request for it, so that it will get pick for future development.

 

Thanks, 

Vertika Gupta

Adobe XD

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Nov 23, 2021 Nov 23, 2021

Copy link to clipboard

Copied

Yes, but if you use overlay with art boards, have in mind that the issue now will be with the limitation of the viewport size.... no right solution for a simple issue!!  Not helping to save time...

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 10, 2021 May 10, 2021

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 18, 2024 Jan 18, 2024

Copy link to clipboard

Copied

LATEST

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines