Two-Column (Table-style) Edit Screen Layout?

Hi all. Here’s a simple one:

Is there a way to change the layout of the edit screen (or detail screen, for that matter) so that instead of:

Label_1
Textbox_1

Label_2
Textbox_2

I can display it in a tabular 2-column format like:

Label_1                          Textbox_1
Label_2                          Textbox_2

If I have many fields for the user to edit, this layout saves a lot of scrolling. Thanks.

Scott

Yes, you can use CSS, but is tricky… and you might wanna turn it off on mobile…

Well. . . I guess I was hoping for a non-CSS solution.

Actually I do want it on mobile. There are a number of fields, and they’re all either short strings or small numbers. Plenty of width even on a handheld form factor. I actually assumed this would be really easy on Pages, but I’ve only worked with Apps so far.

Time to figure out where the Apps style sheets live. . . unless anybody else has a suggestion.

Thanks!

Scott

you can use basic table component, for simple solution, or compact inline list

This is for an edit page, so the table component, which appears to be read-only, isn’t suitable (correct me if I’m wrong).

I don’t see an option for a “compact inline list” (just good old “inline list”) but maybe that’s a Pages thing.

1 Like

oh… sorry… then only CSS on a custom form, not native Glide form.

Would you consider leaving the label fields empty and entering the label text in the placeholder field?

3 Likes

Good thought. I’ve gone back and forth on empty text over the years. On a “create new” form they can work out pretty well, but on an edit form one doesn’t really ever see the empty text, unless one or more fields happens to be empty.

But definitely an option. Thanks!

2 Likes

I seem to recall that @Manu.n shared a very nice example of side by side input components using CSS. I can’t find it right now, but it would be worth hunting down. Most of his samples were copyable.

1 Like

Here you go.

1 Like

I’m. . . not quite sure what I’m looking at there. You did manage to put 3 controls (er, components) side-by-side, so that’s similar to what I’m trying to accomplish. I only need a single component on each line, but I’d like the label and the control associated with that label to be arranged horizontally rather than vertically.

Thanks.

Ooooh, found it here.

So I kind of get the point, but that made me wonder if anybody’s tried using flexbox on these forms.

This trick of using a rich text component to enter CSS: is that a supported feature? Also I would have expected that component to be above the styled components, so that was a surprise. Finally, are the IDs/classnames used within the form documented anywhere?

Thanks again.

CSS in Glide Apps is not officially supported by Glide but it works and many use CSS to change the design of their apps.

CSS is supported in Pages, however. I’m not sure to what extent as I’ve only built in Pages a few times and never use CSS.

@ThinhDinh and @Lucas_Pires for instance have provided a CSS library, if I recall correctly the library is hosted in Notion, you’ll find the link by searching the community forum.

1 Like
4 Likes

Thanks I’ll check it out! Thanks @nathanaelb and @Lucas_Pires !

3 Likes

Hope you find the Notion list useful!

1 Like