# Changing orientation of hint action button?

**URL:** <https://community.glideapps.com/t/changing-orientation-of-hint-action-button/75492>\
**Category:** Ask for Help\
**Tags:** custom-css\
**Created:** [August 7, 2024, 12:53pm UTC](https://community.glideapps.com/t/changing-orientation-of-hint-action-button/75492 "2024-08-07T12:53:25Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jarvis](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jarvis/32/81377_2.png) [@Jarvis](https://community.glideapps.com/u/Jarvis)\
**Post date:** [August 7, 2024, 12:53pm UTC](https://community.glideapps.com/t/changing-orientation-of-hint-action-button/75492/1 "2024-08-07T12:53:25Z")

</div>

Hi, I don’t know if this will be possible, but asking it in case it is. If I have a hint + an action in the hint, is it possible to make it so that the button is below the hint text? Right now, when I have a large amount of text in the hint, the button and text both get squished like the image below. It looks even worse on mobile devices.

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

Instead, it would make it much easier if it was below the hint text and spanned the entire width, similar to the orientation of this button below (which I made by adding a separate button):

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/8/485138c5c6e3276837ab654cd4449b3ec84f9004.png)

I was wondering if it’s possible to do this via CSS

---

<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:** [August 7, 2024, 1:15pm UTC](https://community.glideapps.com/t/changing-orientation-of-hint-action-button/75492/2 "2024-08-07T13:15:07Z")

</div>

Haven’t you solved the problem without CSS? What is your problem? 😄

---

<div class="post-metadata">

**Author:** ![Jarvis](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jarvis/32/81377_2.png) [@Jarvis](https://community.glideapps.com/u/Jarvis)\
**Post date:** [August 7, 2024, 4:33pm UTC](https://community.glideapps.com/t/changing-orientation-of-hint-action-button/75492/3 "2024-08-07T16:33:09Z")

</div>

Yes technically I have, but visually it would look better if the button were part of the hint.

---

<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:** [August 7, 2024, 4:56pm UTC](https://community.glideapps.com/t/changing-orientation-of-hint-action-button/75492/4 "2024-08-07T16:56:33Z")

</div>

So you mean the button should be inside the Hint component box?  
Actually, you can use a rich text component with HTML and inline CSS instead of custom CSS, as this is much safer against potential changes.

---

<div class="post-metadata">

**Author:** ![Jarvis](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jarvis/32/81377_2.png) [@Jarvis](https://community.glideapps.com/u/Jarvis)\
**Post date:** [August 7, 2024, 5:24pm UTC](https://community.glideapps.com/t/changing-orientation-of-hint-action-button/75492/5 "2024-08-07T17:24:11Z")

</div>

Yes that’s what I meant. Since the hint component already has a button, instead of it being aligned to the right side, just wanted to move it to the bottom.

Also noted about the rich text component.

---

<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:** [August 7, 2024, 5:31pm UTC](https://community.glideapps.com/t/changing-orientation-of-hint-action-button/75492/6 "2024-08-07T17:31:24Z")

</div>

You may try it with GPT if you want to use richtext with HTML. Here is the code for custom CSS for Hint component:

```auto
.oneColumn-hint > div > div > div > div {
 display: block;
}
.oneColumn-hint button {
 width: 100%;
 margin-bottom:10px;
}
.oneColumn-hint p {
 width: 100%;
 padding-bottom:20px;
}

```

---

<div class="post-metadata">

**Author:** ![Jarvis](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jarvis/32/81377_2.png) [@Jarvis](https://community.glideapps.com/u/Jarvis)\
**Post date:** [August 7, 2024, 8:55pm UTC](https://community.glideapps.com/t/changing-orientation-of-hint-action-button/75492/7 "2024-08-07T20:55:30Z")

</div>

This worked perfectly! You’re a lifesaver!

---

<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:** [August 14, 2024, 8:55pm UTC](https://community.glideapps.com/t/changing-orientation-of-hint-action-button/75492/8 "2024-08-14T20:55:48Z")

</div>

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