Dropdown layout

Ask the Community Customization
1

Hi again,

My calculator is getting very close. I was wondering if I can setup drop-downs in a row of 2.
I got this code from @Sina but it only worked with the choice radio buttons

[class*=“choice__OptionsContainer-sc”]{
display: grid!important;
grid-template-columns: 1fr 1fr 1fr!important;
gap: 0rem!important;
}

Thanks,
William

3

Hi there, @William62 :waving_hand:

Do I get it right that you’d like to apply it to the first 3 dropdowns (2 dropdowns in 1 line and the 3rd dropdown below)?

image
image801×601 91.4 KB

4

Hi Max,

Yes thats what I’d like to try.

Thank you,
William

5

Our devs recommended using the code that will work on devices with the screen width from 800px, since this customization won’t look neat on the narrower screens:

@media(min-width: 800px) {
  [class*="form__FieldLayout-sc"]:nth-child(2),
  [class*="form__FieldLayout-sc"]:nth-child(3) {
    display: inline-grid;
    width: calc(50% - 5px);
  }

  [class*="form__FieldLayout-sc"]:nth-child(2) {
    margin-right: 10px;
  }
}

However, if you’d like to apply this change for all screen widths, you can use this code :slightly_smiling_face:


[class*="form__FieldLayout-sc"]:nth-child(2),
[class*="form__FieldLayout-sc"]:nth-child(3) {
  display: inline-grid;
  width: calc(50% - 5px);
}

[class*="form__FieldLayout-sc"]:nth-child(2) {
  margin-right: 10px;
}
6

Thanks again Max,
I’ve been playing around with it. perfect.

Thanks,
William

7

No problem :wink: