2-Column Layout and Half-Width Fields for Calculator

Wishlist Calculator
1

For general customizability and especially for calculators with many input fields, it would be helpful to have the option to change the input fields to a 2-column layout.

Added functionality to go with this would be width toggle for the fields that would switch them between full-width and half-width, while having the heading field used as a separator when the user doesn’t want two sequential half-width fields to appear on the same row, or just a new “separator” field that would move the fields below it to a new row.

2

Hey there, @Yavuz_Yavuzer_II and welcome to the Community :waving_hand:

Great idea, thanks for sharing! If more users get interested in this feature, we’ll try to think it over :slightly_smiling_face:

As for now, could you please specify which field in your calculator you’d like to be half-width and displayed in 1 line? We’d be happy to come up with a custom solution for you!

3

Thanks for the response! Dropdowns and number entry fields would be the most useful for me personally. Sliders at half width may be too squished.

4

Got it, thanks!

I see that currently you have 4 Calculator widgets. Could you please specify the name(s) of the widget(s), where you’d like to apply these changes?

5

“Pool Heater Calculator” is the one I would need it most with. Is there a CSS selector for the divs of the different field types? Currently in inspect i only see one unified one, but not sure if im missing something.

The simplest implementation IMO would be a little JS toggle inside the field details that applies a half-width class or something like that.

6

I agree that the toggle option for width (like in our Forms) would be a great addition! We’ll try to think it over in the future updates :slightly_smiling_face:

You’re right, the fields have the same class and the only solution to target a specific field is to use :nth-child(field_number) right after the class name.

I see that you have only 2 dropdowns next to each other and here is the CSS code to display them in 1 line:

[class*="FormFieldLayout__Container-sc"]:nth-child(16) {
  width: calc(54% - 4px);
  display: inline-block;
}


[class*="FormFieldLayout__Container-sc"]:nth-child(15) {
  margin-right: 8px; 
    width: calc(46% - 4px);
  display: inline-block;
}

Please check it out and let me know if you like the result :slightly_smiling_face: