SIGN UP

Center-Align Graph

By: Eric Gurry | Asked: 12/16/2022
Forums › Category: General questions › Center-Align Graph
0 Vote Up Vote Down
Eric Gurry asked 2 years ago
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"]
3 Answers
0 Vote Up Vote Down
Victor Font answered 2 years ago
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.
0 Vote Up Vote Down
Eric Gurry answered 2 years ago
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.
Victor Font replied 2 years ago

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.

0 Vote Up Vote Down
Eric Gurry answered 2 years ago
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>

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community
crossarrow-right