Toggling radio buttons and checkboxes

Toggle components are not working for Airtable lists. I’ve been working around it with icons, but the icons move around the screen when checked, which is not ideal.

I’m wondering if a simple fix would be for there to be a few extra input options for the component:

  • Text to enter if field is checked. Default to “true”.
  • Text to enter if field is unchecked. Default to “false”.
  • The field where these words should be searched for an exact match, which dictates whether the box is checked or not.

@bgschust Two issues here: The Checkbox field type in Airtable and the alignment of icons on the screen.

Airtable Checkbox field type
Using a checkbox field type in Airtable brings some challenges:
image

The good news is it works in forms to create or update a record from the Airtable data:
image

The bad news is, as you describe, the toggle is not working in a custom list. @Ben @jeremy I think this is actually a bug.

Workaround:
In Airtable create a formula field with 0(zero) for false and 1 for true:
image
image

In Adalo create a custom list with two icons:
image

Add conditional visibility based on the formula field:
image image

On both icons add an action to update the current record in Airtable:

Result:
2020-07-21_21-48-55 (1)

Keeping the icons in the right spot
The text and the icons with the conditional visibility must be aligned from left to right with no space/gabs between them and no overlaps. When dragging it together make sure you see the red vertical guide that indicates that the objects “touch” each other.
image

Alignment Challenge 2
But what, if I want to aligned the icons on the right of the screen like this:
image

When setting it in the design screen like this:
image

The display in preview is not exactly aligned:

The reason for this is somehow that there are screen elements on the left and the right side from the center of the screen.
To trick the flexbox algorithm behind it I did the following:

image
I changed the screen size to width 700:
image
and aligned all elements except the card background from left to right.
The grey rectangle you see in the screenshot is another “helper” to align elements on the screen.
When everything is setup, I just make it invisible by switching of the background:
image

The result in preview looks like this:

On a screen bigger then 700, the icons would keep the position as you see it in the design screen:
image

2 Likes

Good points. I got my checkboxes to appear a little more stable today using some of those methods, plus a rectangle that matches the background, but it’s still a bit tedious and unpredictable compared to having control over the HTML, CSS, and perhaps JS at some point.

You were either reading my mind or watching me work, haha.

1 Like

That reminds me to create some feature request.
Do you thing this would help:
“Add more flexbox features as advanced properties for a group, such as max/min width to better control horizontal alignment”

I am betting there are concerns about the interface getting too busy, but if there’s a simple fix, it could be worth it. I like the simplicity of the interface but also like the option of going more advanced with HTML/CSS control.

If I could control CSS, I could apply conditional formatting to borders and backgrounds, etc. SVGs would enable graphing and more.

Using a toggle for relationship does not set as we don’t have that ability with external collections. This works when using a checkbox field type in Airtable to designate true/false. Then in Adalo you can use either a toggle or a button with an update action.

In my experience, toggle hasn’t worked with update actions to Airtable, but I could’ve been doing it wrong.

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