CartoDB：信息窗口中的样式块被忽略。无法覆盖自定义样式答案

【问题标题】：CartoDB: Style block in infowindow get's ignored. Can't override custom stylesCartoDB：信息窗口中的样式块被忽略。无法覆盖自定义样式
【发布时间】：2015-12-10 03:43:26
【问题描述】：

我正在尝试在CartoDB Editor 中创建一个自定义信息窗口。从docs，应该可以使用<style> 块来指定或覆盖默认样式。但似乎整个街区都被忽略了。当我查看 Chrome 开发工具时，我的样式根本不存在。它们不会被覆盖，它们只是不存在。不过，内联样式可以正常工作。

信息窗口弹出的标记：

<style type="text/css">
  div.cartodb-popup.v2.custom {
    background: #666;
  }
  div.cartodb-popup.v2.custom:before {
    border-top: 14px solid #666;
  }
  div.cartodb-popup.v2.custom h4 {
    color: #fff;
  }
  div.cartodb-popup.v2.custom p {
    color: #ff0;
  }
</style>

<div class="cartodb-popup v2 custom">
 <a href="#close" class="cartodb-popup-close-button close">x</a>
 <div class="cartodb-popup-content-wrapper">
  <h4>{{boroname}}</h4>
  <p>Borough code: {{borocode}}</p>
 </div>
 <div class="cartodb-popup-tip-container"></div>
</div>

有什么想法我可能做错了吗？我已经尝试过使用和不使用custom 类，但我把它留在了那里，因为我认为一些额外的特异性不会造成任何伤害。我很确定这种<style> 方法在一年前就奏效了。

我可以使用内联样式进行大多数样式设置，但这非常麻烦并且不适用于伪元素，例如弹出小箭头。

有什么方法可以在 Web 界面上执行此操作，还是我们需要将其托管在我们自己的服务器上以编辑 .js 脚本等？

这是我的地图：https://stekhn.cartodb.com/viz/a2534c80-87b0-11e5-a2ef-0e787de82d45/embed_map

【问题讨论】：

标签： css cartodb

【解决方案1】：

上面的例子已经过时，信息窗口编辑器中的<style> 块不再被允许。您只能在 CartoDB 前端编辑器中使用 CSS 内联样式。要完全控制信息窗口和工具提示外观，请使用cartoDB.js。在此示例中，我将弹出背景颜色更改为灰色：

<link rel="stylesheet" type="text/css" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css">
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>

<style type="text/css">
    div.cartodb-popup.v2.custom {
        background: #666;
    }

    div.cartodb-popup.v2.custom:before {
        border-top: 14px solid #666;
    }

    div.cartodb-popup.v2.custom h3,
    div.cartodb-popup.v2.custom p {
        color: #fff;
    }

</style>

<section id="map"></section>

<script type="infowindow/html" id="template">
  <div class="cartodb-popup v2 custom">
   <a href="#close" class="cartodb-popup-close-button close">x</a>
   <div class="cartodb-popup-content-wrapper">
    <h3>{{name}}</h3>
    <p>{{description}}</p>
   </div>
   <div class="cartodb-popup-tip-container"></div>
  </div>
</script>

<script type="text/javascript">

    cartodb.createVis('map', 'https://your-accout.cartodb.com/api/v2/viz/477bdfc0-8210-11e5-936b-0e787de82d45/viz.json', {
        tiles_loader: true,
        center_lat: 48.6,
        center_lon: 11.4,
        zoom: 7
    })
    .done(function(vis, layers) {

        var subLayer = layers[1].getSubLayer(1);

        // Select template from dom 
        subLayer.infowindow.set('template', $('#template').html());
    });
</script>

【讨论】：

【解决方案2】：

奇怪的是，我能够在不使用任何脚本标签的情况下让我的信息窗口动态变高。我使用 Web 界面设置窗口的宽度，然后通过单击顶部附近的按钮将其添加到 infowindow 自定义 HTML。

{{mtrsrc}} 是我表中的一列。

这是我的代码：

  <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>

【讨论】：