AUI Dialog 2 full screen

Confluence Development Confluence Server
1

Hi,

For my Confluence App I would like to have the option for the app contents to be displayed in “full screen”. I was looking at using the AUI Dialog 2 component for this purpose, and whilst I am able to get the dialog to render 100% width, I cannot figure out how to get the dialog to render 100% height. I there any simple way to achieve this? Alternatively is there an alternate to the Dialog 2 that I should be looking at?

CSS below

  .fullscreen-iframe-div {
     width: 100%;
     min-height: 95vh;
  } 
  
  .fullscreen-header-span-div {
     width: 100%;
     min-height: 5vh;
  }

HTML below

<section id="demo-dialog" class="aui-dialog2 aui-layer" role="dialog" tabindex="-1" aria-labelledby="dialog-show-button--heading" hidden="true">
    <header class="aui-dialog2-header">
        <div class="fullscreen-header-span-div">
          <button id="full-screen-off-button" class="aui-button aui-button-link aui-button-link-icon-text">
             <span class="aui-icon aui-icon-small aui-iconfont-vid-full-screen-off">Full screen off</span>
              Full screen off
          </button>
        <div>
    </header>
    <div class="aui-dialog2-content fullscreen-iframe-div">
 		<iframe id="aui-dialog2-content-iframe-852003" scrolling="no" height="1000" width="100%" style="border:none" sandbox="allow-scripts allow-popups allow-same-origin">
		</iframe>
    </div>
</section>

A screen shot can be seen below

Confluence
Confluence2748×1425 216 KB

Thanks and regards,
Andrew

2

Hi @AndrewTyson,

AUI does not support fullscreen dialogs but you can easily define a custom CSS class and attach it to the <section> tag from your example and set its min-height to 100vh. It looks like you don’t plan to use the standard dialog controls there so you should be fine.

Regards,
Bartosz

1 Like
3

Thanks for the response @BartoszCytrowski. I ended up using a <div> tag instead of the dialog that ended up with a better result