Highlighted

Hover state of component automatically shifting by 4px on the Y axis

New Here ,
Sep 03, 2020

Copy link to clipboard

Copied

Hello all, I've created a component and a hover state for it. Both default and hover state are exactly 960px square. When I toggle between the two the Y measurement keeps changing by 4 px. So, Defaukt state is 960px high with a Y measurement of 200px. When I click on the hover state the Y measurement automatically resets to 204px. If I manually change it to 200px then the Y measurement of the Default state automatically resets to 196px. In both states the dimension of 960px square does not change, I just move around some components inside the 960x960px panel, I'm new to XD so there may be an obvious answer, but what am I missing?

Adobe Community Professional
Correct answer by Spas K. | Adobe Community Professional

It's because one time you edited the contents within the component, and after that you are trying to fix it by moving the component itself, which has no effect. When you are editing stuff in the component, make sure you are actually inside it, like this:

 

Annotation 2020-09-04 120751.png          

If you select the component itself, and move it, you move it along with all its states and elements, that are relative to its position, so everything will stay the same within it. If you move the rectangle within the component, then you are making actual changes.

 

If that doesn't help, upload screenshots of what you're making specifically, that include the opened component in the layers panel, so we can better see what's happening 🙂

Views

44

Likes

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

Hover state of component automatically shifting by 4px on the Y axis

New Here ,
Sep 03, 2020

Copy link to clipboard

Copied

Hello all, I've created a component and a hover state for it. Both default and hover state are exactly 960px square. When I toggle between the two the Y measurement keeps changing by 4 px. So, Defaukt state is 960px high with a Y measurement of 200px. When I click on the hover state the Y measurement automatically resets to 204px. If I manually change it to 200px then the Y measurement of the Default state automatically resets to 196px. In both states the dimension of 960px square does not change, I just move around some components inside the 960x960px panel, I'm new to XD so there may be an obvious answer, but what am I missing?

Adobe Community Professional
Correct answer by Spas K. | Adobe Community Professional

It's because one time you edited the contents within the component, and after that you are trying to fix it by moving the component itself, which has no effect. When you are editing stuff in the component, make sure you are actually inside it, like this:

 

Annotation 2020-09-04 120751.png          

If you select the component itself, and move it, you move it along with all its states and elements, that are relative to its position, so everything will stay the same within it. If you move the rectangle within the component, then you are making actual changes.

 

If that doesn't help, upload screenshots of what you're making specifically, that include the opened component in the layers panel, so we can better see what's happening 🙂

Views

45

Likes

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
Sep 03, 2020 0
Adobe Employee ,
Sep 03, 2020

Copy link to clipboard

Copied

Hi there,

 

Welcome to the Adobe XD Community!.

 

Thank you for reaching out and using Adobe XD. Would you mind sharing the OS and XD version of your machine? Please check if it's happening with every components or with this component only.

 

We will try our best to help.

 

Thanks,

Harshika

Likes

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
Reply
Loading...
Sep 03, 2020 0
Adobe Community Professional ,
Sep 04, 2020

Copy link to clipboard

Copied

It's because one time you edited the contents within the component, and after that you are trying to fix it by moving the component itself, which has no effect. When you are editing stuff in the component, make sure you are actually inside it, like this:

 

Annotation 2020-09-04 120751.png          

If you select the component itself, and move it, you move it along with all its states and elements, that are relative to its position, so everything will stay the same within it. If you move the rectangle within the component, then you are making actual changes.

 

If that doesn't help, upload screenshots of what you're making specifically, that include the opened component in the layers panel, so we can better see what's happening 🙂

Likes

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
Reply
Loading...
Sep 04, 2020 2
New Here ,
Sep 04, 2020

Copy link to clipboard

Copied

Awesome, thank you! You're right, I didn't realise I'd accidentally moved the panel inside the component hover state. Now fixed. Thank you!

Likes

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
Reply
Loading...
Sep 04, 2020 1
Adobe Employee ,
Sep 06, 2020

Copy link to clipboard

Copied

Glad to hear that the issue is resolved. Please feel free to reach out to us in the future for any query related to XD. We would be happy to help.

 

Great observation, Spas K and thanks for your contribution to the post and helping the customer. We appreciate your response on XD community. 

 

Thanks,

Harshika

Likes

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
Reply
Loading...
Sep 06, 2020 0