4

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.

rumman0786
  • 1,150
  • 10
  • 20
Ragda Awad
  • 63
  • 8

1 Answers1

1

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>
Erik Pukinskis
  • 480
  • 5
  • 11
  • thank you for your answer, However thinking of implementing this solution on a huge number of pages means for every page you have to define layout patterns per media – Ragda Awad Jan 11 '16 at 09:18
  • Just store the function in a javascript file you include on each page? – Erik Pukinskis Jan 11 '16 at 09:38
  • Yes I know ! but I meant not all pages has 2U patterns, and we have to take into consideration layout inside layouts, the solution is more complex than this but this is a start, anyway I will give it more time for searching and suggestions from other users, thnx – Ragda Awad Jan 11 '16 at 09:52