Setting height of Vaadin component

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

Hello, @herby

Have you tried to set full height to the side menu?

sideMenu.setHeight("100%");

Regards,
Daniil

Hi @tsarev

Thanks for the quick reply. I actually didn’t try that but I realized my mistake in the current implementation. I didn’t mention that the side menu is initially offscreen with it’s style left set to -375px via CSS. clicking a toggle button to show the sidemenu vis sideMenu.addStyleName() kicks off Vaadin RPC mechanism and repaints the screen but doesn’t execute the extension a second time.

I moved the ExpandingSidebar.render() call to the method that toggles the sidemenu on and offscreen and now it works.

(However I will try setting it to 100% as well since that is a vastly easier approach)