Ability to inject CSS code to customize the layout of the report.

  • Profile Image
    Asked on March 30, 2016 at 05:46 PM

    The chart div margins are to large. When I embed in a container less than 400 px it cuts off half of my chart because of these margins. How can I change this?

    This is a re-post of a comment on How to Create a Visual Report with Your Form Submissions

  • Profile Image
    Answered on March 30, 2016 at 09:46 PM

    It will help us get a better understanding of the problem and come up with working solution if you share to us the URL of the website page where you were trying to add the Visual Report.

    We will wait for your updated response.

  • Profile Image
    Answered on April 01, 2016 at 10:19 AM


    The problem is with the styles in the divs below:

    <div class="widget" id="widget-0" data-type="header" type="header" style="height: 87px; width: 169px; top: 20px; left: 190px; padding: 5px; background: rgb(255, 255, 255);"><h2 class="widget-header" style="margin: 0px; padding: 0px;">Chart</h2><hr><span class="widget-subheader">Answers to Date</span></div>

    <div class="widget" id="widget-1" data-type="chart" type="chart" style="height: 238px; width: 267px; top: 145px; left: 140px;"><div class="widget-header" style="font-size:13px;font-weight:normal;">How many hours per week do you spend marketing your location(s)?</div>

  • Profile Image
    Answered on April 01, 2016 at 12:42 PM

    I've checked the link that you have provided in your earlier post, I am able to see only one JotForm embedded. I was not able to find any visual reports embedded on the page. Did you make any changes to the webpage? Could you please check the page once again and provide us with the updated page? Also, it would be helpful if you can share us the direct links to your visual reports so that we can further investigate the issue.

    We will wait for your response. Thank you!  

  • Profile Image
    Answered on April 01, 2016 at 12:46 PM

    Hi Kiran,

    Answer the question on my page and you will be redirect to the chart so you can see real-time stats. The question form and the chart live in the same div. I'm simply using jotform redirect to do this.

  • Profile Image
    Answered on April 01, 2016 at 02:46 PM

    I have checked the link where is embedded your form and when I submitted the form I noticed visual report as thank you page, currently this is how it is being displayed: 

    I have tested creating a visual report and embedded it in a webpage, the visual report loads inside an iframe, affecting HTML elements inside iframes could be a bit hard because you can not affect it directly as you are loading HTML elements that are not directly in the main webpage, I found a link where a workaround is provided, I tried to apply it; however, it does not work, here is the link if you want to test as well: http://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe

    I think that I will submit this to our developers, I think that  a possible solution for this could be the ability to inject CSS codes to the report in the same way as you do with widgets, although we can not provide an ETA about when it could be available we will make sure to let you know if it comes available. 

  • Profile Image
    Answered on April 01, 2016 at 02:57 PM

    Thanks. The ability to add custom styles will be very helpful.