Dynamic Height of custom gadget is not working in Chrome

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

2 answers

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.

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. 

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

Any suggestions will be appreciated.

 

Thank you.

Sreedhar

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.

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.

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

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.

Suggest an answer

Log in or Sign up to answer
Community showcase
Posted Friday in United States

Confluence Security Advisory

Good morning Members, Not sure if you are aware. Please read the following: https://www.icloud.com/keynote/0RyJ4VEdNUpjDpGfMhfZx9fEg#Confluence_Security_Advisor More details: https://co...

57 views 1 0
View post

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you