Skip to Content

UI5: Why does my App work in Chrome and not in IE

Jan 12 at 12:50 PM


avatar image


I Build a SAPUI5 App with 2 tabels, a VizFrame and a custom CSS, and now have the two following issues:



1. There is a big white space between the Tables, why is it there?

2. Why is the dynamic Backgroundcolors of cells and rows not displayed?

my code:


var oPlanTable = new sap.ui.table.Table({
	id : "Plan1",
//	width  : "100%",
//	visibleRowCount : 7,
	selectionMode : sap.ui.table.SelectionMode.Single,
	selectionBehavior : sap.ui.table.SelectionBehavior.RowOnly,
	editable : true,
	threshold : 100,
	enableColumnReordering : false,
	showColumnVisibilityMenu :true,
	enableBusyIndicator : true,
	visibleRowCount: 18,
//	visibleRowCountMode : sap.ui.table.VisibleRowCountMode.Auto,
	rowHeight: 17,
	columnHeaderHeight: 22,
	width: "1815px"
//	fixedColumnCount: 30
//Add Column same for all columns
oPlanTable.addColumn(new sap.ui.table.Column({
	id: "plan_col1",
	width: "200px",
	label : new sap.m.Label({text : "{Header01}"}),
	template : new sap.m.Text({text : "{Col01}"}),


onAfterRendering: function() {
	var oTable = sap.ui.getCore().byId("Plan1");
	var oModel = oTable.getModel();
	     "onAfterRendering": function () {
              //number of visible rows
	    	 var rowCount = oTable.getVisibleRowCount();
              //starting Row index        
		 var rowStart = oTable.getFirstVisibleRow();
                 var columnArray = [6, 11, 16, 21, 23] //Which cells to grey
		 for (var i = 0; i < rowCount; i++) {		
		     // Remove Style class else it will overwrite
		     var row = oTable.getRows()[i];
		     row.$().removeClass("bold");		          	             var cell = row.getCells()[0];
		     var cellText = cell.getText();
		     // Set Row color conditionally
		     if (!cellText.indexOf("Summe") || !cellText.indexOf("Cash Endbestand (EoP)")) {
		     } else if (!cellText.indexOf("Gesamt") ) {
		     } else {				    
for (var j = 0; j< columnArray.length; j++) {
var cell1 = row.getCells()[columnArray[j]];
var cellId = cell1.getId();
                   for (var j = 0; j< columnArray.length; j++) {
		       var cell2 = row.getCells()[columnArray[j]];			       if (!cell2.getText().indexOf("-")){
		       } else {
		    if (i >= rowCount-5 ) {
	}, this);


/* Enter your custom styles here */
	 background-color: #4472c4 !important; 
	 background-color: yellow !important; 
	 color: yellow !important;	
	background-color: rgb(226,239,218) !important;
	background-color: rgb(206,206,206);
	font-weight: bold;
	background-color: darkgrey;
	font-weight: bold;
	color: red !important; 
	color: green !important; 

	font-weight: bold !important;
#Plan1, #Plan1 .sapUiTableCell, #Plan1 .sapUiTableCell input, #Plan1 .sapUiTableCell span {
	 font-size: 11px !important;
#plan_col1, #plan_col2, #plan_col7, #plan_col12, #plan_col17, #plan_col22, #plan_col24{
	background-color: #a4a4a4;
 	font-size: 12px !important;
#plan_col3, #plan_col4, #plan_col5, #plan_col6, #plan_col8, #plan_col9, #plan_col10, #plan_col11, #plan_col13, #plan_col14, #plan_col15, #plan_col16, #plan_col18, #plan_col19, #plan_col20, #plan_col21, #plan_col23{
	background-color: #4472c4;
 	font-size: 12px !important;

It would be nice if somone could help me.

Greetings Jan Schmidt

chrome.png (121.0 kB)
ie11.png (101.1 kB)
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

3 Answers

Best Answer
Jan Ulrich Schmidt Jan 15 at 09:59 AM

Hi Some Updates on the problemes:

There are no errors. I Know that my Colouring of the tabel cells scrolls with the internal scroll of the table, but i have only to display exactly 18 rows.

1.: When i look at the Elemtents in F12 IE and Firefox have:

and Chrome:

I solved the Problem by adding "#Plan1-tableCtrlCnt, #tableIST-tableCtrlCnt{ min-height: 300px !important; }" to the style sheet.

2.: I chaged some code and the result was this:

I had the Same Problem I had in the IE in Firefox, but when i startet debugging, the problem went away. This means that the cells are coloured as soon i run the js code step by step. My first thought on this is that the data from the Odata is not completly loaded.
Firefox with debug (no code changed):

Is there a better way to colour the Cells?

Or is there a better Place than fater Rendering to colour the cells?

Regards Jan

iechange1.png (108.8 kB)
firefoxdebug.png (95.4 kB)
ieheight.png (83.5 kB)
chromeheight.png (98.5 kB)
Show 1 Share
10 |10000 characters needed characters left characters exceeded

Ok, the problem was that the cells were colored befor the data was loaded!

My current solution is to put a time out before the colouring


I am still looking for a better way to put the parts in order but currently this works.

Dennis Seah
Jan 12 at 06:34 PM

I cannot tell. Do you see any error in IE console (debugger mode).

and I think (i am not sure) you solution will not work in chrome too. Try scroll your page so that the table rows change.


10 |10000 characters needed characters left characters exceeded
Paul Radulescu Jan 12 at 09:13 PM

Make sure the inherited properties of the cells are working as they should in both browsers.

Use F12 tools, and disable the height/color : inherit or default cell settings you might have there.

10 |10000 characters needed characters left characters exceeded