Have a code that searches group names using the people picker app. I write the same code one on default.aspx and the other in a client webpart page.But, both show results quiet differently. For example i would want the expand and shrink functionality of the input box in a Default.aspx work the same way in a client webpart.aspx page as well.

My code is as follows:


a div element: id="peoplePickerGroupDiv" style="height: 20px"

Script file:

$(document).ready(function () {



function initializePeoplePickerForGroup() {

// Create a schema to store picker properties, and set the properties.
var option = {};
option['PrincipalAccountType'] = 'SPGroup';
option['SearchPrincipalSource'] = 15;
option['ResolvePrincipalSource'] = 15;
option['AllowMultipleValues'] = true;
option['MaximumEntitySuggestions'] = 50;
option['Width'] = '280px';

SPClientPeoplePicker_InitStandaloneControlWrapper('peoplePickerGroupDiv', null, option);


Result on CWP.aspx: ClientWeppage

Result on Default.aspx: default.aspx

Could anyone guide me to known why there is a difference and how could i possibly solve it?


It looks like you are missing the CSS file that has the CSS for the people picker control, you can inspect it in both your cases to see if this is truly the case.

If so, you can try adding the following in your client web part, is some default code that is automatically added but maybe you've deleted it:

// Set the style of the client web part page to be consistent with the host web.
            (function () {
                var hostUrl = '';
                var link = document.createElement('link');
                link.setAttribute('rel', 'stylesheet');
                if (document.URL.indexOf('?') != -1) {
                    var params = document.URL.split('?')[1].split('&');
                    for (var i = 0; i < params.length; i++) {
                        var p = decodeURIComponent(params[i]);
                        if (/^SPHostUrl=/i.test(p)) {
                            hostUrl = p.split('=')[1];
                            link.setAttribute('href', hostUrl + '/_layouts/15/defaultcss.ashx');
                if (hostUrl == '') {
                    link.setAttribute('href', '/_layouts/15/1033/styles/themable/corev15.css');
  • The problem has now been partially solved. I get exactly the same appearence in both the pages though the functionality of dynamic expansion of the input box does not happen! I did not use any css property on either of these pages. I also rechecked at run time their CSS properties with F12 key. I could not trace out any difference as such. Wonder what could make the input box behave differently! – samve Feb 15 '17 at 13:45

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.