如何在单击链接以显示对话框后立即触发脚本

Question

I am working on a web application that will show a dialog box after clicking on a link. the problem is that the dialog height is very small when using IE10 as follow:-

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.

after trying many approaches the only option that works is to set a timer that fires each 2 seconds to reset the height, as follow:-

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

but i do not want to keep firing the script each2 seconds , so i modify my script to only fires when a user clicks on a link that have an imag, as follow:-

<script type= "application/javascript">
var interval = null; //Defines the start interval variable

$(document).ready(function () { // jQuery needed for this

    $('a img').on('click', adjustPeoplePicker);    /* 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);
    }

}
}});
</script>

but this will not work, and the height will not be changed.

so can anyone advice on this please? Thanks

EDIT here is part of the markup for the dialog :-

        <tbody><tr>
            <td width="16" height="16"><img width="8" height="1" alt="" src="/_layouts/15/images/blank.gif?rev=23"></td>
            <td width="100%" height="20"><img width="8" height="1" alt="" src="/_layouts/15/images/blank.gif?rev=23"></td>
            <td width="15" height="8"><img width="8" height="1" alt="" src="/_layouts/15/images/blank.gif?rev=23"></td>
        </tr>
        <tr>
            <td width="15">&nbsp;</td>
            <td width="100%" height="20"><span><table style="width: 100%;" cellspacing="0" cellpadding="0">
    <tbody><tr style="width: 100%;">
        <td class="ms-descriptiontext" style="white-space: nowrap;"><label for="ctl00_PlaceHolderDialogBodySection_ctl07_queryTextBox"><b>Find</b>&nbsp;</label></td><td style="width: 100%;"><input name="ctl00$PlaceHolderDialogBodySection$ctl07$queryTextBox" class="ms-pickersearchbox" id="ctl00_PlaceHolderDialogBodySection_ctl07_queryTextBox" accesskey="S" style="width: 100%;" onkeydown="var e=event; if(!e) e=window.event; if(!browseris.safari &amp;&amp; e.keyCode==13) { document.getElementById('ctl00_PlaceHolderDialogBodySection_ctl07_queryButton').click(); return false; }" type="text" maxlength="1000" alwaysenablesilent="true"></td><td><div class="ms-browseimage"><input name="ctl00$PlaceHolderDialogBodySection$ctl07$queryButton" title="Search" id="ctl00_PlaceHolderDialogBodySection_ctl07_queryButton" onclick='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$PlaceHolderDialogBodySection$ctl07$queryButton", "", true, "", "", false, false))' type="image" alt="Search" src="/_layouts/15/images/browse.png"></div></td><td><select name="ctl00$PlaceHolderDialogBodySection$ctl07$viewPicker" class="ms-pickerdropdown" id="ctl00_PlaceHolderDialogBodySection_ctl07_viewPicker">
            <option value="">List View</option>
            <option value="">Detailed View</option>

        </select></td>
    </tr>
</tbody></table></span></td>
            <td width="15">&nbsp;</td>
        </tr>
    <tr><td width="15"><img width="15" height="1" alt="" src="/_layouts/15/images/blank.gif?rev=23"></td><td class="ms-descriptiontext"><span id="ctl00_PlaceHolderDialogBodySection_ctl09"></span></td><td width="15"><img width="15" height="1" alt="" src="/_layouts/15/images/blank.gif?rev=23"></td></tr>
        <tr>
            <td width="15">&nbsp;</td>
                <td class="ms-descriptiontext" style="color: red;">
                    <span id="ctl00_PlaceHolderDialogBodySection_ctl08"></span>
                </td>
            <td width="15">&nbsp;</td>
        </tr>
        <tr height="100%">
            <td width="15"><img width="15" height="200" alt="" src="/_layouts/15/images/blank.gif?rev=23"></td>
            <td height="100%">
                <table width="100%" height="100%" class="ms-pickerresultoutertable" id="ResultOuterTable" style="height: 202px;" cellspacing="0" cellpadding="0">
                    <tbody><tr height="100%">
                        <td class="TreeContainer" id="SearchArea" style="height: 100%; vertical-align: top; display: block;">
                <div class="ms-pickertreediv" id="MetadataTreeControlTreeSearch" style="height: 45px;"><ul class="TmtTree" id="MetadataTreeControlTreeSearch_ul"><li id="0"><div class="treenodediv" id="_Div2"><span id="_ImgContainer"><img width="16" height="1" tabindex="-1" class="ti" src="/_layouts/15/Images/blank.gif"></span><img width="4" height="20" title="Icon" id="ICN_2" alt="Icon" src="/_layouts/15/Images/blank.gif"><span class="tnn" id="TXN_2"><span class="ms-input" id="TXC_2"><span tabindex="0" id="LBL_2"></span><input tabindex="0" class="ms-input display-none" id="IPT_2"></span></span></div><ul id="0_ul"></ul></li></ul></div>
            </td>
            <td class="TreeContainer" id="BrowseArea" style="width: 0px; vertical-align: top; display: none;">
                <div class="ms-pickertreediv" id="MetadataTreeControlTreeBrowse" style="height: 0px;"></div>
            </td>
            <td class="ms-verticalAlignTop" id="ResultArea" style="width: 60%; vertical-align: top;">
                <div class="ms-pickerresultdiv" id="resultcontent" style="height: 45px;"><table class="pickerresulttable" id="resultTable" style="width: 100%; border-collapse: collapse; background-color: white;" hidefocus="true" border="0" cellpadding="0" cellspaceing="0" EditorControlClientId="ctl00_PlaceHolderDialogBodySection_ctl05"><tbody><tr class="ms-pickerresultheadertr"><th class="ms-ph" SortOrder="Asc">Display Name</th><th class="ms-ph" SortOrder="Asc">E-mail Address</th><th class="ms-ph" SortOrder="Asc">Title</th><th class="ms-ph" SortOrder="Asc">Department</th><th class="ms-ph" SortOrder="Asc">Presence</th><th class="ms-ph" SortOrder="Asc">Work Phone</th><th class="ms-ph" SortOrder="Asc">Location</th></tr><tr tabindex="0" class="ms-alternating" id="row0" resultRow="resultRow" entityXml='<Entities Append="False" Error="" Separator=";" MaxHeight="3"><Entity Key="i:0#.w|..." DisplayText="test" IsResolved="True" Description="i:0#.w|ddd\**"><ExtraData><ArrayOfDictionaryEntry xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema"><DictionaryEntry><Key xsi:type="xsd:string">Email</Key><Value xsi:type="xsd:string">test@test.net</Value></DictionaryEntry><DictionaryEntry><Key xsi:type="xsd:string">Title</Key><Value xsi:type="xsd:string">Network Support Manager</Value></DictionaryEntry><DictionaryEntry><Key xsi:type="xsd:string">Department</Key><Value xsi:type="xsd:string">Network</Value></DictionaryEntry><DictionaryEntry><Key xsi:type="xsd:string">SIPAddress</Key><Value xsi:type="xsd:string">test2@test.net</Value></DictionaryEntry><DictionaryEntry><Key xsi:type="xsd:string">WorkPhone</Key><Value xsi:type="xsd:string"></Value></DictionaryEntry><DictionaryEntry><Key xsi:type="xsd:string">Location</Key><Value xsi:type="xsd:string"></Value></DictionaryEntry></ArrayOfDictionaryEntry></ExtraData><MultipleMatches /></Entity></Entities>' key="i:0#.w|addd"><td class="ms-pb">ttttt<a id="resultTable_row0_Link" href="javascript:"><img width="1" height="1" alt="ttttt" src="/_layouts/15/Images/blank.gif" border="0"></a></td><td class="ms-pb">test@test.net</td><td class="ms-pb">Network Support Manager</td><td class="ms-pb">Network</td><td class="ms-pb">test@test.net</td><td class="ms-pb"></td><td class="ms-pb"></td></tr><tr tabindex="0" class="ms-alternating" id="row1" resultRow="resultRow" entityXml='<Entities Append="False" Error="" Separator=";" MaxHeight="3"><Entity Key="i:0#.w|test" DisplayText="tttt" IsResolved="True" Description="i:0#.w|test"><ExtraData><ArrayOfDictionaryEntry xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema"><DictionaryEntry><Key xsi:type="xsd:string">Email</Key><Value xsi:type="xsd:string">test.net</Value></DictionaryEntry><DictionaryEntry><Key xsi:type="xsd:string">Title</Key><Value xsi:type="xsd:string">Head of Support</Value></DictionaryEntry><DictionaryEntry><Key xsi:type="xsd:string">Department</Key><Value xsi:type="xsd:string">IT Services</Value></DictionaryEntry><DictionaryEntry><Key xsi:type="xsd:string">SIPAddress</Key><Value xsi:type="xsd:string">test.net</Value></DictionaryEntry><DictionaryEntry><Key xsi:type="xsd:string">WorkPhone</Key><Value xsi:type="xsd:string"></Value></DictionaryEntry><DictionaryEntry><Key xsi:type="xsd:string">Location</Key><Value xsi:type="xsd:string"></Value></DictionaryEntry></ArrayOfDictionaryEntry></ExtraData><MultipleMatches /></Entity></Entities>' key="i:0#.w|test"><td class="ms-pb">tttt<a id="resultTable_row0_Link" href="javascript:"><img width="1" height="1" alt="tttt" src="/_layouts/15/Images/blank.gif" border="0"></a></td><td class="ms-pb">FAl-test.net</td><td class="ms-pb">Head of Support</td><td class="ms-pb">IT Services</td><td class="ms-pb">test.net</td><td class="ms-pb"></td><td class="ms-pb"></td></tr><tr tabindex="0" class="ms-alternating" id="row2" resultRow="resultRow" entityXml='<Entities Append="False" Error="" Separator=";" MaxHeight="3"><Entity Key="i:0#.w|atttt" DisplayText="tttt" IsResolved="True" Description="i:0#.w|attt"><ExtraData><ArrayOfDictionaryEntry xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema"><DictionaryEntry><Key xsi:type="xsd:string">Email</Key><Value xsi:type="xsd:string">ttt</Value></DictionaryEntry><DictionaryEntry><Key xsi:type="xsd:string">Title</Key><Value xsi:type="xsd:string">COO</Value></DictionaryEntry><DictionaryEntry><Key xsi:type="xsd:string">Department</Key><Value xsi:type="xsd:string">Directors</Value></DictionaryEntry><DictionaryEntry><Key xsi:type="xsd:string">SIPAddress</Key><Value xsi:type="xsd:string">ttt</Value></DictionaryEntry><DictionaryEntry><Key xsi:type="xsd:string">WorkPhone</Key><Value xsi:type="xsd:string"></Value></DictionaryEntry><DictionaryEntry><Key xsi:type="xsd:string">Location</Key><Value xsi:type="xsd:string"></Value></DictionaryEntry></ArrayOfDictionaryEntry></ExtraData><MultipleMatches /></Entity></Entities>' key="i:0#.w|ad-tttt"><td class="ms-pb">tttt<a id="resultTable_row0_Link" href="javascript:"><img width="1" height="1" alt="ttt" src="/_layouts/15/Images/blank.gif" border="0"></a></td><td class="ms-pb">tttt</td><td class="ms-pb">COO</td><td class="ms-pb">Directors</td><td class="ms-pb">tt</td><td class="ms-pb"></td>

//code goes here for the dialog options
</td></tr></tbody></table></div>
            </td>
                    </tr>
                </tbody></table>
            </td>
            <td width="15"><img width="15" height="200" alt="" src="/_layouts/15/images/blank.gif?rev=23"></td>
        </tr>
        <tr>
            <td height="14"><img width="1" height="5" alt="" src="/_layouts/15/images/blank.gif?rev=23"></td>
        </tr>
        <tr id="ctl00_PlaceHolderDialogBodySection_EditorRow" style="display: none; position: absolute;">
    <td width="15">&nbsp;</td>
    <td width="100%">
                <table width="100%" cellspacing="0" cellpadding="0">
                    <tbody><tr>
                        <td><input name="ctl00$PlaceHolderDialogBodySection$AddSel" disabled="disabled" class="ms-NarrowButtonHeightWidth" id="ctl00_PlaceHolderDialogBodySection_AddSel" accesskey="A" onclick="addSelected_Click();" type="button" value="Add ->"></td>
                        <td width="10"><img width="4" height="1" alt="" src="/_layouts/15/images/blank.gif?rev=23"></td>
                        <td width="100%"><span id="ctl00_PlaceHolderDialogBodySection_ctl05" aria-live="polite" aria-relevant="all" style="width: 100%; display: inline-block;" showentitydisplaytextintextbox="0" eeaftercallbackclientscript="" invalidate="false" allowtypein="false" showdatavalidationerrorborder="false" prefercontenteditablediv="true" moreitemstext="More Names..." allowempty="1" nomatchestext="<No Matching Names>" value="" removetext="Remove" editoroldvalue=""><input name="ctl00$PlaceHolderDialogBodySection$ctl05$hiddenSpanData" id="ctl00_PlaceHolderDialogBodySection_ctl05_hiddenSpanData" type="hidden" value=""><input name="ctl00$PlaceHolderDialogBodySection$ctl05$OriginalEntities" id="ctl00_PlaceHolderDialogBodySection_ctl05_OriginalEntities" type="hidden" value="<Entities />"><input name="ctl00$PlaceHolderDialogBodySection$ctl05$HiddenEntityKey" id="ctl00_PlaceHolderDialogBodySection_ctl05_HiddenEntityKey" type="hidden"><input name="ctl00$PlaceHolderDialogBodySection$ctl05$HiddenEntityDisplayText" id="ctl00_PlaceHolderDialogBodySection_ctl05_HiddenEntityDisplayText" type="hidden"><table class="ms-usereditor" id="ctl00_PlaceHolderDialogBodySection_ctl05_OuterTable" style="width: 100%; border-collapse: collapse;" cellspacing="0" cellpadding="0">
        <tbody><tr valign="bottom">
            <td valign="top"><table style="width: 100%; table-layout: fixed;" cellspacing="0" cellpadding="0">
                <tbody><tr>
                    <td id="ctl00_PlaceHolderDialogBodySection_ctl05_containerCell"><div tabindex="0" title="People Picker" class="ms-inputuserfield ms-inputBox" id="ctl00_PlaceHolderDialogBodySection_ctl05_upLevelDiv" role="textbox" aria-haspopup="true" style="height: 20px; -ms-overflow-x: hidden; -ms-word-wrap: break-word;" spellcheck="false" aria-multiline="true" onkeydown="return onKeyDownRw('ctl00_PlaceHolderDialogBodySection_ctl05', 3, false, event);" onkeyup="return onKeyUpRw('ctl00_PlaceHolderDialogBodySection_ctl05');" onclick="onClickRw(true, true,event,'ctl00_PlaceHolderDialogBodySection_ctl05');" onchange="updateControlValue('ctl00_PlaceHolderDialogBodySection_ctl05');" ondragstart="canEvt(event);" oncopy="docopy('ctl00_PlaceHolderDialogBodySection_ctl05',event);" onpaste="dopaste('ctl00_PlaceHolderDialogBodySection_ctl05',event);" onfocusin="StoreOldValue('ctl00_PlaceHolderDialogBodySection_ctl05'); saveOldEntities('ctl00_PlaceHolderDialogBodySection_ctl05'); Sys.UI.DomElement.addCssClass(this, 'ms-inputBoxActive');" onfocusout="if(typeof(ExternalCustomControlCallback)=='function'){ if(ShouldCallCustomCallBack('ctl00_PlaceHolderDialogBodySection_ctl05',event)){if(!ValidatePickerControl('ctl00_PlaceHolderDialogBodySection_ctl05')){ShowValidationError();return false;}else {ExternalCustomControlCallback('ctl00_PlaceHolderDialogBodySection_ctl05');}}} Sys.UI.DomElement.removeCssClass(this, 'ms-inputBoxActive');" name="upLevelDiv" autopostback="0" prefercontenteditablediv="true" rows="1"></div><textarea name="ctl00$PlaceHolderDialogBodySection$ctl05$downlevelTextBox" title="People Picker" class="ms-inputuserfield ms-inputBox" id="ctl00_PlaceHolderDialogBodySection_ctl05_downlevelTextBox" style="width: 100%; display: none; position: absolute;" onkeydown="return onKeyDownRw('ctl00_PlaceHolderDialogBodySection_ctl05', 3, false, event);" onkeyup="return onKeyUpRw('ctl00_PlaceHolderDialogBodySection_ctl05');" onfocus="StoreOldValue('ctl00_PlaceHolderDialogBodySection_ctl05'); saveOldEntities('ctl00_PlaceHolderDialogBodySection_ctl05'); Sys.UI.DomElement.addCssClass(this, 'ms-inputBoxActive');" onblur="if(typeof(ExternalCustomControlCallback)=='function'){ if(ShouldCallCustomCallBack('ctl00_PlaceHolderDialogBodySection_ctl05',event)){if(!ValidatePickerControl('ctl00_PlaceHolderDialogBodySection_ctl05')){ShowValidationError();return false;}else {ExternalCustomControlCallback('ctl00_PlaceHolderDialogBodySection_ctl05');}}} Sys.UI.DomElement.removeCssClass(this, 'ms-inputBoxActive');" onchange="updateControlValue('ctl00_PlaceHolderDialogBodySection_ctl05');" rows="1" cols="20" autopostback="0" renderascontenteditablediv="true"></textarea></td>
                </tr>
            </tbody></table></td>
        </tr><tr>
            <td><span class="ms-error" id="ctl00_PlaceHolderDialogBodySection_ctl05_errorLabel"></span></td>
        </tr>
    </tbody></table></span></td>
                    </tr>
                </tbody></table>
            </td>
    <td width="15">&nbsp;</td>
</tr>

    </tbody>

Answer 1

To fix the problem, why not just use CSS:

.ms-pickerresultdiv[style]{
    height:auto !important;
    max-height:350px !important;
}

Or just

.ms-pickerresultdiv[style]{
    height:350px !important;
}

If you need to increase the size of the parent table cell, this should do it:

#row2 td:last-child{
    height:350px;
}

Or based on your script, override these two elements:

#MetadataTreeControlTreeSearch,
#resultcontent[style]{
    height:350px !important;
}

Although I can't find the #MetadataTreeControlTreeSearch element within your posted code.

Here's a fiddle with all that

Either of those should override the inline style.

Answer 2

a style property on an element will not be set by the browser automatically. some other part of your application code is setting the div's style height property to 45px . the style property has priority over other stylesheets.

try to isolate and remove that code.