All geek questions in one place

How to make dhtmlx responsive?

My problem: I use Bootstrap and DHTMLX to create a web application, the application has a home page, sidebar and other other pages in which I use DHTMLX to build a layout, a grid, and I use other DHTMLX components. I managed to make my homepage responsive and other HTML components render perfectly on different devices, but my problem is with the layout and DHTMLX grid, which has never been responsive! I searched and tried to find a way to make it responsive because I have many pages, but each page may have a DHTMLX layout template (mainly 1C, 2U, 3L, 3T, 3U use layered layouts too)

What I think about what I'm doing . Well, I noticed something. If I was able to dynamically change the DHTMLX scheme based on the different media used, this may be a solution, for example: on one of the pages I have 2U that displays perfectly on the desktop screen, but it displays horribly on the smart device of the phone - a narrower medium - therefore 2U needs to be converted to 2E, which makes it at least easier to view and use

My question is - or questions - . I think about the most mannequin way of responding to my web application, or even what I'm trying to do, including with the concept of "Responsibility"?

This is not a discussion. I do not want my question to be closed. I only need an answer to guide me correctly, but I appreciate the discussion with the answer in the right place.

+4
source share
1 answer

You should be able to use the onresize handler with the onload handler. You just need to unload the layout and recreate it every time you resize the window:

<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>
+1
source

Source: https://habr.com/ru/post/1623718/

More articles:


All Articles