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

enter image description here

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:

enter image description here

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:-

    $("#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.


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');

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.

  • before i try your script which sound great,, why you mentioned that it should be the last option ? does it have any drawbacks ? – – john Gu Jun 9 '15 at 11:06
  • 1
    This scripts continuously runs where we have defined it. Every 2 second this script will run, so you might find a minor performance degradation. That is why I wrote that. – Pradip R. Jun 9 '15 at 11:11
  • 1
    Answer 1: You can make it run once, but if you do so it will work first time and the other time without postback the issue will be there(close people dialog and re open). So I have to call it with interval of time. Answer 2: if you can find user click then you can call this script to adjust height. – Pradip R. Jun 9 '15 at 11:48
  • 1
    Try hitting breakpoint with the help of Developer tools. – Pradip R. Jun 9 '15 at 12:53
  • 1
    seems all the approachies will fail ,, and i need to have the script which contain the timer as is ... – john Gu Jun 9 '15 at 23:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.