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

**URL:** https://community.glideapps.com/t/how-to-better-align-required-with-the-component-heading-w-pic/63131
**Category:** Ask for Help
**Created:** [June 25, 2023, 7:26am UTC](https://community.glideapps.com/t/how-to-better-align-required-with-the-component-heading-w-pic/63131 "2023-06-25T07:26:59Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![JamieErvin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jamieervin/32/57900_2.png) [@JamieErvin](https://community.glideapps.com/u/JamieErvin)
#### Post date: [June 25, 2023, 7:26am UTC](https://community.glideapps.com/t/how-to-better-align-required-with-the-component-heading-w-pic/63131/1 "2023-06-25T07:26:59Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/c/9cd97c2285d534076c6a592d0fadf26004892acc.png)

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

---

<div class="post-metadata">

### Author: ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [June 25, 2023, 7:49am UTC](https://community.glideapps.com/t/how-to-better-align-required-with-the-component-heading-w-pic/63131/2 "2023-06-25T07:49:20Z")

</div>

> [@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.

---

<div class="post-metadata">

### Author: ![JamieErvin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jamieervin/32/57900_2.png) [@JamieErvin](https://community.glideapps.com/u/JamieErvin)
#### Post date: [June 25, 2023, 1:04pm UTC](https://community.glideapps.com/t/how-to-better-align-required-with-the-component-heading-w-pic/63131/3 "2023-06-25T13:04:48Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [June 25, 2023, 1:06pm UTC](https://community.glideapps.com/t/how-to-better-align-required-with-the-component-heading-w-pic/63131/4 "2023-06-25T13:06:57Z")

</div>

> [@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?

---

<div class="post-metadata">

### Author: ![JamieErvin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jamieervin/32/57900_2.png) [@JamieErvin](https://community.glideapps.com/u/JamieErvin)
#### Post date: [June 25, 2023, 1:13pm UTC](https://community.glideapps.com/t/how-to-better-align-required-with-the-component-heading-w-pic/63131/5 "2023-06-25T13:13:05Z")

</div>

> [@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.

---

<div class="post-metadata">

### Author: ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [June 25, 2023, 1:33pm UTC](https://community.glideapps.com/t/how-to-better-align-required-with-the-component-heading-w-pic/63131/6 "2023-06-25T13:33:08Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![JamieErvin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jamieervin/32/57900_2.png) [@JamieErvin](https://community.glideapps.com/u/JamieErvin)
#### Post date: [June 25, 2023, 1:43pm UTC](https://community.glideapps.com/t/how-to-better-align-required-with-the-component-heading-w-pic/63131/7 "2023-06-25T13:43:31Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/5/352f91f9c0f0ad000589239eda0470256f7a9b0d.png)

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

---

<div class="post-metadata">

### Author: ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [June 25, 2023, 1:51pm UTC](https://community.glideapps.com/t/how-to-better-align-required-with-the-component-heading-w-pic/63131/8 "2023-06-25T13:51:26Z")

</div>

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.
