# Vertical Action Row (Custom CSS)

**URL:** <https://community.glideapps.com/t/vertical-action-row-custom-css/84969>\
**Category:** Project Showcase\
**Tags:** custom-css\
**Created:** [October 18, 2025, 7:20pm UTC](https://community.glideapps.com/t/vertical-action-row-custom-css/84969 "2025-10-18T19:20:12Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![rayo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rayo/32/91372_2.png) [@rayo](https://community.glideapps.com/u/rayo)\
**Post date:** [October 18, 2025, 7:20pm UTC](https://community.glideapps.com/t/vertical-action-row-custom-css/84969/1 "2025-10-18T19:20:12Z")

</div>

## Vertical Action Row

Reorients the **Action Row** layout vertically, placing buttons below the text and left-aligned for better clarity when text is long.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/c/3c7efcfbff07a52a388b869d53ccfe672bc4d1d0.png)

```auto

/* Vertical Layout for Action Row */

.lc-vertical-action-row div[data-testid="action-row-container"] {
  flex-direction: column; 
}

.lc-vertical-action-row div[class*="action-row"][class*="StyledDiv3"] {
  margin-top: 10px;
  justify-content: flex-start; /* Align actions to left */
}

```

### LessCode Design Library

Check out other similar custom css designs

> **[LessCode Design Library](https://lesscode-design-library.glide.page)**

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [October 18, 2025, 10:11pm UTC](https://community.glideapps.com/t/vertical-action-row-custom-css/84969/3 "2025-10-18T22:11:03Z")

</div>

Nice work!

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [October 18, 2025, 10:12pm UTC](https://community.glideapps.com/t/vertical-action-row-custom-css/84969/4 "2025-10-18T22:12:12Z")

</div>

But why are you providing the code for free here, but need to pay from your app?

---

<div class="post-metadata">

**Author:** ![rayo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rayo/32/91372_2.png) [@rayo](https://community.glideapps.com/u/rayo)\
**Post date:** [October 19, 2025, 2:39am UTC](https://community.glideapps.com/t/vertical-action-row-custom-css/84969/5 "2025-10-19T02:39:30Z")

</div>

This is just one simple design idea. If you subscribe to the app you can see all the rest.

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [October 19, 2025, 3:43am UTC](https://community.glideapps.com/t/vertical-action-row-custom-css/84969/6 "2025-10-19T03:43:11Z")

</div>

Nice idea.