Show calculated field as multi line which wraps

  • Resolved phil192

    (@phil192)


    5 years, 4 months ago

    Hi there,

    I have created a calculator which generates text outputs (at the bottom of the page) based on some javascript code. The problem I am finding is that the calculated field is an Input field, which cannot be multiline, and therefore will not wrap. On laptops this isn’t an issue, but when the calculator is used on mobile devices, the text is overflowing off the edge of the page. I can’t work out how to use a different type of element as a calculated field or make the input field wrap.

    Any help you can give me would be much appreciated.

    Many thanks,

    Phil

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author codepeople

    (@codepeople)

    Hello @phil192

    The solution would be use the calculated field for calculation, but as auxiliary, and display the result in another field.

    For example, assuming your current equation is: fieldname1+fieldname2 (it is hypothetical, only to describe the process)

    But you want to display this result in another place.

    First, insert a “HTML Content” field with a div tag as its content where to display the equation’s result, for example:

    
<div class="result-here"></div>

    Second, edit the equation as follows:

    
(function(){
var result = fieldname1+fieldname2;
jQuery('.result-here').html(result);
return result;
})()

    Finally, as the calculated field is being used as auxiliary, tick the checkbox in its settings for hiding the field from the public form.

    Best regards.

    Thread Starter phil192

    (@phil192)

    Wow, I wish I’d posted the question 4 hours ago, your super speedy and clear answer could have saved me a lot of time and headache! Thank you so much, works perfectly – what a great service you give. ??

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Show calculated field as multi line which wraps’ is closed to new replies.