Dialog position and style (JIRA)

[Tobias Gurock]

Hi all,

I use the AP dialog JavaScript API to open a dialog:

AP.require('dialog', function(dialog)
{
dialog.create({
key: ..,
width: ..,
height: ..
});
});

This works fine except that the dialog is displayed nearly at the top of
the window (top: 169px) and not vertically aligned/centered like other
dialogs in JIRA. Is this the expected behavior or can this be
configured/changed?

I also noticed that chrome-less dialogs don't use the rounder corner
design like the built-in dialogs. Is there a way to change this for
chrome-less dialogs?

Kind regards,
Tobias Gurock

[Vitaliy Zurian]

Good point about rounded corners for the chrome-less dialogs! I was just about to ask the same question

[Trevor Sumner]

You have to implement the styling from the AUI in order to get it displaying correctly when using chromeless... https://docs.atlassian.com/aui/latest/docs/dialog2.html

A sample of layout content would be:

<!-- Render the dialog -->

<section role="dialog" id="demo-dialog" class="aui-layer aui-dialog2 aui-dialog2-large">

    <!-- Dialog header -->

    <header class="aui-dialog2-header">

        <!-- The dialog's title -->

        <h2 class="aui-dialog2-header-main">Title</h2>

        <!-- Actions to render on the right of the header -->

        <div class="aui-dialog2-header-secondary">

        </div>

        <!-- Close icon -->

        <a class="aui-dialog2-header-close">

        </a>

    </header>

    <!-- Main dialog content -->

    <div class="aui-dialog2-content">

        <form class="aui">

            <div class="form-body">

            </div>

        </form>

    </div>

    <!-- Dialog footer -->

    <footer class="aui-dialog2-footer">

        <!-- Actions to render on the right of the footer -->

        <div class="aui-dialog2-footer-actions">

            <button id="dialog-submit-button" class="aui-button aui-button-primary">Submit</button>

            <button id="dialog-close-button" class="aui-button aui-button-link">Close</button>

        </div>

        <!-- Hint text is rendered on the left of the footer -->

        <div class="aui-dialog2-footer-hint">Hint</div>

    </footer>

</section>

You'd ofcourse need the AUI references.

Hope it helps.

--
You received this message because you are subscribed to the Google Groups "Atlassian Connect Dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to atlassian-connec...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Vitaliy Zurian]

Travor, thank you for your reply!

This should work, yes! 

Although it would not make much sense I've just realised, since the Y offset from the top of the page is too big. 

I wanted to use the chromeless dialog to win some extra space, but it didn't work - the chromeless dialog has even more offset

To unsubscribe from this group and stop receiving emails from it, send an email to atlassian-connect-dev+unsub...@googlegroups.com.

[Trevor Sumner]

There's a top margin in the aui css which you can modify to get a little more height.  I don't know why, but they've included it and it shifts everything down quite a bit.

I'm not at my machine but try inspecting the code and see if you can locate it else I'll give you the details tomorrow.

>>> To unsubscribe from this group and stop receiving emails from it, send an email to atlassian-connec...@googlegroups.com.

>>> For more options, visit https://groups.google.com/d/optout.
>>
>>

> --
> You received this message because you are subscribed to the Google Groups "Atlassian Connect Dev" group.

> To unsubscribe from this group and stop receiving emails from it, send an email to atlassian-connec...@googlegroups.com.

[Vitaliy Zurian]

Hey, Trevor!

But I can't override this CSS from within the modal iframe.

We are talking about webitem, right? When the add-on content is inserted into the modal (webitem with target "dialog")

>>> To unsubscribe from this group and stop receiving emails from it, send an email to atlassian-connect-dev+unsub...@googlegroups.com.

>>> For more options, visit https://groups.google.com/d/optout.
>>
>>
> --
> You received this message because you are subscribed to the Google Groups "Atlassian Connect Dev" group.

> To unsubscribe from this group and stop receiving emails from it, send an email to atlassian-connect-dev+unsub...@googlegroups.com.