My Problem: I use Bootstrap and DHTMLX to build a web application , the application has a home page, sidebar and different other pages in which I use DHTMLX to build layout, grids and I use other DHTMLX components. I managed to make my home page responsive, also other HTML components are displayed perfectly in different devices but my problem is with DHTMLX layout and grid which is never made to be responsive! I have been looking and trying to find a way to make it responsive as I have numerous number of pages but each page have can have a layout pattern of DHTMLX (mostly used are 1C,2U,3L, 3T, 3U multilevel of layouts are used too)
What I think of doing: Well I noticed something, If I manged to dynamically change DHTMLX layout based on different media used this could be a solution, example: on one of the pages I have a 2U layout which is displayed just fine on a desktop screen, but its horribly displayed on a smart phone device - narrower media- so 2U must be converted to 2E which makes it at least easier to view and use
My question - or questions - : Am I thinking of the most dummy way to make my web application responsive, or even is what I am trying to do consists with the Responsiveness Concept?
This is not a discussion - I dont want my question to be closed- I only need an answer to direct me in the right way,however I highly appreciate an answer discussion in the right place.
You should be able to use an onresize handler with an onload handler. You just have to unload the layout and recreated it each time the window is resized:
<script>
var layout
var currentPattern
function setLayout() {
var width = window.innerWidth
if (width < 600) {
var pattern = "2E"
} else {
var pattern = "2U"
}
if (pattern == currentPattern) {
return
} else {
currentPattern = pattern
}
if (layout) {
layout.unload()
}
layout = new dhtmlXLayoutObject({
parent: "your-layout-id",
pattern: pattern
})
}
window.onresize = setLayout
</script>
<body onload="setLayout()">
<div id="your-layout-id">...</div>
</body>