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



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); = "1661px";

 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.

public class ExpandingSideBar extends AbstractJavaScriptExtension {

private String STANADALONE_WINDOW_CSS= ".ym-standalone-window";

public ExpandingSideBar(ComponentContainer target) {
super((AbstractClientConnector) target);


public static ExpandingSideBar generate(VBoxLayout sourceVBox){
  ComponentContainer vLayout = sourceVBox.unwrapComposition(ComponentContainer.class);

 return new ExpandingSideBar(vLayout);

 public void render(){
     callFunction("init", STANADALONE_WINDOW_CSS);


Hello, @herby

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



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)