It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

Dynamic Height of custom gadget is not working in Chrome

Sreedhar PV May 04, 2015

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

0 votes
Volodymyr Krupach May 04, 2015

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.

0 votes
Sreedhar PV May 05, 2015

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

Volodymyr Krupach May 05, 2015

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 May 05, 2015

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 May 05, 2015

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

Oleksii Gnatkevych Nov 06, 2015

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
This widget could not be displayed.
This widget could not be displayed.
Community showcase
Posted in United States

Topic Tuesday: Agile

Another week, another Topic Tuesday!  Agile has been on my mind a lot lately because I've seen good implementations and bad implementations, but now as a Jira admin it matters more to me whether...

27 views 0 0
View post

Community Events

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

Find an event

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

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you