Checkbox label with links

Hi,

I am currently finishing my first app :slight_smile:

I am wondering how to have a checkbox with a label containing two links. I tried to add multiple text components but the alignment is broken on my phone. What is your best way to do something similar?

Many thanks!

On Adalo:

On my iPhone:

Can you take a screenshot of how the layers look in the screen by clicking them to show the outlines?

Not directly related to the original poster’s question, but is that the way this sort of thing is done in Adalo? I’m talking about lining up several text components to insert a link into a sentence.

I’ve been wanting to do exactly what she’s doing (creating a terms and conditions acceptance block, with a link to the t&c). Just haven’t settled on the best way to create it.

I use 3 screens to accomplish this.

  1. Agreement (with checkbox and links)
  2. Terms of Service
  3. Privacy Policy

User database has 2 parameters that we need: a True/False parameter and a Date & Time parameter.
We’ll call the true/false parameter “Agreed To TOS” and the date/time to “Agreement Time”.

The checkbox can be a toggle icon that sets the logged-in user “Agreed to TOS” to true when clicked and update the agreement time parameter to the current time. This allows me to know that they have agreed to the terms and the exact date & time they agreed.

For the actual components, I have 4. A rectangle, Icon toggle, and 2 Text components.
Layer them like so:

The 2 text components should link to each term based on which line they are.
The first text component says “I agree to the Terms of service” and the 2nd line says “& Privacy Policy”.

Group the 2 text components together. Drop in the checkbox toggle and a rectangle. Set the rectangle to the size of the full height of both text components and line up the text and icons within the center of the rectangle and group those together.



Oh, then, set the rectangle’s background color to transparent.

Last, set the continue button’s visibility to sometimes visible if the logged-in user Agreed to TOS is true.

2 Likes

Hi, try to group your textes, and see if any of them overlap another (yellow box)

Hi,
Thank you et sorry for the late reply, here is the recording showing outlines: Recordit: Record screencasts fast & free! with GIF Support!

I do have some overlap but when I try to reduce the text components, the text is taking two lines:
https://recordit.co/A3OiffiSrl

It looks like your text components go outside of the rectangle that you have them over. Adjust the size of the text components to be slightly smaller so they fit within the rectangle.

Another try:
https://recordit.co/L4HVRkFObV

On iOS:

What happens if you put a rectangle ( matching the text component size and set that rectangle arrangement to bring to front clicking three dots of the rectangle and set the rectangle to transparent ) on every text component as a container and group the text and rectangle and group again that all groups together?


Now the two texts overlap each other. Even though it’s just slightly, it can throw off the alignment.

With a fixed position on the group, the alignments are ok… but the group is at the bottom!

So hard to do a so simple thing :frowning:

@jlerp did you tried like this?

yes, without any success.

I will try to put it on App Store with this version…

Adalo:

iPhone:

Hi, to overcome layouts and grouping issues, I made something like this for accepting terms and conditions before sign the user up. Orange textes are clickable links.


If the box is ticked, the sign-up process will continue, if not, an advice will appear

1 Like

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