Example project: https://www.figma.com/file/Ce9DKlCUH7gU0JZWMKu2s3/Component-interactions-example?node-id=0%3A1
I have two problems I’m trying to solve here.
Problem 1: getting nested components to interact as expected
As you can see in the example, I have a page where you click and an overlay pops up. This overlay contains a checkbox list with two variations - device and dimmer. If you tap one of the dimmer line items, you will see the options for “Set to turn ON” and “Set brightness DON’T CHANGE”. As you can see, in the component for the line item, I have it wired up so that when you tap “DON’T CHANGE”, another overlay should pop up that allows the user to set the brightness, etc. but when I try to run the mockup it shows like there is no interaction set for that button.
Am I doing something wrong? Can you not nest things this much or am I just missing something?
Problem 2: list heigh increase when tapped
Since the list bumps itself down when you check one of the line items, it has a bit of an unexpected behavior. I would like for the top of the page to stay the same and for everything below the checked line item to bump down (sorry, this is kind of hard to explain). Right now it looks like its equally bumping up and down so its a bit jarring to the user. Is there an alignment setting or something like that I can use to remedy this?
Thanks!