Hello, Community,
I am working in Atlassian Cloud Development environment.
My custom dialog header seems not to fit into the header box (not because of its length), looks like this is because of improper style (it has display:inline-block; If we change it to display:inline; it works):
My atlassian-connect.json
{
"baseUrl": "${addon.base-url}",
"key": "my-addon-key",
"name": "my Add-on",
"vendor": {
"name": "My Vendor",
"url": "https://www.my-vendor.com/"
},
"authentication": {
"type": "jwt"
},
"lifecycle": {
"installed": "/installed",
"uninstalled": "/uninstalled"
},
"scopes": ["READ", "WRITE", "ACT_AS_USER"],
"modules": {
"webSections": [
{
"key": "opsbar-section-custom",
"name": { "value": "Customn Opsbar Section" },
"location": "opsbar-operations"
}],
"webItems": [
{
"key": "custom-operation",
"name": { "value": "Custom operation" },
"location": "opsbar-section-custom",
"weight": 110,
"context": "addon",
"target": {
"type": "dialogmodule",
"options": {
"key": "custom-dialog"
}
}
}],
"dialogs": [
{
"key": "custom-dialog",
"url": "/customdialog",
"options": {
"width": "600px",
"height": "200px",
"chrome": true,
"header": {
"value": "My Custom Dialog"
}
}
}]
}
}
The dialog html is empty:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><title>Empty dialog</title></head>
<body>Empty body</body>
</html>
The issue exists at least in Chrome and Firefox browsers.
How can I make the header text fit fully in the header?
Thank you.