Setting widget container height individually

  • Dear forum members,

    In individual blogposts su I insert Tradingview stock chart widgets.

    The widget code is obtainable frI’m https://www.tradingview.com/widget/advanced-chart/

    I select the stock and configuration options and then check the ‘Autosize’ box so that the widget does not spread out of the screen width but in order to avoid it being crushed vertically the container height needs to be defined.

    I found the solution to be an additional CSS added and for the two pages linked here above the code is:

    
#tradingview_813bd div {
	height: 600px !important;
}

#tradingview_49ae5 div {
	height: 600px !important;
}

    but as you recognize, I need to add an additional code for every single widget inserted into a blogpost because each widget has a specific id, such as ‘813bd’ and ’49ae5′ here above.

    I am wondering if there is not a possibility to insert a line of code to set the heigth of the widget directly in the widget code.

    The widget code typically is:

    <!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
  <div id="tradingview_e61f1"></div>
  <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/NASDAQ-AAPL/" rel="noopener" target="_blank"><span class="blue-text">AAPL Chart</span></a> by TradingView</div>
  <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
  <script type="text/javascript">
  new TradingView.widget(
  {
  "autosize": true,
  "symbol": "NASDAQ:AAPL",
  "interval": "D",
  "timezone": "Etc/UTC",
  "theme": "Light",
  "style": "1",
  "locale": "en",
  "toolbar_bg": "#f1f3f6",
  "enable_publishing": false,
  "allow_symbol_change": true,
  "container_id": "tradingview_e61f1"
}
  );
  </script>
</div>
<!-- TradingView Widget END -->

    Does this idea make sense?

    Thanks a lot for help.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

  • Try:

    .tradingview-widget-container div div {
   height: 600px !important;
}
    Thread Starter chartsandtrends

    (@chartsandtrends)

    Thank you so much @crouchingbruin for this idea.
    This will set a common height for all Tradingview widgets but there are different types of them that may need a customized height setting such as for those I have inserted in this page.
    This is in this case what happens when the ‘Autosize’ parameter is not selected and if you look at this page on a mobile device you will see how the widgets are stretched horizontally outside of the display area.
    I was thinking that it may be possible to insert an additional line of code directly into the individual widget code to specifically adjust the widget’s height.
    You think this is possible?

    As an aside, it is always best practice to not style an element directly using a style attribute. Instead, write CSS rules that use the element’s ID or class. It makes it easier to override the CSS if necessary, without having to resort to an !important clause.

    As far as the width goes, you can try setting the widths to 100% instead of a fixed number of pixels. Then they will fit the width of whatever device they happen to be viewed on and you won’t get the charts spilling off the side.

    For the heights, you can use media queries that set the height depending upon a particular screen width. For example:

    #tradingview_5b9e6-wrapper {
   height: 610px;
}
@media (max-width: 767px) {
   #tradingview_5b9e6-wrapper {
      height: 550px;
   }
}
@media (max-width: 420px) {
   #tradingview_5b9e6-wrapper {
      height: 320px;
   }
}

    You’ll need to remove the height property from the inline style of the #tradingview_5b9e6-wrapper first, and change the height property of the next nested DIV from 610px to 100% for this to work. But what this should do is change the height of the chart to the heights that you see depending on the screen widths. You’ll want to be careful, though, that you don’t shrink the height so much that all of the text and figures run together and it’s too hard to read.

    Thread Starter chartsandtrends

    (@chartsandtrends)

    Thank you @crouchingbruin; the first general code works for all widgets, so I did not tinker with the second one.

    I am however strugling with another widget that has no id.

    Here is the code:

    <!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
  <div class="tradingview-widget-container__widget"></div>
  <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/markets/currencies/forex-cross-rates/" rel="noopener" target="_blank"><span class="blue-text">Forex Rates</span></a> by TradingView</div>
  <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-forex-cross-rates.js" async>
  {
  "width": "770",
  "height": "400",
  "currencies": [
    "EUR",
    "USD",
    "JPY",
    "GBP",
    "CHF",
    "AUD",
    "CAD",
    "NZD",
    "CNY"
  ],
  "locale": "en"
}
  </script>
</div>
<!-- TradingView Widget END -->

    This one spills out horizontally as well on small screens.
    When autoselect the pixel size is replaced with:

    “width”: “100%”,
    “height”: “100%”,

    I am not sure how to set the auto width for this one due to the missing id.
    Is there any fix here please?

    Thread Starter chartsandtrends

    (@chartsandtrends)

    Sorry, I found the solution by myself by setting the dimensions as:
    “width”: “100%”,
    “height”: “400”,

    The result is quite remarkable.
    See here.

    Thanks for the great help.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Setting widget container height individually’ is closed to new replies.