I have an issue that I’ve been unable to solve neatly with CSS that I’m attempting to solve via Javascript Extension.
We have a standalone window (not tabbed) layout that has a sidemenu bar that I’d like to expand to height of it’s parent container.
The obvious thing I tried to was something like
sideMenu.setHeight(mainWindow.getHeight())
Unfortunately
mainWindow.getHeight() //returns either 100.0 or -1
What i want is the actual height in pixels of component as rendered on the screen. Is this possible?
Alternatively I tried using a JavascriptExtension
window.com_yieldmo_ymcuba_web_componentExt_ExpandingSideBar= function() {
var self = this;
self.init = function (parentWindowSelector) {
var parentWindow = window.document.querySelector(parentWindowSelector);
var el = window.document.querySelector(".ym-side-menubar");
window.console.log("!!! Setting height")
window.console.log("!!! width", el.clientWidth);
el.style.height = "1661px";
el.setAttribute("data-height","1629px")
window.console.log("!!! Setting height to ", parentWindow.clientHeight +"px")
window.console.log("new height", el.clientHeight);
}
}
All of this seems to work I see the console log statements and I see the data attribute that I’ve added to the element however the style is not set.
It’s driving me crazy cause it looks like it should work.
@JavaScript("vaadin://expanding-side-bar.js")
public class ExpandingSideBar extends AbstractJavaScriptExtension {
private String STANADALONE_WINDOW_CSS= ".ym-standalone-window";
public ExpandingSideBar(ComponentContainer target) {
super((AbstractClientConnector) target);
//render();
}
public static ExpandingSideBar generate(VBoxLayout sourceVBox){
ComponentContainer vLayout = sourceVBox.unwrapComposition(ComponentContainer.class);
return new ExpandingSideBar(vLayout);
}
public void render(){
callFunction("init", STANADALONE_WINDOW_CSS);
}
}
}
Thanks