Dynamic Height of custom gadget is not working in Chrome

[Sreedhar PV]

Hello Team,

I am developing custom gadgets using atlassian SDK for our JIRA instance. I am facing issue with dynamic height of the gadget based on the displayed content. Dynamic height is working in Firefox browser however it is not working in Chrome. Please see the below gadget xml for reference.     

I am using <Require feature="dynamic-height"/> and gadgets.window.adjustHeight(); Also tried with scrolling="true". Nothing was working in Google Chrome where Firefox is working as expected.

Please assist me to resolve this issue as this is very high priority for users.

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
    <ModulePrefs title="Group Membership Gadget" height="200" directory_title="Group Membership Gadget" 
    description="Lists all groups associated to current user and users associated to each group." author=" " scrolling="true">
        <Optional feature="gadget-directory">
            <Param name="categories">
                JIRA
            </Param>
        </Optional>
        <Optional feature="atlassian.util" />
        <Optional feature="auth-refresh" />
        <Require feature="views" />
        <Require feature="dynamic-height"/> 
        <Require feature="settitle"/>
        <Require feature="oauthpopup" />
        #oauth
        <Locale messages="__ATLASSIAN_BASE_URL__/download/resources/group-membership-gadget/i18n/ALL_ALL.xml"/>
    </ModulePrefs>
    <Content type="html" view="profile">
        <![CDATA[
        #requireResource("com.atlassian.jira.gadgets:common")
        #requireResource("com.atlassian.gadgets.publisher:ajs-gadgets")
        #includeResources()
        
         <style type="text/css">
			.collapsibleList li > input + * {
			 display: none;
			}
			 
			.collapsibleList li > input:checked + * {
			 display: block;
			}
			 
			.collapsibleList label {
			 cursor: pointer;
			}
				 
			h1 {
			 margin-left: 20px;
			 font-size: 14px;
			}
       </style>
        
        <h1>Assigned Groups</h1>
        <br>
        <script type="text/javascript">
            (function () {
                var gadget = AJS.Gadget({
                    baseUrl: "__ATLASSIAN_BASE_URL__",
                    useOauth: "/rest/gadget/1.0/currentUser",
                    view: {
                       	    onResizeReload: true, 
    					onResizeAdjustHeight: true, 
                        template: function(args) {
                             var gadget = this;
                            var userList = AJS.$("<ul/>").attr(
                            	{
                            		class: "collapsibleList"
                            	}
                            );
                            AJS.$(args.userMembershipData.groups).each(
								function() {
									var group = this;
									userList.append(
										AJS.$("<li/>").append(
											AJS.$("<label/>").attr(
												{
													for: group
												}
											).text(group)
										).append(
											AJS.$("<input/>").attr(
												{
													type: "checkbox",
													id: group,
 													onchange: "javascript:gadgets.window.adjustHeight();", 
													style: "display:none;"
												}
											)
										).append(
											function() {
												var unorderedList = AJS.$("<ul/>").attr(
												{
 													onchange: "javascript:gadgets.window.adjustHeight();", 
												}
											);
												AJS.$(args.usersData).each(
													function() {
														user = this;
														if (this.groupName == group) {
															unorderedList.append(
																
															).text(user.userNames);
														}
													}
												);
												return unorderedList;
											}
										)
									);
								}
							);
                            
                            gadget.getView().html(userList); 
                            
                        },
                        args: [
	                        {
	                            key: "userMembershipData",
	                            ajaxOptions: function() {
	                                return {
	                                    url: "/rest/groupmembership/1.0/userGroups.json"
	                                };
	                            }
	                        },
	                        {
	                            key: "usersData",
	                            ajaxOptions: function() {
	                                return {
	                                    url: "/rest/groupmembership/1.0/groupUsers.json"
	                                };
	                            }
	                        }
                        ]
                    }
                });
            })();
        </script>
        
        <div id="contentDiv"></div>
        ]]>
    </Content>
</Module>

Thanks in advance.

Sreedhar

[Sreedhar PV]

Hi Volodymyr, Thank you for your quick response.

I have modified the code as per your suggestion but still code is not working for Chrome. I find one observation that the generated iframe's content 

style="height: 341px;"

is not updating the div height based on content and behaving wired, where as in Firefox it is adjusting the height based on display content. Please see the generated iframe code for reference. 

<iframe id="gadget-10100" class="gadget-iframe" name="gadget-10100" src="http://localhost:2990/jira/plugins/servlet/gadgets/ifr?container=atlassian&mid=10100&nocache=1&country=US&lang=en&view=default&view-params=%7B%22writable%22%3A%22true%22%7D&st=atlassian%3Aky4NBN6G8wmuMFCuQic%2FxaMz%2F2J6FvgVAxxVipBxvzSFQtkMovuT8a%2FaTW3hA7Onqw01XGiDJqvfaiTkv3U9d6Uy6kdFT9GBa8OaV%2BOm0eY8SLLgLHYvPKCZmYfVs%2BayanlNU0GGkENoGxIMGVpPDgslicgNTzSgM8AMzmQAWuV6uhYTCXAZ3gJ%2Bic7eg60U0q77pWSxA7%2BrlAg1kya4cx6ibRpkHs8jMD4Y2H9GEEaErgtm%2BNBJs1y8w51PBS7xHr6nW%2BlIarp%2F1VSWbxM1GdYTE2R8b9VjLuW3RBxo9qCzCYAcdjcI6NQY%2FTetNFaBrkZETw%3D%3D&url=http%3A%2F%2Flocalhost%3A2990%2Fjira%2Frest%2Fgadgets%2F1.0%2Fg%2Fsnei-group-membership-gadget%3Asneigroupmembership%2Fgadgets%2FgroupMembershipGadget.xml&libs=auth-refresh#rpctoken=9459405" height="233" width="100%" scrolling="no" frameborder="no" 
style="height: 341px;"></iframe>

Any suggestions will be appreciated.

Thank you.

Sreedhar

[Volodymyr Krupach]

Did you try to directly set the iframe height after gadget.getView().html(userList);. At this point you can get height of the userList and adjust heoght of the iframe.

[Sreedhar PV]

No, I am not setting the iframe height. Gadget Container will generate the iframe and renders the content on it. All I did was adding "javascript:gadgets.window.adjustHeight();" onchange of list. In case of Firefox, height of iframe is changing dynamically on click of list. But for Chrome, iframe height is changing dynamically but behaving wired and list content is not displaying completely.

[Volodymyr Krupach]

Looks like you need to calculate height and adjust iframe height whenever your content is changed.

[Oleksii Gnatkevych]

Same problem with me, in FF/Chrome. The iframe height=xxx is exactly right, but at the same time iframe style="hight:yyy" is different, and when I resize your browser window I witness how 'jumpy' this difference becomes.

[Volodymyr Krupach]

Try to add:

setTimeout(function() {
          gadget.resize();
        }, 500);

to the end of the view, template function like in the snippet here: https://answers.atlassian.com/questions/14193899

For future, please use code blocks for posting your code snippets to make it more readable.