🤔 How to: Better align "Required" with the component heading? (w/ pic)

[JamieErvin]

Hello!

The Component’s layout is 1:1 here but with pretty much all of them the “Required” on Desktop view misaligns in some way.

It looks “the best” when there are 3 columns with space in the middle. However, that setup makes things look terrible in the cell phone view.

Any ideas?

Maybe the alternative is somehow greying out the submit button until all requirements are met? (Not sure how to do that, but I’ve heard it is possible.)

Thanks

[Darren_Murphy]

@JamieErvin

The Component’s layout is 1:1 here but with pretty much all of them the “Required” on Desktop view misaligns in some way.

It looks “the best” when there are 3 columns with space in the middle. However, that setup makes things look terrible in the cell phone view.

I think the best you can do there is set the container alignment to the top.

@JamieErvin

Maybe the alternative is somehow greying out the submit button until all requirements are met? (Not sure how to do that, but I’ve heard it is possible.)

It is possible, but it means using a custom form. Although with a native form, I don’t think the Submit/Cancel button bar has any impact on container alignment, as it’s in a fixed position that can’t be changed.

[JamieErvin]

1. [quote=“Darren_Murphy, post:2, topic:63131”]
   I think the best you can do there is set the container alignment to the top.
   [/quote]

Thank you, I’ll try that.

@Darren_Murphy

It is possible, but it means using a custom form. Although with a native form, I don’t think the Submit/Cancel button bar has any impact on container alignment, as it’s in a fixed position that can’t be changed.

You’re right, my apologies I could have phrased that better. What I meant was that the TRUE priority is that those two are “required”. How that is accomplished, I am totally open to (lol).

My thought process was: If I was able to grey out the Submit button, I would accomplish the goal of making the input fields required. With that done, I could add a note (with an asterisk at the top) stating all the fields are required.

Hopefully that makes sense.

[Darren_Murphy]

@JamieErvin

My thought process was: If I was able to grey out the Submit button, I would accomplish the goal of making the input fields required. With that done, I could add a note (with an asterisk at the top) stating all the fields are required.

Well, that’s the default behaviour with a native form. That is, the Submit button will remain disabled until all required fields have data. Is that not the behaviour that you’re seeing?

[JamieErvin]

@Darren_Murphy

Well, that’s the default behaviour with a native form.

Just so I am on YOUR page, lol, when you say “native form” what do you mean exactly?

I believe this one is a Form Screen > Custom Collection from which I selected the fields I wanted.

I have not seen a submit button but I’ll double check.

[Darren_Murphy]

A native form is one you get when you use a Form Container or a Show Form Screen action.
If you show me a screen shot of the entire builder layout I’ll be able to tell you if it’s a form Screen or not.

[JamieErvin]

Grabbed a quick screenshot. To make this a native form I probably need a different type of screen, I’m guessing.

[Darren_Murphy]

Yeah, what you have there is just a Custom Collection, with perhaps also the beginnings of Custom Form. But you probably don’t want to go down that path.

Try either adding a Form Container to that screen, or alternatively (and probably better) a button to one of your other screens with a Show Form Screen action.

As soon as you do either of the above, you should immediately see the difference.