Height property is not working in chrome

Question

There is a worksheet in my web application. It has used a javascript function to add an empty line to the bottom of that work sheet. That javascript function looks like below.

ui.app.spreadsheet.FooterDataPadding.prototype.adjustPaddingToFooter = function () {
    this.getDomElement().style.height = this.getApplicationControl().getFooter().getDomElement().offsetHeight;
}

After running the function the html part looks like below.

div class="ui_app_spreadsheet_FooterPadding-layout " id="util_Document-uid185" style="height: 21px;"

In firefox and IE this works really fine. It adds that 21px high empty line to the bottom of the worksheet. But in Chrome, even though it includes in the source, it doesn't show in the UI. I tried hard to find the solution for this. But couldn't. It would be a great help if anyone can find a solution for this.

Answer 1

Empty Div's sometime show abrupt behaviour in different browsers.

Try to set the innerHTML of the browser to empty or whitespace:

document.getElementById('your_elem').innerHTML = '&nbsp';

Hope that helps.

Answer 2

May be try following:

var domElement = this.getDomElement();
domElement.style.height = this.getApplicationControl().getFooter().getDomElement().offsetHeight;
domElement.innerHtml = " "

Or may be concate + "px" in your height statement.

Or

domElement.innerHTML="<div style='height:" + height + "px;'></div>";