Onsen Ui dialog Fullscreen

2
votes

How can i make this onsenUi dialog open as fullscreen? I have a image inside this dialog.

  <ons-dialog style="width:305px;height:400px;" var="naviDialog" cancelable>

        <ons-navigator var="myNav">
            <ons-toolbar inline>
                <div class="center">
                   text sample
                </div>
            </ons-toolbar>

            <div class="dialog">
                <p>
                     <img src="images/picone.png"/>

                </p>

            </div>
        </ons-navigator>
    </ons-dialog>
2
onsen-ui

2 Answers

2
votes

I've found a way 

<ons-dialog style="width:100%; height:100vh;" var="naviDialog" cancelable>
1
votes

In order to make it vary according to the image size I've done the following:

/* under CC0 waiver */

.dialog{
    width: auto;
    max-width: 90%;
}

.dialog img{
    width: auto;
}

Hope it helps others