# Need help with aligning buttons
**URL:** https://community.glideapps.com/t/need-help-with-aligning-buttons/50117
**Category:** Ask for Help
**Created:** [September 25, 2022, 6:38am UTC](https://community.glideapps.com/t/need-help-with-aligning-buttons/50117 "2022-09-25T06:38:43Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)
#### Post date: [September 25, 2022, 6:38am UTC](https://community.glideapps.com/t/need-help-with-aligning-buttons/50117/1 "2022-09-25T06:38:43Z")
Im able to create a row of icons that can link out to external sites using html and css only.
However, I am interested in doing the same thing but using button components so I can get additional actions other than open link.
Anybody have any ideas on how to achieve?
---
### Author:  [@Uzo](https://community.glideapps.com/u/Uzo)
#### Post date: [September 25, 2022, 6:55am UTC](https://community.glideapps.com/t/need-help-with-aligning-buttons/50117/2 "2022-09-25T06:55:14Z")
use CSS images with actions… not buttons, much easier!
---
### Author:  [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)
#### Post date: [September 25, 2022, 6:57am UTC](https://community.glideapps.com/t/need-help-with-aligning-buttons/50117/3 "2022-09-25T06:57:16Z")
Like add 3 separate image components and use css to align?
---
### Author:  [@Uzo](https://community.glideapps.com/u/Uzo)
#### Post date: [September 25, 2022, 6:58am UTC](https://community.glideapps.com/t/need-help-with-aligning-buttons/50117/4 "2022-09-25T06:58:26Z")
yes… or just place the image link directly into CSS…
> **[Code BOOK - Desktop](https://code-book-desktop.glideapp.io/)**
>
> share cool CSS, scripts and links
---
### Author:  [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [September 25, 2022, 7:07am UTC](https://community.glideapps.com/t/need-help-with-aligning-buttons/50117/5 "2022-09-25T07:07:05Z")
Are the number of icons fixed?
For something like that, I think I’d just use an Inline List, and use Hero Icons as the images.
Relatively simple, little or no CSS required.
---
### Author:  [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)
#### Post date: [September 25, 2022, 7:13am UTC](https://community.glideapps.com/t/need-help-with-aligning-buttons/50117/6 "2022-09-25T07:13:40Z")
There is a maximum number of icons, but could range from 0-4 depending on if the user adds the corresponding link. Thus the horizontal list would be dynamic.
Also would like unique actions per icon as not all will open an external link.
I can try and see if an inline list will work. Thanks!
---
### Author:  [@Uzo](https://community.glideapps.com/u/Uzo)
#### Post date: [September 25, 2022, 7:16am UTC](https://community.glideapps.com/t/need-help-with-aligning-buttons/50117/7 "2022-09-25T07:16:21Z")
you can replace image links using a template column… this way, you have more freedom arranging your buttons… the inline list has limitations… also it might not work well with CSS on many devices or OS
---
### Author:  [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)
#### Post date: [September 25, 2022, 7:17am UTC](https://community.glideapps.com/t/need-help-with-aligning-buttons/50117/8 "2022-09-25T07:17:46Z")
Ill try tomorrow and report back my results. Thanks for the suggestions!
---
### Author:  [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [September 25, 2022, 7:57am UTC](https://community.glideapps.com/t/need-help-with-aligning-buttons/50117/9 "2022-09-25T07:57:11Z")
> [@Joe\_Gabriele](#):
>
> There is a maximum number of icons, but could range from 0-4 depending on if the user adds the corresponding link. Thus the horizontal list would be dynamic.
Inline List using a tiles layout can have up to 4 side by side, so that would work out.
Only thing is if you have less than 4 then they’ll be left aligned, which might look a bit wonky.
But it would probably be possible to get them centred with a bit of CSS. Of course that would need to be dynamic, taking the number of items into account - so could get a bit fiddly.
---
### Author:  [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)
#### Post date: [September 25, 2022, 1:53pm UTC](https://community.glideapps.com/t/need-help-with-aligning-buttons/50117/10 "2022-09-25T13:53:07Z")
I wad able to use a Title Component to make it look exactly like one of the above icons, however still lost on aligning multiple Title Components together.
And yes the Inline list option didnt work for this use case.
---
### Author:  [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [September 25, 2022, 2:08pm UTC](https://community.glideapps.com/t/need-help-with-aligning-buttons/50117/11 "2022-09-25T14:08:43Z")
Just out of curiosity, what was the challenge with the Inline List?
Was it just not being able to get them centred, or something else?
---
### Author:  [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)
#### Post date: [September 25, 2022, 2:49pm UTC](https://community.glideapps.com/t/need-help-with-aligning-buttons/50117/12 "2022-09-25T14:49:29Z")
Basically, if I have up to 4 List Items, make the Inline List Display 4 items Horizontally, filter the list based on if Link provided and only 3 items have links, then the list is no longer centered.
In addition, I cant assign individual actions to each List Item as they all act the same. I would like multiple components with Actions (title, image, rich text, etc) that are aligned horizontally. This way, 1 icon can open a form, another opens an external link, another opens compose email, etc.
---
### Author:  [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)
#### Post date: [September 25, 2022, 2:59pm UTC](https://community.glideapps.com/t/need-help-with-aligning-buttons/50117/13 "2022-09-25T14:59:28Z")
> [@Joe\_Gabriele](#):
>
> the list is no longer centered
As long as you have a value in the table that is the source of your screen that indicates if you need 3 items it 4 items, then you could use that as a visibility condition to show either a 3 wide list or a 4 wide list.
> [@Joe\_Gabriele](#):
>
> I cant assign individual actions to each List Item as they all act the same
You can definitely assign individual actions to each list item. You just need a column value in each list item row that you can use with an IF condition in a custom action to identify which action you want to happen when you click on an item in your list.
---
### Author:  [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [September 25, 2022, 3:00pm UTC](https://community.glideapps.com/t/need-help-with-aligning-buttons/50117/14 "2022-09-25T15:00:05Z")
> [@Joe\_Gabriele](#):
>
> Basically, if I have up to 4 List Items, make the Inline List Display 4 items Horizontally, filter the list based on if Link provided and only 3 items have links, then the list is no longer centered.
mmm, I can’t help with that, but one of the CSS gurus might be able to.
> [@Joe\_Gabriele](#):
>
> In addition, I cant assign individual actions to each List Item as they all act the same. I would like multiple components with Actions (title, image, rich text, etc) that are aligned horizontally. This way, 1 icon can open a form, another opens an external link, another opens compose email, etc.
yeah you can. Use a custom action with a separate conditional branch for each list item.
---
### Author:  [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [September 25, 2022, 3:01pm UTC](https://community.glideapps.com/t/need-help-with-aligning-buttons/50117/15 "2022-09-25T15:01:02Z")
> [@Jeff\_Hager](#):
>
> As long as you have a value in the table that is the source of your screen that indicates if you need 3 items it 4 items, then you could use that as a visibility condition to show either a 3 wide list or a 4 wide list.
oooh, nice trick 👍
and so obvious, haha
---
### Author:  [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)
#### Post date: [September 25, 2022, 3:18pm UTC](https://community.glideapps.com/t/need-help-with-aligning-buttons/50117/16 "2022-09-25T15:18:31Z")
Ah perfect, that works! Just need to figure out the css to reduce image size of each. Interestingly enough. I have a Hero Icon at 50px and use circle image size yet image is quite large. Reducing the Hero Size doesnt seem to effect the Inline Image Size. But this is definitely putting me on the right track!
---
### Author:  [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)
#### Post date: [September 25, 2022, 3:28pm UTC](https://community.glideapps.com/t/need-help-with-aligning-buttons/50117/17 "2022-09-25T15:28:54Z")
Bottom is the new inline list with custom actions for each icon. Nice!
---
### Author:  [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)
#### Post date: [September 25, 2022, 4:11pm UTC](https://community.glideapps.com/t/need-help-with-aligning-buttons/50117/18 "2022-09-25T16:11:26Z")
Question,
I have a Restaurant Sheet with all their detail information.
To create this new icon Inline List, I created a new Sheet which has the HeroIcons and Names.
Within my App, I am using the Restaurant Sheet with an Inline List pointing to the Icon List. However, all the actions are based on the Icon List. Any ideas on how to structure this Icon Inline List so its related to all the details in the Restaurant Sheet?
Using the above Screenshot, I need Website to go to that specific restaurant’s website. A series of Temps and ITEs on the Restaurant Sheet?
---
### Author:  [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)
#### Post date: [September 25, 2022, 5:58pm UTC](https://community.glideapps.com/t/need-help-with-aligning-buttons/50117/19 "2022-09-25T17:58:07Z")
Read through this thread. It should be a very similar setup. If you have questions, let me know.
> [@A custom button bar question](https://community.glideapps.com/t/a-custom-button-bar-question/49713):
>
> Hi Gliders, I have created my own Glide App called TV Shows. In this, I keep track of what episode I have watched from which TV Show. So I know what episode I need to watch next. Because I have so many shows, I have sorted them by which show I had watched last, at the bottom of the list. Right now, I have placed a list of episode numbers in an options tab in my Google Sheets and I am using the Choice component to select what episode I am watching. If I want to select episode number 20, I nee…
---
### Author:  [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)
#### Post date: [September 25, 2022, 6:34pm UTC](https://community.glideapps.com/t/need-help-with-aligning-buttons/50117/20 "2022-09-25T18:34:06Z")
Thanks I reviewed your suggestion in the linked post.
I was able get it to work for the most part .
However, if someone goes to the Restaurant’s site via Deep Link, the Set Column action is bypassed and not triggered to set columns, making the USC’s not updated.
[Next page](https://community.glideapps.com/t/need-help-with-aligning-buttons/50117.md?page=2)