Is there a way to set width of the panels?

Help / Discuss
4

The following JavaScriptExtension uses the CSS resize feature to make the width of a panel dynamic.

 var panelObserver = new ResizeObserver(function (entries) {
      entries.forEach(function (entry) {
          var leftPanelsWidth = function () {
              var leftPanels = document.getElementById("leftPanels");
              if (leftPanels == null) {
                  return 0
              } else {
                  return leftPanels.getWidth()
              }
          };
          var rightPanelsWidth = function () {
              var rightPanels = document.getElementById("rightPanels");
              if (rightPanels == null) {
                  return 0
              } else {
                  return rightPanels.getWidth()
              }
          };
          if (entry.target.id == "leftPanels" || entry.target.id == "rightPanels") {
              var contentColumn = document.getElementById("contentcolumn").children[0];
              var leftPanels = document.getElementById("leftPanels");
              var containerWidth = document.getElementById("contentcontainerinner").getWidth();
              var paddingCorrection = 60;
              contentColumn.style["left"] = 100 * leftPanelsWidth() / containerWidth + "%";
              contentColumn.style["width"] = 100 * (containerWidth - rightPanelsWidth() - leftPanelsWidth() - paddingCorrection) / containerWidth + "%";
              if (leftPanels != null) {
                  leftPanels.style["right"] = contentColumn.style["width"]
              };
          };
      });
  });

  if (document.getElementById("leftPanels") != null) {
      document.getElementById("leftPanels").style["resize"] = "horizontal";
      document.getElementById("leftPanels").style["overflow"] = "hidden";
      panelObserver.observe(document.getElementById("leftPanels"));
  };

  if (document.getElementById("rightPanels") != null) {
      document.getElementById("rightPanels").style["resize"] = "horizontal";
      document.getElementById("rightPanels").style["overflow"] = "hidden";
      panelObserver.observe(document.getElementById("rightPanels"));
  };

It is a bit “dirty”, as it uses the HTML ids of the page layout, but it works.

(Used with flamingo skin).

2 Likes