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

[Private_Member_374337]

Hi,

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

Chrome:

IE11:

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:

view:

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}"}),
}));

controler:

onAfterRendering: function() {
	var oTable = sap.ui.getCore().byId("Plan1");
	var oModel = oTable.getModel();
	oTable.addEventDelegate({
	     "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("grey");
		     row.$().removeClass("darkGrey");
		     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)")) {
		          row.$().addClass("grey");
		     } else if (!cellText.indexOf("Gesamt") ) {
		          row.$().addClass("darkGrey");	
		     } else {				    
for (var j = 0; j< columnArray.length; j++) {
var cell1 = row.getCells()[columnArray[j]];
var cellId = cell1.getId();
$("#"+cellId).parent().parent().removeClass("grey")
$("#"+cellId).parent().parent().addClass("grey")
                      }			          		
		   }
                   for (var j = 0; j< columnArray.length; j++) {
		       var cell2 = row.getCells()[columnArray[j]];			       if (!cell2.getText().indexOf("-")){
			   cell2.removeStyleClass("green");
			   cell2.addStyleClass("red");
		       } else {
			    cell2.removeStyleClass("red");
			    cell2.addStyleClass("green");
		       }
		    }	   
		    if (i >= rowCount-5 ) {
		        row.$().addClass("bold");
		    }
		 }			        
	     }
	}, this);

css:

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

.bold{
	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

[Private_Member_374337 · Accepted solution]

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

[Private_Member_374337 · Accepted solution]

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

setTimeout(function(){....},5000);

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

[former_member202228]

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.

[former_member182862]

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.

-D

[Former Member]

Various types of issues arise while using the Chrome browser. Sometimes an error of ERR_CACHE_MISS appears with the message of Confirm Form Resubmission. This error caused due to problems with settings and configurations, extensions etc. This cause hindrance to the working of the user. To solve this one can visit FixERR CACHE MISS Error Not Respondingto the best solution.