Inline Macro displays too high

Confluence Development Confluence Cloud
, ,
1

I’m writing a dynamic content macro for confluence with atlassian connect which just inserts a bit of inline text into the page. At the moment this works fine except the text is always about 5px above where it should be. This seems to be caused by the position of the iframe itself.

shot.png1287×603 52.2 KB

Is there anything I can do to bring the text down into line?

Here is my code:

atlassian-connect.json

{
     "name": "CDOX",
     "description": "CDOX Add-on",
     "key": "com.cognidox.cdox",
     "baseUrl": "https://www.example.com/atlassian",
     "vendor": {
         "name": "Cognidox Ltd.",
         "url": "http://www.cognidox.com"
     },
     "authentication": {
         "type": "none"
     },
  "modules": {
    "dynamicContentMacros": [
      {
        "key": "cdox",
        "name": {
          "value": "CDOX"
        },
        "url": "/part.php",
        "description": {
          "value": "Link to CDOX part numbers"
        },
        "outputType": "INLINE",
        "output-type": "INLINE",
        "bodyType": "none",
      }
    ]
  }
 }

part.php

<!doctype html>
<html>
<head>
<title>CogniDox</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="//aui-cdn.atlassian.com/aui-adg/6.0.6/css/aui.min.css" media="all">
<link rel="stylesheet" href="//aui-cdn.atlassian.com/aui-adg/6.0.6/css/aui-experimental.min.css" media="all">
<script src="//aui-cdn.atlassian.com/aui-adg/6.0.6/js/aui.min.js"></script>
<script src="//aui-cdn.atlassian.com/aui-adg/6.0.6/js/aui-experimental.min.js"></script>
<script src="//aui-cdn.atlassian.com/aui-adg/6.0.6/js/aui-datepicker.min.js"></script>
<script src="//aui-cdn.atlassian.com/aui-adg/6.0.6/js/aui-soy.min.js"></script>

<style>
a {
    text-decoration: none;
}
body, html {
    background-color: #fff;
    padding: 0;
    margin: 0;
    white-space:nowrap;
    overflow: visible;
}
#container {
    display: inline-block;
    white-space:nowrap;
    margin: 0;
    white-space:nowrap;
    overflow: visible;
    position: fixed;
    bottom: 0px;
}
#content {
    position: relative;
    margin: 0;
    display: block;
    white-space:nowrap;
    overflow: visible;
}
img {
    padding-right: 3px;
}
</style>

</head>
<body>
<span id='container'>
<span id="content" class='ac-content'>
foo
</span>
</span>

<div data-options="resize: false; margin: false"></div>
<script data-options='resize: false; margin: false'>

function resize() {
    var elem = $("#container");
    var width = elem.width();
    var height = elem.height();
    AP.resize(width, height);
}

$(function() {
  var getUrlParam = function (param) {
    var codedParam = (new RegExp(param + '=([^&]+)')).exec(window.location.search)[1];
    return decodeURIComponent(codedParam);
  };

  var baseUrl = getUrlParam('xdm_e') + getUrlParam('cp');
  $.getScript(baseUrl + '/atlassian-connect/all.js', function() {
    console.log("I can use AP now");
    setTimeout(resize, 200);
  });
});
</script>

</body>
</html>
2

Hi Lewis,

it took me a while as well to go move the iFrame to the baseline of the text - this is the lowest position you can achieve I assume.

The calculation of width and height are right? I had to set width and height of the element I’m checking to auto.

The only other difference I see: body overflow is hidden in my case.

Andreas

3

Hi Andreas,

I have exactly the same issue as Lewis. I have also figured out that the problem is solved when the iFrame has vertical-align: text-bottom. Unfortunately this is not possible to achieve from inside the iFrame.

Could you possibly provide some code, like your styles, your HTML structure and how you resize the iFrame so that I can see what I am doing wrong?

Wishes
Peter

4

Hi Pete,

the relevant part of my code is as follows:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
    <head>
    	<script th:src="@{${atlassianConnectAllJsUrl}}" type="text/javascript" data-options="resize:false;base:true;"></script>
    	<link rel="stylesheet" href="//aui-cdn.atlassian.com/aui-adg/6.0.6/css/aui.min.css" media="all"/>
    </head>
	
	<body style="background-color:transparent;overflow:hidden">
		<span class="ac-content" id="cite2" style="height:auto;width:auto;white-space:nowrap" th:utext="${simpleCiteContent}"></span>
	</body>
	
	<script th:inline="javascript">
    /*<![CDATA[*/
    
    	// resize the iframe
		var textWidth = Math.ceil(document.getElementById("cite2").getBoundingClientRect().width) + 1.0;
		var textHeight = Math.ceil(document.getElementById("cite2").getBoundingClientRect().height) + 1.0;
		AP.resize(textWidth.toString() + "px", textHeight.toString() + "px");