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 ?
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...
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).