# Fields component layout

**URL:** https://community.glideapps.com/t/fields-component-layout/73838
**Category:** Ask for Help
**Created:** [June 3, 2024, 2:49pm UTC](https://community.glideapps.com/t/fields-component-layout/73838 "2024-06-03T14:49:57Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![rexcadiz](https://avatars.discourse-cdn.com/v4/letter/r/8baadc/32.png) [@rexcadiz](https://community.glideapps.com/u/rexcadiz)
#### Post date: [June 3, 2024, 2:49pm UTC](https://community.glideapps.com/t/fields-component-layout/73838/1 "2024-06-03T14:49:57Z")

</div>

Hello,  
I’m building a timeline using the fields component. I want to have it show fields in a list vs grid layout. In the desktop version of the app this component always displays values in the grid view.

Is there any way to switch it to a normal list view. Or is the only way to do it is to customize CSS? thank you!

---

<div class="post-metadata">

### Author: ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [June 3, 2024, 2:59pm UTC](https://community.glideapps.com/t/fields-component-layout/73838/2 "2024-06-03T14:59:29Z")

</div>

Can you include a screenshot to clarify what you’re trying to achieve?

---

<div class="post-metadata">

### Author: ![rexcadiz](https://avatars.discourse-cdn.com/v4/letter/r/8baadc/32.png) [@rexcadiz](https://community.glideapps.com/u/rexcadiz)
#### Post date: [June 3, 2024, 3:43pm UTC](https://community.glideapps.com/t/fields-component-layout/73838/3 "2024-06-03T15:43:47Z")

</div>

This is what fields component looks by default on desktop:

 ![Screenshot 2024-06-03 at 17.42.19](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/1/e16a54ca523b89a4724b3fb74b0f8d856f4064c8.png)

And this is what I want it to look like:

 ![Screenshot 2024-06-03 at 17.41.53](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/2/629d3dc7fa88f35bb53a1754f6ec0cbc6ff84568.png)

---

<div class="post-metadata">

### Author: ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [June 3, 2024, 4:13pm UTC](https://community.glideapps.com/t/fields-component-layout/73838/4 "2024-06-03T16:13:17Z")

</div>

You can use HTML only, unless you have another intention. Copy this code into the rich text component or template column.

```auto
<div style="font-size: 14px; line-height: 1.5;">
  <div style="color: var(--gv-text-contextual-pale);">Shipping label emailed</div>
  <div style="color: var(--gv-n900);">Wednesday 6 March 2024 at 22:54:45</div>
  <div style="color: var(--gv-text-contextual-pale);">Form Submission</div>
  <div style="color: var(--gv-n900);">Wednesday 6 March 2024 at 22:55:02</div>
</div>

```

---

<div class="post-metadata">

### Author: ![rexcadiz](https://avatars.discourse-cdn.com/v4/letter/r/8baadc/32.png) [@rexcadiz](https://community.glideapps.com/u/rexcadiz)
#### Post date: [June 3, 2024, 4:17pm UTC](https://community.glideapps.com/t/fields-component-layout/73838/5 "2024-06-03T16:17:49Z")

</div>

This won’t work with a component though as data is dynamic and not static?

---

<div class="post-metadata">

### Author: ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [June 3, 2024, 4:22pm UTC](https://community.glideapps.com/t/fields-component-layout/73838/6 "2024-06-03T16:22:01Z")

</div>

Copy to the template column, replace the {sendDate} and {subDate} with the desired column. Then use rich text to display the template column. This way, you get dynamic values.

```auto
<div style="font-size: 14px; line-height: 1.5;">
  <div style="color: var(--gv-text-contextual-pale);">Shipping label emailed</div>
  <div style="color: var(--gv-n900);">{sendDate}</div>
  <div style="color: var(--gv-text-contextual-pale);">Form Submission</div>
  <div style="color: var(--gv-n900);">{subDate}</div>
</div>

```

---

<div class="post-metadata">

### Author: ![rexcadiz](https://avatars.discourse-cdn.com/v4/letter/r/8baadc/32.png) [@rexcadiz](https://community.glideapps.com/u/rexcadiz)
#### Post date: [June 3, 2024, 4:25pm UTC](https://community.glideapps.com/t/fields-component-layout/73838/7 "2024-06-03T16:25:02Z")

</div>

thank you!

---

<div class="post-metadata">

### Author: ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)
#### Post date: [June 10, 2024, 4:25pm UTC](https://community.glideapps.com/t/fields-component-layout/73838/8 "2024-06-10T16:25:25Z")

</div>

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