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

**URL:** <https://community.glideapps.com/t/two-column-table-style-edit-screen-layout/51416>\
**Category:** Ask for Help\
**Created:** [October 10, 2022, 9:10pm UTC](https://community.glideapps.com/t/two-column-table-style-edit-screen-layout/51416 "2022-10-10T21:10:17Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![escott](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/escott/32/46156_2.png) [@escott](https://community.glideapps.com/u/escott)\
**Post date:** [October 10, 2022, 9:10pm UTC](https://community.glideapps.com/t/two-column-table-style-edit-screen-layout/51416/1 "2022-10-10T21:10:17Z")

</div>

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:

```auto
Label_1
Textbox_1

Label_2
Textbox_2

```

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

```auto
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

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [October 10, 2022, 9:47pm UTC](https://community.glideapps.com/t/two-column-table-style-edit-screen-layout/51416/2 "2022-10-10T21:47:46Z")

</div>

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

 ![Screen Shot 2022-10-10 at 5.47.17 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/a/8a460526aae83005592c9b1561d2f8d25ae48870.jpeg)

> **[Code BOOK - Desktop](https://code-book-desktop.glideapp.io/)**
>
> share cool CSS, scripts and links

> **[Schedule Appointment](https://schedule-appointment.glideapp.io/)**
>
> Schedule paid appointments, for Google Meet, get calendar reminders, block booked dates and time slots, duration auto adjust to booked time slots, custom stripe checkout

---

<div class="post-metadata">

**Author:** ![escott](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/escott/32/46156_2.png) [@escott](https://community.glideapps.com/u/escott)\
**Post date:** [October 10, 2022, 10:01pm UTC](https://community.glideapps.com/t/two-column-table-style-edit-screen-layout/51416/3 "2022-10-10T22:01:42Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [October 10, 2022, 10:21pm UTC](https://community.glideapps.com/t/two-column-table-style-edit-screen-layout/51416/4 "2022-10-10T22:21:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![escott](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/escott/32/46156_2.png) [@escott](https://community.glideapps.com/u/escott)\
**Post date:** [October 10, 2022, 10:49pm UTC](https://community.glideapps.com/t/two-column-table-style-edit-screen-layout/51416/5 "2022-10-10T22:49:07Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [October 10, 2022, 10:51pm UTC](https://community.glideapps.com/t/two-column-table-style-edit-screen-layout/51416/6 "2022-10-10T22:51:50Z")

</div>

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

 ![Store Demo](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/f/8f5da54d5b5dcaebe6b85e5e426a2e1d6cb56c98.jpeg)

---

<div class="post-metadata">

**Author:** ![nathanaelb](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nathanaelb/32/43079_2.png) [@nathanaelb](https://community.glideapps.com/u/nathanaelb)\
**Post date:** [October 10, 2022, 10:54pm UTC](https://community.glideapps.com/t/two-column-table-style-edit-screen-layout/51416/7 "2022-10-10T22:54:57Z")

</div>

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

 ![Screenshot 2022-10-11 at 00.59.21](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/5/d52b1a652c7bc9e4b960dc5cd243335a52de035f.jpeg)

---

<div class="post-metadata">

**Author:** ![escott](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/escott/32/46156_2.png) [@escott](https://community.glideapps.com/u/escott)\
**Post date:** [October 10, 2022, 11:33pm UTC](https://community.glideapps.com/t/two-column-table-style-edit-screen-layout/51416/8 "2022-10-10T23:33:47Z")

</div>

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!

---

<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:** [October 11, 2022, 1:36am UTC](https://community.glideapps.com/t/two-column-table-style-edit-screen-layout/51416/9 "2022-10-11T01:36:46Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [October 11, 2022, 10:59pm UTC](https://community.glideapps.com/t/two-column-table-style-edit-screen-layout/51416/10 "2022-10-11T22:59:38Z")

</div>

> [@CSS Choice Multiple](https://community.glideapps.com/t/css-choice-multiple/27256/11):
>
> bonjour @SantiagoPerez something like that ??? \<pre\>\<span\>\<style\> /\* Choice 1 (2nd component) \*/ div[id\*='screenScrollView'] \> div \> :nth-child(2) { margin-left:-5px; width:150px; } /\* Choice 2 (3eme component) \*/ div[id\*='screenScrollView'] \> div \> :nth-child(3) { margin-top:-97px; margin-left:115px; width:150px; } /\* Choice 3 (4eme component) \*/ div[id\*='screenScrollView'] \> div \> :nth-child(4) { margin-top:-97px; margin-left:235px; width:150px; } \</style\>\</span\>\</pre\> EDIT: I…

Here you go.

---

<div class="post-metadata">

**Author:** ![escott](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/escott/32/46156_2.png) [@escott](https://community.glideapps.com/u/escott)\
**Post date:** [October 12, 2022, 6:05pm UTC](https://community.glideapps.com/t/two-column-table-style-edit-screen-layout/51416/11 "2022-10-12T18:05:20Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![escott](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/escott/32/46156_2.png) [@escott](https://community.glideapps.com/u/escott)\
**Post date:** [October 12, 2022, 10:38pm UTC](https://community.glideapps.com/t/two-column-table-style-edit-screen-layout/51416/12 "2022-10-12T22:38:52Z")

</div>

Ooooh, found it [here](https://community.glideapps.com/t/vertical-separator-inputs-side-by-side/27609/3).

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.

---

<div class="post-metadata">

**Author:** ![nathanaelb](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nathanaelb/32/43079_2.png) [@nathanaelb](https://community.glideapps.com/u/nathanaelb)\
**Post date:** [October 12, 2022, 10:50pm UTC](https://community.glideapps.com/t/two-column-table-style-edit-screen-layout/51416/13 "2022-10-12T22:50:04Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [October 12, 2022, 11:01pm UTC](https://community.glideapps.com/t/two-column-table-style-edit-screen-layout/51416/14 "2022-10-12T23:01:30Z")

</div>

> [@nathanaelb](#):
>
> @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.

> **[Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.](https://glidecommunity.notion.site/Glide-Community-Resources-8f4cef535db147db83f49f088a47407e)**
>
> A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team

---

<div class="post-metadata">

**Author:** ![escott](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/escott/32/46156_2.png) [@escott](https://community.glideapps.com/u/escott)\
**Post date:** [October 12, 2022, 11:04pm UTC](https://community.glideapps.com/t/two-column-table-style-edit-screen-layout/51416/15 "2022-10-12T23:04:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [October 12, 2022, 11:58pm UTC](https://community.glideapps.com/t/two-column-table-style-edit-screen-layout/51416/16 "2022-10-12T23:58:12Z")

</div>

Hope you find the Notion list useful!