smartgwt IE11 UI issues

Question

I am working on a J2EE project which is using smartgwt as frontend framework, the frontend pages include JSP pages and java classes which include smartgwt code. All the pages and smartgwt UI components work fine in IE8, but there is UI issues in IE11.

In IE11, there is only one type of issue, it is that the listgrid content exceeds the listgrid bottom borders, and scrollbars don't work. The issue doesn't occur all the time. It happened after some add, update or delete operations on the page (Ajax operations, so page doesn't submit and reload) then load the data in the grid.

I saved the HTML code of the page before and after the issue happened. The two generated HTML code have a lot of differences, but the there are two main differences which are directly related to the UI issue. one is the style attribute of listgrid div of the wrong page doesn't include overflow:hidden;, another is the DIV which controls the listgrid's height and width has the height of height:4534px on the wrong page whereas it has the height of height:300px on the right page.

I tried to upgrade the smartgwt version to 4.0 and gwt version to 2.5.1, but that doesn't solve the problem.

I am new with smartgwt, I don't know where I should look at to find the solution of the problem, I don't know it is caused by the Java smartgwt code of the page, or it is a smartgwt issue with IE11, or some other reason. Can anybody guide in which direction I should tried to find the solution of the problem?

Answer 1

Option 1:The root cause might be the DIV wrapping your table does not have overflow and height property in css. Also the table height is dynamically added at run time which will play inside the parent div for eg. 500px div.

 div {
    overflow:scroll;
    height: 500px;
}

Option 2: Try adding table layout fixed property on table and set the width of first row td columns. The layout is fixed based on the first row. Set the width of those, and the rest of the table follows.

table {      
  table-layout: fixed;      
}
td {
  width:25%;
}

Url for more working examples: http://css-tricks.com/fixing-tables-long-strings/ http://codepen.io/krunalv/pen/xbpwZP