# Side by side buttons using CSS. Doesn't work in Safari, help needed

**URL:** <https://community.glideapps.com/t/side-by-side-buttons-using-css-doesnt-work-in-safari-help-needed/18712>\
**Category:** Ask for Help\
**Created:** [November 20, 2020, 7:48pm UTC](https://community.glideapps.com/t/side-by-side-buttons-using-css-doesnt-work-in-safari-help-needed/18712 "2020-11-20T19:48:00Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Vladimir\_Zambakhidze](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/vladimir_zambakhidze/32/13882_2.png) [@Vladimir\_Zambakhidze](https://community.glideapps.com/u/Vladimir_Zambakhidze)\
**Post date:** [November 20, 2020, 7:48pm UTC](https://community.glideapps.com/t/side-by-side-buttons-using-css-doesnt-work-in-safari-help-needed/18712/1 "2020-11-20T19:48:01Z")

</div>

Hi!  
I can’t figure out why in Safari it is impossible to put three buttons in a row.  
Please tell me what should be the css code?  
Additional question: for some reason the buttons become inactive if you add text. below  
App - [https://elochka.glideapp.io/](https://elochka.glideapp.io/)  
I am currently using the following code:

.fZlvaI {  
width: 33.33%;  
float: left;  
}  
.kmCjyN {  
display: unset;  
}  
[data-test=“app-button-view”] {  
margin: 6px;  
}

---

<div class="post-metadata">

**Author:** ![Vladimir\_Zambakhidze](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/vladimir_zambakhidze/32/13882_2.png) [@Vladimir\_Zambakhidze](https://community.glideapps.com/u/Vladimir_Zambakhidze)\
**Post date:** [November 20, 2020, 8:20pm UTC](https://community.glideapps.com/t/side-by-side-buttons-using-css-doesnt-work-in-safari-help-needed/18712/3 "2020-11-20T20:20:31Z")

</div>

![fullsizeoutput_1333](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/a/ba4d92d8f2758123a0b5ce08e1aeb5a533a1bcb2.jpeg) ![Снимок экрана 2020-11-20 в 23.12.47](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/9/e9a26ce6c92f6b9935d495109e5f5b73f3655092.png)

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [November 20, 2020, 8:44pm UTC](https://community.glideapps.com/t/side-by-side-buttons-using-css-doesnt-work-in-safari-help-needed/18712/4 "2020-11-20T20:44:10Z")

</div>

Are those the same class names that are rendered on a safari browser?

---

<div class="post-metadata">

**Author:** ![Vladimir\_Zambakhidze](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/vladimir_zambakhidze/32/13882_2.png) [@Vladimir\_Zambakhidze](https://community.glideapps.com/u/Vladimir_Zambakhidze)\
**Post date:** [November 20, 2020, 9:01pm UTC](https://community.glideapps.com/t/side-by-side-buttons-using-css-doesnt-work-in-safari-help-needed/18712/5 "2020-11-20T21:01:56Z")

</div>

I’m not sure if I chose the right classes, as I don’t know much about the code

---

<div class="post-metadata">

**Author:** ![Vladimir\_Zambakhidze](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/vladimir_zambakhidze/32/13882_2.png) [@Vladimir\_Zambakhidze](https://community.glideapps.com/u/Vladimir_Zambakhidze)\
**Post date:** [November 20, 2020, 9:05pm UTC](https://community.glideapps.com/t/side-by-side-buttons-using-css-doesnt-work-in-safari-help-needed/18712/6 "2020-11-20T21:05:18Z")

</div>

![Снимок экрана 2020-11-21 в 0.03.44](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/d/bd7b9ce794c7459ccbce14f8cfd48a6493436bc5.png)

---

<div class="post-metadata">

**Author:** ![Krivo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/krivo/32/5363_2.png) [@Krivo](https://community.glideapps.com/u/Krivo)\
**Post date:** [November 20, 2020, 10:48pm UTC](https://community.glideapps.com/t/side-by-side-buttons-using-css-doesnt-work-in-safari-help-needed/18712/7 "2020-11-20T22:48:39Z")

</div>

@Vladimir_Zambakhidze do you need the buttons to do different things? If not you could consider using an inline list with tiles.

Take a look here for inspiration:

> [@Create a compact homepage](https://community.glideapps.com/t/create-a-compact-homepage/10338):
>
> It is time to build some crazy compact homescreens live never before. Url: [https://companydirectory.glideapp.io/](https://companydirectory.glideapp.io/) A new feature has been added to Actions - “View details”. Select the “Independent screen configuration pr. item” and you can make the Tile layout send the user in all different directions. That is crazy. [Screen Shot 2020-06-04 at 9.16.52 PM] I put a front page on the Employees template where you can show different things Take a look - and copy the app if you want to se…

---

<div class="post-metadata">

**Author:** ![Vladimir\_Zambakhidze](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/vladimir_zambakhidze/32/13882_2.png) [@Vladimir\_Zambakhidze](https://community.glideapps.com/u/Vladimir_Zambakhidze)\
**Post date:** [November 21, 2020, 8:02am UTC](https://community.glideapps.com/t/side-by-side-buttons-using-css-doesnt-work-in-safari-help-needed/18712/8 "2020-11-21T08:02:51Z")

</div>

Thanks. That won’t work for me. I want to put an action “Increment” on each button, while the data source for “Increment” will be different

---

<div class="post-metadata">

**Author:** ![Vladimir\_Zambakhidze](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/vladimir_zambakhidze/32/13882_2.png) [@Vladimir\_Zambakhidze](https://community.glideapps.com/u/Vladimir_Zambakhidze)\
**Post date:** [November 21, 2020, 8:22am UTC](https://community.glideapps.com/t/side-by-side-buttons-using-css-doesnt-work-in-safari-help-needed/18712/9 "2020-11-21T08:22:06Z")

</div>

I used the method suggested by @Robert_Petitto r here [Multirow Choice Component (aka Chips UI)](https://community.glideapps.com/t/multirow-choice-component-aka-chips-ui/16437/23)