CODEWITHSUNDEEP
d3.js
geotheory
geotheory

Reputation: 23690

Setting max-height attribute with D3

Can anyone explain why in the script below the right-hand text element does not behave in the same way as the left regarding its height parameter?

(This is a stripped-down script - to see working here's the jfiddle)

<html>
<style>
#leftbox, #rightbox
{
  width:300px; 
  padding:3px;
  background:#bbb;
  overflow:auto;
}
#leftbox  {
    float:left;
    max-height: 200px;
}
#rightbox {float:right;}
</style>

<div><p id="leftbox">
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla ... etc
</p></div>
<div><p id="rightbox">
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla ... etc
</p></div>

<script>
d3.select("#rightbox").attr("max-height", 200).style("color", "red");
</script>
</html>

Edit 13.11.13

The working line: d3.select("#rightbox").style("max-height", "200px").style("color", "red");

Upvotes: 0

Views: 1431

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109282

HTML is a bit more picky when it comes to setting attributes. You need to use .style() and explicitly give the unit "px" for this to work -- http://jsfiddle.net/wtYt2/1/

Upvotes: 1

Related Questions