Skip to Content
avatar image
Former Member

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

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

chrome.png (121.0 kB)
ie11.png (101.1 kB)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

4 Answers

  • Best Answer
    avatar image
    Former Member
    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

    Add comment
    10|10000 characters needed characters exceeded

    • Former Member

      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.

  • avatar image
    Former Member
    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.

    -D

    Add comment
    10|10000 characters needed characters exceeded

  • 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.

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Apr 05 at 09:30 AM

    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.

    Add comment
    10|10000 characters needed characters exceeded