1

I'm working with info windows, but I'd like them to be a bit bigger than the defaults in CartoDB. To display pictures and additional information. How can I make it so they are bigger? Is there any way in the GUI to do this? Is there a more advanced way that has some template I could easily apply?

2

The reason why is not easy to dynamically modify the width of an infowindow right now is because we're using images to generate the rounded corners (this ensures that the infowindows look fine in older browsers, like IE7 & 8).

We're working to improve that, but in the meantime, the best way to do what you want is to edit the HTML of the infowindow and replace the markup that CartoDB generates with a custom one:

Here's how to do it:

  • Go to the 'Custom HTML' pane of the infowindow editor.
  • Add a block with the new style and markup (we'll be defining a new class for this: .custom_infowindow):

<style>
    div.cartodb-popup.custom_infowindow {width:WIDTH;padding-top:5px;margin-left:-POSITION_OF_THE_TIP;background:url("http://vizzuality.github.io/icij/img/map/infowindow-top.png") no-repeat}
      div.cartodb-popup.custom_infowindow div.cartodb-popup-content-wrapper {width:407px;max-width:407px;padding:0 5px;background:url("http://vizzuality.github.io/icij/img/map/infowindow-content.png") repeat-y}
      div.cartodb-popup.custom_infowindow div.cartodb-popup-tip-container{width:417px;background:url("http://vizzuality.github.io/icij/img/map/infowindow-bottom.png") no-repeat}
      div.cartodb-popup.custom_infowindow div.row{display:block;overflow:auto}
      div.cartodb-popup.custom_infowindow div.row div.label,div.cartodb-popup.custom_infowindow div.row div.info{padding:20px 0;margin:0 20px}
      div.cartodb-popup.custom_infowindow div.row div.label{float:left;width:60px}
      div.cartodb-popup.custom_infowindow div.row div.info{float:right;width:267px}
      div.cartodb-popup.custom_infowindow div.row div.info.border{border-bottom:1px solid #E1E2E4}
      div.cartodb-popup.custom_infowindow div.row.no-pad div.info,div.cartodb-popup.custom_infowindow div.row.no-pad div.label{padding-top:0}
      div.cartodb-popup.custom_infowindow a.cartodb-popup-close-button{display:-moz-inline-stack;display:inline-block;vertical-align:middle;*vertical-align:auto;zoom:1;*display:inline;top:10px;right:10px;width:20px !important;height:auto !important;padding:5px 0;text-align:center;background:0;text-indent:0;font:bold 11px "Helvetica",Arial;text-decoration:none}
      div.cartodb-popup.custom_infowindow a.cartodb-popup-close-button:hover{text-decoration:underline}
      div.cartodb-popup.custom_infowindow label{display:block;margin-top:2px;font:bold 11px "Helvetica",Arial;line-height:12px;color:#4CA7CC}         
      div.cartodb-popup.custom_infowindow p{display:block;max-width:none !important;width:auto !importantfont-size:14px;color:#999999}
      div.cartodb-popup.custom_infowindow p strong{font-weight:bold}
      div.cartodb-popup.custom_infowindow p.margin{margin-top:12px}
      div.cartodb-popup.custom_infowindow p a{color:#459CBE;text-decoration:none}
      div.cartodb-popup.custom_infowindow p a:hover{text-decoration:underline}
</style>

      <div class="cartodb-popup custom_infowindow">
        <a href="#close" class="cartodb-popup-close-button close">x</a>
        <div class="cartodb-popup-content-wrapper">

          <div class="row">
            <div class="label"></div>
            <div class="info">
<p>{{name}}</p>
            </div>
          </div> 

        </div>
        <div class="cartodb-popup-tip-container"></div>
      </div>

You'll need to replace the WIDTH and POSITION_OF_THE_TIP in the previous code with your desired values.

POSITION_OF_THE_TIP is the distance from the left side of the infowindow to the tip of the infowindow (this depends on your design, so you'll need to do some tests).

Finally, this example uses 3 images to define the top, middle and bottom part of the infowindow. If you create your own infowindow, please host the images in your own server :)

Here are the infowindow assets we're using:

http://vizzuality.github.io/icij/img/map/infowindow-top.png http://vizzuality.github.io/icij/img/map/infowindow-content.png http://vizzuality.github.io/icij/img/map/infowindow-bottom.png

0

There is no easy way to do it in the GUI. Maybe with some advanced HTML and CSS tricks, you could make it happen, but I haven't seen it. The best way is with CartoDB.js. You'll need to define a bit of custom CSS for the infowindows, here is a good example to get you started,

http://bl.ocks.org/javisantana/6696187

0

I was able to get my infowindow to dynamically get taller without using any script tags. I set the width of the window using the web interface, and then added this to the infowindow custom HTML by clicking the button near the top.

{{mtrsrc}} is a column in my table, fyi.

Here's my code:

  <div class="cartodb-popup v2 custom_infowindow">
    <a href="#close" class="cartodb-popup-close-button close">x</a>
    <div class="cartodb-popup-content-wrapper">

      <div class="row">
        <div class="label"></div>
        <div class="info">
<img height="300"  src="http://pesticideresearch.com/fum/{{mtrsrc}}.png" />

        </div>
      </div> 

    </div>
    <div class="cartodb-popup-tip-container"></div>
  </div>

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.