Responsive dashboards

Hello there,

I'm trying to make the dashboards responsive, but i never used bootstrap before, I was more or less able to understand the header and footer responsive design with @media queries, but now I'm trying to do that with the container on the dashboard view page, with rawdata graphs or even with titles, but i can't make it, don't know how to refresh the position. Some suggestions ?

Kevin Copado's picture

Re: Responsive dashboards

I modified the bootstrap.js and it seems to work quite good.Thanks to Pedro (work mate). I just added this:

function recalcRowsModified(){
    $(".heading").prev(".heading").remove();
    containerWidth = $("#page-container").width();
    totalRowWidth = 0;
    currentRow = 1;
    lastRowHeight = 0;
    height = 400;
    heightTop = 0;
    
    $.each($(".rawdata"), function(i, element){
        if(i === 0){
            firstinRow = 1;
            lastRowHeight =  $(element).height();
        }
        
        if((totalRowWidth + $(element).width()) < containerWidth){
            $(element).css({"left": totalRowWidth+"px"});
            $(element).prev(".heading").css({"left": totalRowWidth+"px"});
            if(currentRow === 1){
                $(element).css({"top": "50px"});
                 $(element).prev(".heading").css({"top": 0});
           } else {
                $(element).css({"top": (heightTop+50)+"px"});
                $(element).prev(".heading").css({"top": (heightTop-15)+"px"});
            }
            totalRowWidth = totalRowWidth + $(element).width();
        }else{
            currentRow = currentRow + 1;
            heightTop = ((height * currentRow) - (height - 50));
            $(element).css({"left": 0});
             $(element).prev(".heading").css({"left": 0});
            if(currentRow === 1){
                $(element).css({"top": "50px"});
                 $(element).prev(".heading").css({"top": 0});
           } else {
                $(element).css({"top": (heightTop+60)+"px"});
                $(element).prev(".heading").css({"top": (heightTop-15)+"px"});
            }
            totalRowWidth = $(element).width();
        }
    });
    $("#page-container").height(height*currentRow);
    
}
$(window).resize(function(){
    recalcRowsModified();
}).load(function(){
    recalcRowsModified();
});

//Has so many "fails", only works if the height is over 400px in all graphs, and also is working if its dashboard its created that way: First title then graph, title then graph...

chaveiro's picture

Re: Responsive dashboards

What you mean by responsive on the dashboard context?

If its resize automaticaly on screen size change its already supported on xt version, set you widgets width in % instead of pixels on the dashboard config options (wrench icon on top of editor).

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.