CalcBuilder Forum

Hi,
we've checked your site and from the frontend we could see the template is setting some of the input styles, here:
/templates/et_yacht/css/bootstrap.min.css
and this is causing some issues at the mobile view. For ex, it sets a huge padding to the text input, while keeping a big font, so the content of the input is not visible. You can try to override just for the calculator fields, setting the specific styles for mobile, for ex, adding to the css section of your calculator

//small screens
@media all and (max-width: 1024px) {
.input-mini{
/* put your css styles in here,you can adjust as preferred */
padding: 2px !important;
font-size: 12px !important;
margin-top: 5px !important;
}
}

Regarding calculations, please check the configuration section 'Frontend Decimal format' /'Frontend Thousand format', inside the 'preferences' tab,
to confirm you have set the proper separators there, because this can cause the strange behavior (x10) when launching the operations.


There is no reason for the calculate button not to work, as we can't see any js problem at the page, but without seeing the button is hard to catch. If you can export, zip and attach the calculator to the ticket, we'll load it here and let you know how to fix.

If you go for the calculations 'on-fly' instead, the event that is attached is the 'change' for each the field, and a value doesn't fire the change event until the edition is finished (the field loses focus).
If you want to calculate on every character input, one soution would be to add an event and fire the calculation. Go to the js section,first tab and insert there

CB(".form-control").keyup(function(){CB(this).change()});

This should do the work.

Please give it a try and let us know if you need further help with any of the steps.

Best regards
Guillermo V.
Moonsoft Team

Hello,
we have tried your calculator here, and we send it back with a couple of changes for you to check:

- Decimal format: The problem was the input fields had configured '0' as the number of decimal positions allowed, so that was causing the validation to fail. We have set the first field 'cafe' to 2 decimal places at form fields -> cafe->advanced

Please adjust to the desired number of decimal places you'll allow your users to enter and also set for the rest of the input fields.

- As you had set the 'thousand' separator to 'comma', it will allow to enter it but it will take it as thousand, thus the weird x10 calculations. We have added a line to the 'js code' section that will remove the commas from the input, so users won't get confused .

-Finally, we have set the mobile style at the js section->write directly on html page. That way the style will only affect the current page, feel free to adjust styles as required.

Hope this will do the work, please let us know if you have any issue pending after applying those changes.

Best regards
Guillermo V.
Moonsoft Team