New SCSM HTML Portal Resolution and Scroll Bar issue on IE 8,9 and 10

Recently with the UR 8 HTML portal release in Service Manager, we have noticed couple of bugs. However, MS clearly mentioned based on the link HERE, that the the Self Service portal needs a screen resolution above 1024 X 768. It is supported on the following browsers.

· Microsoft Edge

· Microsoft Internet Explorer 10 and 11

· Mozilla Firefox 42 and later

· Google Chrome 46 and later

 

This problems occurs only in IE10 and also IE 8 and 9 (even if its not supported by MS)

 

However, even with these resolution on IE 10 i have faced the issue where in one Service Offerings, if there are more than 4 Request Offerings available, we cannot see the ROs after the 4th one. Basically the RO 5, 6 , 7 and 8 etc. cannot see. The reason is scroll bar is not working. The only option I have seen is just changing the browser resolution to 50% in your IE 10. Therefore after several changes in the new portal index.cshtml file, we were able to resolve this scroll bar and resolution issue. After this changes it is even work on IE 8 and IE 9 as well. Smile

 

The solution was basically changing the below areas in the index.cshtml files under the Folder names HOME, KnowledgeBase, My Activities and MyRequests

image

 

Change the onresize function in “C:\inetpub\wwwroot\SelfServicePortal\Views\Home\Index.cshtml” to look like this:

var onresize = function (event) {

// need to use window.innerHeight/window.innerWidth as fix for IE10 because body.height/body.width gives bad results

var bodyHeight = window.innerHeight;

var bodyWidth = window.innerWidth;

    $(‘.home_list_item_page’).width(bodyWidth – $(‘.list_data_items’).outerWidth(true) – $(‘.side_nav_bar’).outerWidth(true) – parseInt($(‘.home_list_item_page’).css(‘padding-left’)) – parseInt($(‘.home_list_item_page’).css(‘padding-right’)));

    $(‘.list_data_items’).height(bodyHeight – $(‘.top_bar’).outerHeight(true) – $(‘.list_main_heading’).outerHeight(true) – $(‘.list_footer’).outerHeight(true));

    $(‘.home_list_item_page’).height(bodyHeight – $(‘.top_bar’).outerHeight(true) – parseInt($(‘.home_list_item_page’).css(‘padding-top’)) – parseInt($(‘.home_list_item_page’).css(‘padding-bottom’)));

}

 

 

Once you done the above modifications just do a IISRESET and check back the portal is working fine or not.

 

special thanks goes to Microsoft PG team for the adjustment of this portal.

 

Thanks