Header text not fit into Atlassian Connect Add-on's Dialog header

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):
headerIssue

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.

1 Like

We have exactly the same issue:

Hi,

Along with that error we have a problem where the dialog truncates the headers even when there is no need for it.


As you can see the header is being truncated even thought there is more than enough free space.

It looks to me that the reason for the title to be truncated is the fact that the max width of the header is a fixed value. A possible solution would be to make that value a percentage.

This is important to use since we have many dialogs that are getting their titles truncated unnecessarily.

Thanks,
André Rodrigues