Icons besides a form not rendering in the right location

I have a form and beside the input dropdowns, I have info icons that will pull up directions on how to properly select the dropdown information. The form and icon have proper separation but for some reason it does not render in the right position when I preview app.

Here is the app editor with the icons lined up properly:

Here is what it looks like in the previewer.

image

Is this a bug?

Did you group each info icon with the correct select dropdown component?

I’m using the form component and not individual dropdown components. I also tried to group with the form and that did not work either.

I would try putting a dropdown next to an info icon, then group both of those compents, and then just multiply however many you want

Issue here is I need my dropdowns to be required fields. I have to many to put a sometimes stipulation on the action of creating a record.

Then group each info icon with the form.

I tried that too and it’s still rendering weird. Here is a screenshot with them grouped.

Here is the app preview.

image

Appreciate you giving me some pointers. Got any other ideas of what could be causing this?

Did you center each info icon with each dropdown?

Is this what you are referring to?

Yes, but make sure each icon is centered with the dropdown

It’s not snapping to be centered. Think that is the problem?

Yes, I’m pretty sure that’s the problem… If that’s not the problem I really don’t know what is…

What’s the best way to get the cursor to pick up the center justify snap?

Could you take a screen recording so I could see how you’re doing it?

ezgif-6-227cdbe70d53

Try zooming in more to the screen then try it…

ezgif-6-227cdbe70d53

I ended up putting a contained button at the top of my form that links to a modal that has all of the instructions for filling out the form. If anyone comes up with a better solution, please let me know.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.