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.

Sign up for GitHub

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

Jump to bottom

setting div style with css breaks interative functionality #2129

Closed
gdkrmr opened this issue Oct 27, 2017 · 4 comments
Closed

setting div style with css breaks interative functionality #2129

gdkrmr opened this issue Oct 27, 2017 · 4 comments

Comments

@gdkrmr
Copy link

gdkrmr commented Oct 27, 2017

The following heatmap does not have any interactivity (e.g. zoom, pan) and greys out when I mouse over it. It can be fixed by setting style inside the div element. I did not try this with an external css file

<html>
    <head>
        <meta charset="utf-8"/>
        <script src="https://cdn.plot.ly/plotly-latest.js" ></script>
        <style>
         <!--
         div {
             width: 100%;
             height: 100%;
         }
         -->
        </style>
    </head>
    <body>
        <div id="myDiv"></div>
        <script>
         var color = [[0, "#ff0000"], [1, "#00ff00"]];
         var z = [];
         for (var i = 0; i < 4; i++) {
             z.push([]);
             for(var j = 0; j < 4; j++) {
                 z[i].push(i * j);
             }
         }

         var trace = {
             x: [1, 2, 3, 4],
             y: [1, 2, 3, 4],
             z: z,
             type: "heatmap"
         };

         var data = [trace];

         Plotly.newPlot('myDiv', data);
        </script>
    </body>
</html>
@etpinard
Copy link
Contributor

In a codepen: https://codepen.io/etpinard/pen/oovOZK?editors=1010

Related to #888

@etpinard etpinard added the bug something broken label Oct 27, 2017
@alexcjohnson
Copy link
Collaborator

This is actually just over-broad targeting of the CSS - you've made it so every <div> that Plotly makes expands to 100% of its parent - and the problem that causes here is that the modebar (the buttons that usually sit in the upper right corner) are in a <div> so they cover up the plot. If you change your css to something more specific like:

#myDiv {
    width: 100%;
    height: 100%;
}

then it all works fine.

I suppose we could in principle !important or override with high specificity every attribute of any HTML elements we make but that doesn't seem desirable either.

@alexcjohnson alexcjohnson added status: discussion needed and removed bug something broken labels Oct 27, 2017
@gdkrmr
Copy link
Author

gdkrmr commented Oct 27, 2017

ok, thanks for the clarification and sorry for reporting this, I am no web designer.

@alexcjohnson
Copy link
Collaborator

@gdkrmr no problem, I'd much rather have reports that turn out to be easy to solve, than have real problems go unreported!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@alexcjohnson @etpinard @gdkrmr