Responsive width in % becomes px and then without a given unit

plotly.js
1

I used the approach given here: https:// + plot.ly/javascript/responsive-fluid-layout/ (I am not allowed to post more than two links, so you have to merge it yourself. Sorry.) and having the same problem as mentioned in this thread - the given width in % becomes px in the next sub-element and has no given unit at all in the next sub-element. If I enter a value of 1000 for WIDTH_IN_PERCENT_OF_PARENT it will become 1000px and then 1000.
The same effects happens with the height given in vh, but that doesn’t matter due to the pixels that are calculated with it.
I made an example on JSFiddle and you can find an attached picture from Firebug taken from the original project.

I wasn’t sure if I should open an issue with this on Github, maybe it is known and I missed something.

2

I believe you’re looking for something like https://github.com/plotly/plotly.js/issues/106

If so, there’s no workaround for this I’m afraid, as plotly.js only understand px dimensions at the moment.

3

@etienne, yes that’s what I was looking for. Anyway, I found a solution that also the fixes some auto-resize-problems I encountered.

(function() {
    var d3 = Plotly.d3;

    // .content is the class of the parent element.
    // So I take the size from there
    var contentInnerWidth = $('.content').innerWidth();
    var contentInnerHeight = $('.content').innerHeight();

    /* I am selecting the parent element and it has a child 
       element with the class .tab.content, where I append a new 
       div with an id (to call it from the tab-menu), it gets the 
       necessary classes and the width and height of its parent 
       element */
    var gd3 = d3.select('.content').selectAll('div.tab-content')
        .append('div')
        .attr('id', 'durationDateArea')
        .attr('class', 'tab-pane fade')
        .style({
            width: contentInnerWidth + 'px',
            height: contentInnerHeight + 'px'
        });

    // Building a graph
    var gd = gd3.node();

    Plotly.plot(gd, [{
        type: 'bar',
        x: [1, 2, 3, 4],
        y: [5, 10, 2, 8],
        marker: {
            color: '#C8A2C8',
            line: {
                width: 2.5
            }
        }
    }], {
        title: 'Auto-Resize',
        font: {
            size: 16
        }
    });

    // I encountered some problems with the autoresize of Plotly
    // This is my fix for it
    $(window).resize(function() {

        // Getting the height of the window
        var windowheight = $(window).height();

        // Apply window height to .content
        $(".content").css({
            "height": windowheight + "px"
        });

        // Getting the width of .content
        var contentInnerWidth = $('.content').innerWidth();

        // Apply width and height to two divs that are created by 
        // Plotly. Fixed some issueswith hidden overfull elements.
        $(".js-plotly-plot").css({
            "width": contentInnerWidth + "px",
            "height": windowheight + "px"
        });
        $(".plotly").css({
            "width": contentInnerWidth + "px",
            "height": windowheight + "px"
        });

        // Applying width and height to a new variable for Plotly
        var update = {
            width: contentInnerWidth,
            height: windowheight
        };
        // Using Plotly's relayout-function with graph-name and 
        // the variable with the new height and width
        Plotly.relayout(gd, update);
    });