Add settings to adjust the size of the Results section

Wishlist Calculator
1

Hi Im building a Calculator where the user can slide a variable and then can see what features are availble at each teir of that variable. however this ends up being a long list that can then overflow off the bottom page. If i could change the amount of coloums on the calculation result or expand the width this may help to show all of the results… and example of this is Elfsight

1 Like
3

Hi @Shaun_Robinson :wave:

I see your point!

Please let me check it with our devs. I’ll get back to you a bit later :slightly_smiling_face:

4

Unfortunately, it’s impossible to change the number of columns in the Results section. However, you can change its width by adding this code to the Custom CSS field on the Settings tab of your widget’s settings:

@media(min-width: 570px) {
  .global-styles,
  [class*="eapps-calculator-"]
  [class*="widget__Layout-sc-"] {
    grid-template-columns: 30% calc(70% - 40px);
  }
}

Also, you can try to move the Results section under the Slider field using this code:

.global-styles,
[class*="eapps-calculator-"]
[class*="widget__Layout-sc-"] {
  display: block;
}

.global-styles,
[class*="eapps-calculator-"]
[class*="results__Container-sc-"] {
  position: static;
  margin-top: 35px;
}

Check these solutions and let me know if they worked for your case :slightly_smiling_face: