Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Slider causes dropdowns to break #32

Open
gentinex opened this issue Mar 25, 2015 · 1 comment
Open

Slider causes dropdowns to break #32

gentinex opened this issue Mar 25, 2015 · 1 comment

Comments

@gentinex
Copy link

I found that when I inserted a slider, my dropdowns failed to expand. Below is reproducible HTML:

<link rel="stylesheet" href="d3.slider.css" />
<div class="testSlider"></div>
<hr>
<select>test
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="d3.slider.js"></script>
<script>
var slider = d3.select(".testSlider")
    .call(d3.slider()
            .axis(true)
            .value([0, 100])
            .on("slide", function(evt, value) {
                console.log(value[0]);
                    }));

</script>
@ramnathv
Copy link

The issue is that the default dimensions of the svg for the slider end up appearing on top of your select dropdown. Easy fix is to set a smaller margin for your slider, which can be done using

myslider = d3.slider()
  .margin(20)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants