What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.
At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.
We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.
Visual Report: Ability to inject CSS code to customize the layout of the report.Asked by balhaddad1606 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
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.
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>
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!
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.
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.
Thanks. The ability to add custom styles will be very helpful.