| license: mit |
When dynamically adding custom css classes to a dc.selectMenu IE11 kicks them out when filters are applied. For now I push them in again using a renderlet. This causes "glitches"/moves content around due to added padding or widths/heights.
Is this a bug? Does anyone know a cleaner workaruound not causing these glitches to appear?
forked from tomschulze's block: dc.js dynamically add class to dc.SelectMenu; IE11 issue
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <link rel="stylesheet" type="text/css" href="https://unpkg.com/dc@3/dc.css" /> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.10/css/uikit.min.css" /> | |
| <script src="https://unpkg.com/d3@5/dist/d3.js"></script> | |
| <script src="https://unpkg.com/[email protected]/crossfilter.js"></script> | |
| <script src="https://unpkg.com/dc@3/dc.js"></script> | |
| <script src="https://rawgit.com/crossfilter/reductio/master/reductio.js"></script> | |
| <script src="https://npmcdn.com/universe@latest/universe.js"></script> | |
| </head> | |
| <body> | |
| <div id="select"></div> | |
| <div id="test"></div> | |
| <script> | |
| var chart = dc.barChart("#test"); | |
| var experiments = [{"Expt":1,"Run":1,"Speed":850},{"Expt":1,"Run":2,"Speed":740},{"Expt":1,"Run":3,"Speed":900},{"Expt":1,"Run":4,"Speed":1070},{"Expt":1,"Run":5,"Speed":930},{"Expt":1,"Run":6,"Speed":850},{"Expt":1,"Run":7,"Speed":950},{"Expt":1,"Run":8,"Speed":980},{"Expt":1,"Run":9,"Speed":980},{"Expt":1,"Run":10,"Speed":880},{"Expt":1,"Run":11,"Speed":1000},{"Expt":1,"Run":12,"Speed":980},{"Expt":1,"Run":13,"Speed":930},{"Expt":1,"Run":14,"Speed":650},{"Expt":1,"Run":15,"Speed":760},{"Expt":1,"Run":16,"Speed":810},{"Expt":1,"Run":17,"Speed":1000},{"Expt":1,"Run":18,"Speed":1000},{"Expt":1,"Run":19,"Speed":960},{"Expt":1,"Run":20,"Speed":960},{"Expt":2,"Run":1,"Speed":960},{"Expt":2,"Run":2,"Speed":940},{"Expt":2,"Run":3,"Speed":960},{"Expt":2,"Run":4,"Speed":940},{"Expt":2,"Run":5,"Speed":880},{"Expt":2,"Run":6,"Speed":800},{"Expt":2,"Run":7,"Speed":850},{"Expt":2,"Run":8,"Speed":880},{"Expt":2,"Run":9,"Speed":900},{"Expt":2,"Run":10,"Speed":840},{"Expt":2,"Run":11,"Speed":830},{"Expt":2,"Run":12,"Speed":790},{"Expt":2,"Run":13,"Speed":810},{"Expt":2,"Run":14,"Speed":880},{"Expt":2,"Run":15,"Speed":880},{"Expt":2,"Run":16,"Speed":830},{"Expt":2,"Run":17,"Speed":800},{"Expt":2,"Run":18,"Speed":790},{"Expt":2,"Run":19,"Speed":760},{"Expt":2,"Run":20,"Speed":800},{"Expt":3,"Run":1,"Speed":880},{"Expt":3,"Run":2,"Speed":880},{"Expt":3,"Run":3,"Speed":880},{"Expt":3,"Run":4,"Speed":860},{"Expt":3,"Run":5,"Speed":720},{"Expt":3,"Run":6,"Speed":720},{"Expt":3,"Run":7,"Speed":620},{"Expt":3,"Run":8,"Speed":860},{"Expt":3,"Run":9,"Speed":970},{"Expt":3,"Run":10,"Speed":950},{"Expt":3,"Run":11,"Speed":880},{"Expt":3,"Run":12,"Speed":910},{"Expt":3,"Run":13,"Speed":850},{"Expt":3,"Run":14,"Speed":870},{"Expt":3,"Run":15,"Speed":840},{"Expt":3,"Run":16,"Speed":840},{"Expt":3,"Run":17,"Speed":850},{"Expt":3,"Run":18,"Speed":840},{"Expt":3,"Run":19,"Speed":840},{"Expt":3,"Run":20,"Speed":840},{"Expt":4,"Run":1,"Speed":890},{"Expt":4,"Run":2,"Speed":810},{"Expt":4,"Run":3,"Speed":810},{"Expt":4,"Run":4,"Speed":820},{"Expt":4,"Run":5,"Speed":800},{"Expt":4,"Run":6,"Speed":770},{"Expt":4,"Run":7,"Speed":760},{"Expt":4,"Run":8,"Speed":740},{"Expt":4,"Run":9,"Speed":750},{"Expt":4,"Run":10,"Speed":760},{"Expt":4,"Run":11,"Speed":910},{"Expt":4,"Run":12,"Speed":920},{"Expt":4,"Run":13,"Speed":890},{"Expt":4,"Run":14,"Speed":860},{"Expt":4,"Run":15,"Speed":880},{"Expt":4,"Run":16,"Speed":720},{"Expt":4,"Run":17,"Speed":840},{"Expt":4,"Run":18,"Speed":850},{"Expt":4,"Run":19,"Speed":850},{"Expt":4,"Run":20,"Speed":780},{"Expt":5,"Run":1,"Speed":890},{"Expt":5,"Run":2,"Speed":840},{"Expt":5,"Run":3,"Speed":780},{"Expt":5,"Run":4,"Speed":810},{"Expt":5,"Run":5,"Speed":760},{"Expt":5,"Run":6,"Speed":810},{"Expt":5,"Run":7,"Speed":790},{"Expt":5,"Run":8,"Speed":810},{"Expt":5,"Run":9,"Speed":820},{"Expt":5,"Run":10,"Speed":850},{"Expt":5,"Run":11,"Speed":870},{"Expt":5,"Run":12,"Speed":870},{"Expt":5,"Run":13,"Speed":810},{"Expt":5,"Run":14,"Speed":740},{"Expt":5,"Run":15,"Speed":810},{"Expt":5,"Run":16,"Speed":940},{"Expt":5,"Run":17,"Speed":950},{"Expt":5,"Run":18,"Speed":800},{"Expt":5,"Run":19,"Speed":810},{"Expt":5,"Run":20,"Speed":870}]; | |
| var ndx = crossfilter(experiments), | |
| runDimension = ndx.dimension(function(d) {return +d.Run;}), | |
| speedSumGroup = runDimension.group().reduceSum(function(d) {return d.Speed * d.Run / 1000;}), | |
| exptDim = ndx.dimension(function(d) {return d.Expt;}), | |
| exptGroup = exptDim.group(); | |
| var selectMenu = dc.selectMenu('#select') | |
| .dimension(exptDim) | |
| .group(exptGroup) | |
| .title(function (d){ | |
| return "experiment " + d.key; | |
| }) | |
| .filter("1"); | |
| chart | |
| .width(768) | |
| .height(480) | |
| .x(d3.scaleLinear().domain([6,20])) | |
| .brushOn(true) | |
| .dimension(runDimension) | |
| .group(speedSumGroup); | |
| // works fine in edge, firefox,chrome; not in IE11 | |
| //selectMenu.select('select').classed('uk-select', true); | |
| selectMenu.on('renderlet', function(chart){ | |
| // IE11 workaround: causes glitches due to added padding; | |
| selectMenu.select('select').classed('uk-select', true); | |
| }); | |
| dc.renderAll(); | |
| </script> | |
| </body> |