Trying to set the pages up with a single panel on the left which is fixed-width, so as to always have enough space for the list of links to display there, but without taking more than needed. The “Small” option isn’t wide enough on smaller monitors; the “Medium” option takes too much on anything but small monitors. Is there someplace proper to specify a fixed width for this?
We have been requested by our users if this panel could be variable and it’s width dragged by mouse. Is this worth a feature request or way beyond possibilities?
Regards, Simpel
1 Like
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