# Currency button

**URL:** <https://community.elfsight.com/t/currency-button/122743>\
**Category:** General Questions\
**Tags:** calculator\
**Created:** [May 25, 2025, 8:58pm UTC](https://community.elfsight.com/t/currency-button/122743 "2025-05-25T20:58:50Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![William62](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/william62/32/67507_2.png) [@William62](https://community.elfsight.com/u/William62)\
**Post date:** [May 25, 2025, 8:58pm UTC](https://community.elfsight.com/t/currency-button/122743/1 "2025-05-25T20:58:51Z")

</div>

Hi,  
I am loving this app. I built a claculator and would love to see a way to have the currency be selected in either CAD or USD. Is there a way to do this in CSS?  
Right now each Currency is on a new line in results but it gets really busy looking.  
This is what I am playing with.

> **[Dream Guitar Sandbox » Hand crafted custom boutique electric guitars using...](https://scheltemabg.com/dream-guitar-sandbox/)**

Thanks  
William

---

<div class="post-metadata">

**Author:** ![Sina](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/sina/32/59970_2.png) [@Sina](https://community.elfsight.com/u/Sina)\
**Post date:** [May 25, 2025, 9:32pm UTC](https://community.elfsight.com/t/currency-button/122743/2 "2025-05-25T21:32:29Z")

</div>

Hi @William62 welcome to community 👏

Create a conditional logic for the currency with a Choice or Dropdown field.  
On the Result page, you can then display the result under this condition.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/5/9/59f76adff284f9fed13dca9fc257e67e1f3d471e.png)

1= USD (1$)  
2= CAD (1,37C$)

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/1/9/19bd1fbc97ae35b2f536671e187ac9424d543ef2.png)  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/5/2/52f28607813f3be1369d78a7cbe021520aa21230.png)  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/4/a/4ae93192a554c603525af8834814809049beeb02.png)

You can then also hide the currency that wasn’t selected.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/f/9/f9803f8e7971dba99fc6ab10a7902de92eb34150.png)

---

<div class="post-metadata">

**Author:** ![William62](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/william62/32/67507_2.png) [@William62](https://community.elfsight.com/u/William62)\
**Post date:** [May 25, 2025, 9:37pm UTC](https://community.elfsight.com/t/currency-button/122743/3 "2025-05-25T21:37:36Z")

</div>

Wow, thank you so much. That looks perfect. Cheers

---

<div class="post-metadata">

**Author:** ![Sina](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/sina/32/59970_2.png) [@Sina](https://community.elfsight.com/u/Sina)\
**Post date:** [May 25, 2025, 9:42pm UTC](https://community.elfsight.com/t/currency-button/122743/4 "2025-05-25T21:42:13Z")

</div>

It’s my pleasure. You’re welcome.

---

<div class="post-metadata">

**Author:** ![William62](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/william62/32/67507_2.png) [@William62](https://community.elfsight.com/u/William62)\
**Post date:** [May 25, 2025, 9:59pm UTC](https://community.elfsight.com/t/currency-button/122743/5 "2025-05-25T21:59:07Z")

</div>

Almost there. One thought, Im using choice, is there a way to put them beside each other instead of below?

Thank you,  
William

---

<div class="post-metadata">

**Author:** ![Sina](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/sina/32/59970_2.png) [@Sina](https://community.elfsight.com/u/Sina)\
**Post date:** [May 25, 2025, 10:08pm UTC](https://community.elfsight.com/t/currency-button/122743/6 "2025-05-25T22:08:36Z")

</div>

Hi @William62  
Please try the following.  
Add this code to the Custom CSS field on the Settings tab of your [Calculator](https://elfsight.com/calculator-form-widget/) widget’s settings:

```auto
[class*="choice__OptionsContainer-sc"]{
display: grid!important;
grid-template-columns: 1fr 1fr!important;
gap: 1rem!important;
}

```

---

<div class="post-metadata">

**Author:** ![Sina](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/sina/32/59970_2.png) [@Sina](https://community.elfsight.com/u/Sina)\
**Post date:** [May 25, 2025, 10:12pm UTC](https://community.elfsight.com/t/currency-button/122743/7 "2025-05-25T22:12:38Z")

</div>

If necessary, I would deactivate multiple selection

![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/f/3/f3ec4b00df1b1b4c4621679d5df5350126d53299.png)  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/d/a/daa4c34cc9c438544471a968252756df4152f5cd.png)

---

<div class="post-metadata">

**Author:** ![William62](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/william62/32/67507_2.png) [@William62](https://community.elfsight.com/u/William62)\
**Post date:** [May 25, 2025, 10:21pm UTC](https://community.elfsight.com/t/currency-button/122743/8 "2025-05-25T22:21:35Z")

</div>

Wonderful, Yes I deactivated the multiple option. I is working nice, not to apply to the rest of the results.