I have a graph created using a Formidable shortcode. I want that graph to be aligned in the center of the Elementor column in which it is placed. But no matter how I try to configure the section, column or shortcode widget, I cannot get the graph to show up in the center of the column. Elementor says it is out of their hands because it is a 3rd-party plugin over which they have no control. How can I configure this? Here is the shortcode I am using:
[frm-graph fields="212" type="pie" pie_hole=".4" title="" title_size="0" show_key="1" legend_position="bottom" height="600" 397_contains="SUYT"]
Use your browser's inspection tool to identify the CSS controlling the element's position to adjust centering. If you want help, post a link to the page in question and identify what you want centered.
I have a test page set up at https://dev.nftomatic.app/prod_test/. All of the pie charts on that page are generated using a Formidable shortcode, and all are in columns that are set to center-align, yet none are centered in their respective columns.
The first thing I see on your site is that you have a jQuery error:
Uncaught TypeError: document.getElementById(...) is null
loadAfterTime https://dev.nftomatic.app/?code-snippets-js-snippets=footer&ver=3:1
dev.nftomatic.app:1:92
loadAfterTime https://dev.nftomatic.app/?code-snippets-js-snippets=footer&ver=3:1
This could be preventing anything else from working on the site. You need to fix this first before any other troubleshooting can be performed.
Thanks for the tip on those errors, I will check those out.
For the record, I Formidable support provided a workaround to center-align the chart. You need to surround the shortcode with a div element that specifies the width and position of the chart, and then put that inside an object of the same width. For example:
<div style="max-width: 600px; margin-right: auto; margin-left: auto;">
[frm-graph fields="212" type="pie" pie_hole=".4" width="596"]
</div>
Please login or Register to submit your answer