2

According to my read of andrewxhill (more readable version) I should be able to change the info window size by adding CSS, like so:

<div class="cartodb-popup header with-image" data-cover="true">
  <a href="#close" class="cartodb-popup-close-button close">x</a>
  <div class="cartodb-popup-header">
    <div class="cover">
      <div id="spinner"></div>
      <div class="image_not_found"><a href="#/map" class="help">Non-valid picture URL</a></div>
      <span class="separator"></span>
      <h1 class="order1">{{description}}</h1>
      <div class="shadow"></div>
      <img width="100%" src="{{img_url}}" style="height:135px;display:inline" />
    </div>
  </div>
  <div class="cartodb-popup-content-wrapper">
      <h4>description</h4>
      <p>{{description}}</p>
      <p>{{name}}</p>
  </div>
  <div class="cartodb-popup-tip-container"></div>
</div>

<style>
div.cartodb-popup {width:417px !important;}
</style>

But this has no impact on the width of my info window.

  • You definitely want the <style> definition above the HTML – Amanda Mar 18 '14 at 20:32
1

I have this:

<style>
div.cartodb-popup.stories {width:417px;
    padding-top:5px;
    margin-left:-197px;
    background:url("http://vizzuality.github.io/icij/img/map/infowindow-top.png") no-repeat} 
div.cartodb-popup.stories div.cartodb-popup-content-wrapper{width:407px;
    max-width:407px;
    padding:0 5px 0 50px;
    background:url("http://vizzuality.github.io/icij/img/map/infowindow-content.png") repeat-y} 
div.cartodb-popup.stories div.cartodb-popup-tip-container{width:417px;
    background:url("http://vizzuality.github.io/icij/img/map/infowindow-bottom.png") no-repeat} 
</style>
<div class="cartodb-popup stories">
  <a href="#close" class="cartodb-popup-close-button close">x</a>
  <div class="cartodb-popup-content-wrapper">
    <div class="cartodb-popup-content">
      <h4>state</h4>
      <p>{{state}}</p>
      <h4>fatalities_per_100k</h4>
      <p>{{fatalities_per_100k}}</p>
    </div>
  </div>
  <div class="cartodb-popup-tip-container"></div>
</div>

Which is roughly working (and obvs uses a different map). The infowindow background: http://vizzuality.github.io/icij/img/map/infowindow-content.png introduces a blue bar on the left -- you'll want to edit that in your favorite image editor if you just want a white background.

This also works, but with some funky sprites that need tending:

<style>
div.cartodb-popup.stories {width:317px;
    padding-top:5px;} 
div.cartodb-popup.stories div.cartodb-popup-content-wrapper{width:307px;
    max-width:307px;
    padding:0 5px;
    background: #ffffff;} 
div.cartodb-popup.stories div.cartodb-popup-tip-container{width:317px;} 
</style>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.