Nested component preview erratic

Explorer ,
Aug 29, 2022 Aug 29, 2022

Copy link to clipboard

Copied

I have a nested component menu. On the first preview the hover state activates both the main component and the nested component. After that it works as expected. This is just one section of a much large nav menu. Link 

https://xd.adobe.com/view/02747694-00af-41e3-b5bb-3c5a89ca64a2-5727/

 

Video of preview attached.
Also why is the preview so jittery?

Thanks.

Views

534

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
community guidelines
Community Expert ,
Aug 30, 2022 Aug 30, 2022

Copy link to clipboard

Copied

Hi @carolineh76238118, that's interesting, as I see you pasted the component to an empty test file, would be great if I have it to test myself, maybe I find out some solution to suggest. Happy designing!

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
community guidelines
Explorer ,
Aug 30, 2022 Aug 30, 2022

Copy link to clipboard

Copied

Thanks. Here you go! It's attached.

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
community guidelines
Community Expert ,
Aug 31, 2022 Aug 31, 2022

Copy link to clipboard

Copied

Hi @carolineh76238118, I can't see the file attached, could you please attach it again or maybe upload somewhere via Google drive, dropbox etc and share the link? 

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
community guidelines
Explorer ,
Aug 31, 2022 Aug 31, 2022

Copy link to clipboard

Copied

Akin-Here is a Dropbox link. Thanks again!

https://www.dropbox.com/s/puiofhoc8m2brrn/test.xd?dl=0

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
community guidelines
Explorer ,
Aug 31, 2022 Aug 31, 2022

Copy link to clipboard

Copied

I just replace the link with this one

https://www.dropbox.com/scl/fo/hcgu2f65gu9yhwya4w3p9/h?dl=0&rlkey=tu89ujvhp713v6ma6abve5ois
There is an additional file and video showing multiple components with a toggle button. The toggle to default setting on the lower right component doesn't seem to save and activates the on-off toggle button (top tight) instead. The third component bottom right does not work as anticipated...

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
community guidelines
Community Expert ,
Sep 01, 2022 Sep 01, 2022

Copy link to clipboard

Copied

Thanks for the file and the update Caroline, going to check and share if I find anything useful!

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
community guidelines
Community Expert ,
Sep 01, 2022 Sep 01, 2022

Copy link to clipboard

Copied

If I'm not missing something, I think I resolved the issues, it's about missing interactions that affect toggle states of the nested component, I tried to explain in videos (sorry for the bad audio 😅) :
https://www.youtube.com/watch?v=Fvl7i3HA4sg
https://youtu.be/QRjIE84KxmY

 

And the files are here: https://www.dropbox.com/sh/vs3ld2pmqiut778/AADcnSmz_Li9RHFvtj_czk8_a?dl=0 Let me know if you have any other questions or need any updates!

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
community guidelines
Explorer ,
Sep 01, 2022 Sep 01, 2022

Copy link to clipboard

Copied

Thanks Akin- You have identified the exact issue, except every time I set the transition from the toggle back to the default it will not stay saved! That is also demonstrated in the second video I provided. Could my file be corrupted?

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
community guidelines
Explorer ,
Sep 01, 2022 Sep 01, 2022

Copy link to clipboard

Copied

Please also see file "Test 2.xd" in the same dropbox. How do I build the next component level where only a single tab may be highlighted at a time, and still retain the original component interaction of default, hover, and toggle for each one? Appreciate your time:)

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
community guidelines
Community Expert ,
Sep 02, 2022 Sep 02, 2022

Copy link to clipboard

Copied

"Thanks Akin- You have identified the exact issue, except every time I set the transition from the toggle back to the default it will not stay saved! That is also demonstrated in the second video I provided. Could my file be corrupted?" Oh yes, there must be something with the file as it works in the one I did, good call. I'll check the issue about your other question about Test 2, I'll share if I have any idea to do so 😉

 

Edit: Oh I see what you mean, I can do that only via keeping each tab as an element, not a component (and making the whole tabs bar and content area a big component), if you come up with any better solution, feel free to share 😉 It's going to be again a shameless plug but I'll share a video tutorial I did on my little channel lol (I try to also keep my scrrencasts as unlisted videos there to save space on my dropbox also 🙂) If you haven't tried this solution, this should give you the idea: https://www.youtube.com/watch?v=MWr4xgvQx18  (Also the practice file's link is included at the description there)  Hope this helps!

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
community guidelines
Explorer ,
Sep 18, 2022 Sep 18, 2022

Copy link to clipboard

Copied

Hi Akin- I watched the video and downloaded your file but none of the interactions saved. (see photo attached) There is a new file from me attached called Test 4. It has more states but I can only make it work if the toggle states appear in order, from left to right. I don't know how to create functionality to toggle freely in any random order with more elements. Additionally I added hover states to each which broke everything. So am I right in assuming that a hover will not work in this situation? Any additional suggestions? Thanks again!

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
community guidelines
Explorer ,
Sep 18, 2022 Sep 18, 2022

Copy link to clipboard

Copied

Test 4

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
community guidelines
Explorer ,
Sep 18, 2022 Sep 18, 2022

Copy link to clipboard

Copied

I am having trouble uploading the XD file. here is a dropbox link:

https://www.dropbox.com/s/6jnnvx8kqkff72x/Test%204.xd?dl=0

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
community guidelines
Community Expert ,
Sep 19, 2022 Sep 19, 2022

Copy link to clipboard

Copied

LATEST

Hi @carolineh76238118, I think in order to all interactions to work in any order, you need to define the interactions in every state (like I explained in the video, I defined the interactions for middle and right in the left state, defined for the other two in each state) Don't know if that's the situation or the structure is similar to what I'm talking since I haven't got a chance to examine your latest file yet, but if I find anything going to let you know.

 

Edit: Yes, I checked your file and the issue is, you need to define all tab interactions in each state, in order to make it work for any tap/click combination. You also need to remember to set their toggling back to their default states (for example when "Edition" is active, once I click "edition" it needs to go back to its default state etc) I did for some tabs so adding the edited file to give you an idea: https://www.dropbox.com/s/bhg7nyxu4fq1w44/Test%204-edited.xd?dl=0
Hope this helps!

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
community guidelines

Save time with Adobe Express quick actions