-
Posts
-
Dear Kriesi.at-Support,
I would like to integrate a chart for precious metals which I generated here:
https://www.tradingview.com/widget/symbol-overview/Unfortunately I can not get it displayed properly on my page.
Taken from TradingView’s FAQ: “The widget is not adapting to different screen sizes. What should I do?
Use the Autosize setting. When autosize is on, the widget uses 100% of available width and height of the enclosing element.
It’s very important to set a specific height of parent element for the widget to work properly.”Is there any way to set a specific height of the used ‘code-block’ as parent element?
Your support is most appreciated.
Kind regards
Alex
Code to be integrated as follows:
<!– TradingView Widget BEGIN –>
<div class=”tradingview-widget-container”>
<div id=”tv-medium-widget”></div>
<div class=”tradingview-widget-copyright”><span class=”blue-text”><span class=”blue-text”>Gold (USD)</span>, <span class=”blue-text”>Gold (EUR)</span></span> <span class=”blue-text”>Kurse</span> von TradingView</div>
<script type=”text/javascript” src=”https://s3.tradingview.com/tv.js”></script>
<script type=”text/javascript”>
new TradingView.MediumWidget(
{
“container_id”: “tv-medium-widget”,
“symbols”: [
[
“Gold (USD)”,
“XAUUSD|1d”
],
[
“Gold (EUR)”,
“XAUEUR|1d”
]
],
“greyText”: “Kurse von”,
“gridLineColor”: “#e9e9ea”,
“fontColor”: “#83888D”,
“underLineColor”: “#dbeffb”,
“trendLineColor”: “rgba(73, 133, 231, 1)”,
“width”: “100%”,
“height”: “100%”,
“locale”: “de_DE”
}
);
</script>
</div>
<!– TradingView Widget END –>Hey Alexander,
Please take a look here
https://generatewp.com/shortcodes/Generate a shortcode and use it.
That could solve your issues.Best regards,
BasilisDear Basilis,
is there no other/easier way of adjusting the height of parent element for the widget to work properly?
The widget does show on my page but just not in full scale veritically.
Can you perhaps provide any furter suggestions to solving this issue?Will this thread on WordPress.org be a help?
https://wordpress.org/support/topic/html-element-height-issue/Thanks in advance
Alex
Hi CHASSALLA,
Could you please give us a link to your website where this widget is added, we need more context to be able to help you.
Best regards,
VictoriaHi Alex,
Credentials did not work for me. Could you please update the credentials?
Best regards,
VictoriaHi,
We moved the widget script in the functions.php file and then specified the width and height pixel value.
Best regards,
IsmaelHi Alexander,
Glad we could help :)
If you need further assistance please let us know.
Best regards,
VictoriaHi,
Sure. Please provide a link to the page where you put the extra codes. We’ll check it. If you have the time, please inspect the scripts and look for the “width” and “height” parameters. Set a pixel value instead of percentage.
"width": "100%", "height": "100%",to
"width": "600px", "height": "200px",Adjust the values as you wish.
Best regards,
IsmaelHi Ismael,
thank you for your reply.
Please find the requested information in the private content section below.
All width and height parameters have already been adjusted in the provided codes.
Thanks for all your efforts and support!Alex
Hi,
Thank you for the update. You forgot to append the “px” unit to the value.
"width": "1000px", "height": "400px",Check the private field.
Best regards,
IsmaelHi,
Thank you for the update. You can ignore the script inside the functions.php file. I thought that it won’t work directly in the builder. The script is working as is when added inside a code block element but you have to set the width and height parameter to px value instead of percentage.
Best regards,
IsmaelThanks, Ismael, for your efforts and support!.
Unfortunately I still cannot get it running properly.
After commenting out your implemented code in the functions.php and adding the plain code from tradingview into the code-block element I can only get the first out of six charts running. All width and height parameters set as px instead of percentage.
The task is: Every single code has been tested in a code-block element separately and each one is displayed correctly when added standalone on just any page. Once I add a second code in a subsequent code- or text-block element only the uppermost widget is displayed with content of the code that came in as second. In other words: I can olny get one out of my six different widgets running on one single page.
:-/
Do you think there is any possibility to fix this?Greetings
AlexHi,
Please create a test page and then add every scripts on a separate code block. We’ll check it afterwards.
UPDATE: Look for the “container_id” parameter. Specify a unique id for each widget or container.
<div id="custom-container-id-one"></div>The “container_id” parameter of the script should correspond to the id attribute of the div or container above.
<!-- TradingView Widget BEGIN --> <div class="tradingview-widget-container"> <div id="custom-container-id-one"></div> <div class="tradingview-widget-copyright"><span class="blue-text"><a href="https://de.tradingview.com/symbols/AAPL/" rel="noopener" target="_blank"><span class="blue-text">Apple</span></a>, <a href="https://de.tradingview.com/symbols/GOOGL/" rel="noopener" target="_blank"><span class="blue-text">Google</span></a>, <a href="https://de.tradingview.com/symbols/MSFT/" rel="noopener" target="_blank"><span class="blue-text">Microsoft</span></a></span> <span class="blue-text">Kurse</span> von TradingView</div> <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script> <script type="text/javascript"> new TradingView.MediumWidget( { "container_id": "custom-container-id-one", "symbols": [ [ "Apple", "AAPL " ], [ "Google", "GOOGL" ], [ "Microsoft", "MSFT" ] ], "greyText": "Kurse von", "gridLineColor": "#e9e9ea", "fontColor": "#83888D", "underLineColor": "#dbeffb", "trendLineColor": "#4bafe9", "width": "1000px", "height": "400px", "locale": "de_DE" } ); </script></div> <!-- TradingView Widget END -->Best regards,
IsmaelSooo cool, Ismael! Thanks a bunch!
It’s working just great.
Awesome!
Appreciate your supreme support!Best wishes
Alex
- You must be logged in to reply to this topic.