atlassian gadget height is not working in Google Chrome browser - browser

Question

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.
Can any one help me to fix this issue?
<?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="dynamic-height"/>
<Require feature="views" />
<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,canvas,home">
<![CDATA[
#requireResource("com.atlassian.jira.gadgets:common")
#requireResource("com.atlassian.gadgets.publisher:ajs-gadgets")
#requireResource("confluence.web.resources:jquery")
#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: {
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);
onchange: "javascript:gadgets.window.adjustHeight();"
}
}
);
return unorderedList;
}
)
);
}
);
javascript:gadgets.window.adjustHeight();
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>
]]>
</Content>

Answer 1

I had a similar problem with a blogger gadget, after days looking I solved it by putting style="overflow: hidden;" in the html tag. Although html tag was generated I use jquery for that. So the solution was:
$('html').attr('overflow','hidden');