Changing the height of info window in CARTO

Question

I have inserted a chart in info window for every feature of a polygon layer in CARTO. I want to change the height of info window in order to be looked as a whole without the need of scrolling. In info window menu it is possible to change the width but what about height? I would prefer a way without using CARTO JavaScript API?

My code is:

<div class="cartodb-popup v2">
  <a href="#close" class="cartodb-popup-close-button close">x</a>
  <div class="cartodb-popup-content-wrapper">
    <div class="cartodb-popup-content" style="max-height: 800px !important">
      <h4>name_eng</h4>
      <p>{{name_eng}}</p>
      <img src="{{column_146851}}"/>
    </div>
  </div>
  <div class="cartodb-popup-tip-container"></div>
</div>

the column_146851 is the column where there are the URLs of every image. The outcome is here. The height didn't change. What is the problem?

Answer 1

First within the CARTO Editor, go to the infowindow (iw) tab and click on </>. This HTML panel would allow you to customize in detail your in. And the CSS style parameter that allows you to change the iw height is max-height. Add and set this parameter to the style attribute to your needs. Your iw should look similar to this one:

<div class="cartodb-popup v2">
  <a href="#close" class="cartodb-popup-close-button close">x</a>
  <div class="cartodb-popup-content-wrapper">
    <div class="cartodb-popup-content" style="max-height: 300px !important">
      <h4>field1</h4>
      <p>{{field1}}</p>
      <h4>field1</h4>
      <p>{{field2}}</p>
      <h4>field2</h4>
      ...
    </div>
  </div>
  <div class="cartodb-popup-tip-container"></div>
</div>