# Alignment of labels with asterisks in app forms

**URL:** <https://forum.communityhealthtoolkit.org/t/alignment-of-labels-with-asterisks-in-app-forms/3057>\
**Category:** Development\
**Created:** [September 25, 2023, 8:10am UTC](https://forum.communityhealthtoolkit.org/t/alignment-of-labels-with-asterisks-in-app-forms/3057 "2023-09-25T08:10:17Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![cliff](https://communityhealthtoolkit.b-cdn.net/user_avatar/forum.communityhealthtoolkit.org/cliff/32/1638_2.png) [@cliff](https://forum.communityhealthtoolkit.org/u/cliff)\
**Post date:** [September 25, 2023, 8:10am UTC](https://forum.communityhealthtoolkit.org/t/alignment-of-labels-with-asterisks-in-app-forms/3057/1 "2023-09-25T08:10:18Z")

</div>

Hello community

Wondering if there is a way to align the labels with the asterisks `*` on the same line with fields that have been marked as required in app forms for example` First Name` with the asterisks `*` in the screenshot below

 ![Screenshot 2023-09-25 at 9.58.11 AM](https://communityhealthtoolkit.b-cdn.net/uploads/default/original/2X/f/f0f57c07376e963d20af168727758346e5f9e33b.png)

cc @jkuester @diana

---

<div class="post-metadata">

**Author:** ![jkuester](https://communityhealthtoolkit.b-cdn.net/user_avatar/forum.communityhealthtoolkit.org/jkuester/32/806_2.png) [@jkuester](https://forum.communityhealthtoolkit.org/u/jkuester)\
**Post date:** [September 25, 2023, 2:13pm UTC](https://forum.communityhealthtoolkit.org/t/alignment-of-labels-with-asterisks-in-app-forms/3057/2 "2023-09-25T14:13:20Z")

</div>

Can you share more about the exact xlsxform row that results in this behavior? I think it is unexpected to have the asterisk on a second line like in your screenshot. I tested with a required string that had a hint and it looks like this (on both `3.9.0` and `4.3+`):

![image](https://communityhealthtoolkit.b-cdn.net/uploads/default/original/2X/a/a2b0711fd60e8f61b694d6877d91d1c7dcaa92b7.png)

Also, what is your CHT version? Is this happening in a browser or cht-android app (and which version)? Thanks!

---

<div class="post-metadata">

**Author:** ![cliff](https://communityhealthtoolkit.b-cdn.net/user_avatar/forum.communityhealthtoolkit.org/cliff/32/1638_2.png) [@cliff](https://forum.communityhealthtoolkit.org/u/cliff)\
**Post date:** [September 25, 2023, 3:00pm UTC](https://forum.communityhealthtoolkit.org/t/alignment-of-labels-with-asterisks-in-app-forms/3057/3 "2023-09-25T15:00:51Z")

</div>

> [@jkuester](#):
>
> what is your CHT version?

thanks @jkuester , am using `3.17.1`

> [@jkuester](#):
>
> Is this happening in a browser or cht-android app

its happening in the browser

> [@jkuester](#):
>
> Can you share more about the exact xlsxform row that results in this behavior?

 ![Screenshot 2023-09-25 at 5.59.00 PM](https://communityhealthtoolkit.b-cdn.net/uploads/default/original/2X/4/4a6de83adb4bab75286fe26b2e4bdbb963bfd59e.jpeg)

---

<div class="post-metadata">

**Author:** ![jkuester](https://communityhealthtoolkit.b-cdn.net/user_avatar/forum.communityhealthtoolkit.org/jkuester/32/806_2.png) [@jkuester](https://forum.communityhealthtoolkit.org/u/jkuester)\
**Post date:** [September 25, 2023, 7:01pm UTC](https://forum.communityhealthtoolkit.org/t/alignment-of-labels-with-asterisks-in-app-forms/3057/4 "2023-09-25T19:01:23Z")

</div>

Well, good news and bad news. The good news is that I have figured out what is going on here (mostly). The bad news is that it appears to be a bug in the form CSS. Basically. the asterisk appears to be aligned on the _next line_ whenever you include a required field inside a group that has the `summary` appearance. (Note that your `person` group has the appearance `field-list summary`.) I have logged a new issue for this behavior:

> <https://github.com/medic/cht-core/issues/8585>
>
> \*\*Describe the bug\*\*
> Originally reported \[on the forum\](https://forum.community…healthtoolkit.org/t/alignment-of-labels-with-asterisks-in-app-forms/3057/1). If you have a \`required\` field in your form, you will see an asterisk (\`\*\`) at the end of the label to indicate the question is required. However, if that field happens to be in a group with the \`summary\` appearance, then the asterisk will be shown on a new line below the label (instead of just being appended to the same line as the label).  
> 
> \*\*Expected behavior\*\*
> !\[image\](https://github.com/medic/cht-core/assets/8441903/20867cc2-ffa2-4c7f-b2b6-e94adcd70bb8)
> 
> 
> \*\*Actual behavior\*\*
> !\[image\](https://github.com/medic/cht-core/assets/8441903/b000b735-822a-482a-94e7-cb3b4e5cc428)
> 
> \*\*Additional Information\*\*
> I have confirmed this behavior from \`master\` back to \`3.17.1\`, but I image it goes back much further than that.

---

<div class="post-metadata">

**Author:** ![cliff](https://communityhealthtoolkit.b-cdn.net/user_avatar/forum.communityhealthtoolkit.org/cliff/32/1638_2.png) [@cliff](https://forum.communityhealthtoolkit.org/u/cliff)\
**Post date:** [September 26, 2023, 6:28am UTC](https://forum.communityhealthtoolkit.org/t/alignment-of-labels-with-asterisks-in-app-forms/3057/5 "2023-09-26T06:28:39Z")

</div>

> [@jkuester](#):
>
> Well, good news and bad news. The good news is that I have figured out what is going on here (mostly). The bad news is that it appears to be a bug in the form CSS. Basically. the asterisk appears to be aligned on the _next line_ whenever you include a required field inside a group that has the `summary` appearance. (Note that your `person` group has the appearance `field-list summary`.) I have logged a new issue for this behavior:

thanks @jkuester 👍 for the good and bad news 🙂

---

<div class="post-metadata">

**Author:** ![gareth](https://communityhealthtoolkit.b-cdn.net/user_avatar/forum.communityhealthtoolkit.org/gareth/32/62_2.png) [@gareth](https://forum.communityhealthtoolkit.org/u/gareth)\
**Post date:** [April 1, 2024, 9:37am UTC](https://forum.communityhealthtoolkit.org/t/alignment-of-labels-with-asterisks-in-app-forms/3057/6 "2024-04-01T09:37:13Z")

</div>

@cliff Just to note that this has been fixed and released in CHT Core 4.6.0

---

<div class="post-metadata">

**Author:** ![cliff](https://communityhealthtoolkit.b-cdn.net/user_avatar/forum.communityhealthtoolkit.org/cliff/32/1638_2.png) [@cliff](https://forum.communityhealthtoolkit.org/u/cliff)\
**Post date:** [April 2, 2024, 2:33pm UTC](https://forum.communityhealthtoolkit.org/t/alignment-of-labels-with-asterisks-in-app-forms/3057/7 "2024-04-02T14:33:26Z")

</div>

thanks @gareth for this update
