Advanced Real-Time chart tradingview widget customize details section - widget

Question

I have an embeded Tradingview widget, the only problem im facing is the issue for the right panel called details.
The width of it is to small for my liking, how would i proceed to adjust the widht of that right panel?
<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
<div id="tradingview_93c62"></div>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
new TradingView.widget(
{
"width": "100%",
"height": "700",
"symbol": "NASDAQ:AAPL",
"interval": "D",
"timezone": "Etc/UTC",
"theme": "light",
"style": "2",
"locale": "en_EN",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"hide_top_toolbar": true,
"hide_legend": true,
"save_image": false,
"details": true,
"container_id": "tradingview_93c62"
}
);
</script>
</div>
<!-- TradingView Widget END -->
on the Iframe code embeded in the widget its labeled for "layout__area--right", i tried applying css for that div class but doesnt seem to work.the width of that section remains the same

Answer 1

To adjust the width of the "details" section of the TradingView widget, you can use CSS to set a fixed width for the element with class "layout__area--right". You can add the following CSS code to your HTML file:
<style>
.layout__area--right {
width: 50% !important;
}
</style>
In the above code, you can adjust the width percentage to your desired value. The !important declaration is used to override any inline styles defined by the TradingView widget.
Note that the CSS code must be added before the TradingView widget script.