Any reason for div.dc-chart { float: left; } in dc.css ?

[drjimbob]

Is there any reason for this? This seems to be styling orthogonal to the library. This causes issues when used with bootstrap (or similar responsive grid systems).

If you have a responsive design like the following fiddle (where the colored div's are placeholders for dc charts):

http://jsfiddle.net/e1fap4bs/1/

where resizing the "Result" frame dynamically changes it from 3 columns, to 2 columns, to 1 column, while keeping the <h2> above the associated chart.

However, if we used dc, then dc.css would add float: left; to the all the chart divs. Then when resizing (when not at the largest or very smallest window size), all the HTML elements associated around a chart would lose their relative location to the chart. (This caused issues for me where the chart titles and footers were getting lost). Try resizing the following frame:

http://jsfiddle.net/e1fap4bs/2/

[gordonwoodhull]

I agree completely. This misfeature goes back to #53. It's helpful for notebook-style apps but breaks resizing and responsiveness.

You can disable it in your own cascading style sheet for now right?

[drjimbob]

Yes, it was a simple fix for myself (once I pinpointed the cause -- initially, I thought I was misusing bootstrap or had a mistake from some other CSS property, before I pinpointed div.dc-chart { float: left } as the culprit). Just thought I would bring it up here to save others this debugging hassle.

For reference, adding div.dc-chart { float: none!important; } to some other stylesheet fixes it, though a cleaner fix is to remove the rule from dc.css.

[privateOmega]

@gordonwoodhull Is it possible to remove it? Because I just had the same experience as @drjimbob and finally found out the cause and did a quick google search which led me to this issue.

I am okay with overriding it from my side also.

[gordonwoodhull]

It'll break everyone's layout who isn't overriding it, and we'll probably have to add the rule to every example. So it needs a version bump. (dc.js uses scaled-down semantic versioning, so that'd be 3.1.)