Modify the “Select People” dialog height

Question

I am using IE 10 32-bit & windows 7 . now the "Select People dialog" will look as follow:

where only part of the first user will be displayed! Now the whole problem is with the inner style height = 45px. Because if I manually change the value to be 450px instead of 45px using the F12 developer tools, the dialog will be rendered correctly as follow:

so I tried adding the following inside my custom CSS (which is rendered after the core15.css) :-

#resultcontent {
    height: 400px !important
}
.ms-pickerresultdiv {
    height: 400px !important
}

also I wrote the following jQuery at the end of my master page:-

$(document).ready(function(){
    $("#resultcontent").height() = '400px';
    $("#resultcontent").height() = 400px;
    $("#resultcontent").height() = 400;
    $("#resultcontent").height() = "400px";
});

But all these custom CSS and scripts did not change the height of the people picker, can anyone advice on this please?

I have also noted that if I change the Document Mode from "defualt" to "IE9 standards" using F12 developer tool, then dialog will be rendered correctly, and also the dialog will work well on FireFox and safari.

Answer 1

I had the same issue and as you said none of the CSS of Script did work for me as well.

So I have to patch something with below script. This should be considered as a last option if you have any other solution available. So if you try this, you will have your issue fixed with below script:

var interval = null; //Defines the start interval variable

$(document).ready(function () { // jQuery needed for this
    /* People Picker Fix Starts */
    if (navigator.appVersion.indexOf("MSIE 10") > -1) { // IE 10 Specific condition for People Picker Bug
       interval = setInterval(adjustPeoplePicker, 2000);
    }
    /* People Picker Fix Ends */
});

function adjustPeoplePicker() {
    if ($('.ms-dlgFrame').contents().find('#resultcontent').length > 0) {
        $('.ms-dlgFrame').contents().find('#resultcontent').css('height', '350px');
        $('.ms-dlgFrame').contents().find('#MetadataTreeControlTreeSearch').css('height', '350px');
       //clearInterval(interval);
    }
}

I have tried clearing the interval so that my function stops from loop but in case of user close the dialog box and select again at that time the same has was appeared so I just commented out clearInterval(interval).

Make sure you find the proper div of your people picker from DOM. This fix is only for IE 10.