ons.dialog is there but invisible

[jcdenton]

I have a dialog defined like this:

<ons-template id="languagedialog.html" ng-controller="settingsCtrl">
        <ons-dialog cancelable>
            <p class="alert-dialog-title" style="font-weight: 500;width:100%">Switch language</p>
            <ons-list modifier="material">
                <ons-list-item tappable modifier="material">
                    <label class="left">
                        <ons-input name="lg" type="radio" input-id="lang1" value="lang1"></ons-input>
                    </label>
                    <label for="lang1" class="center">
                        lang1
                    </label>
                </ons-list-item>
                <ons-list-item tappable modifier="nodivider">
                    <label class="left">
                        <ons-input name="lg" type="radio" input-id="lang2"  value="lang2"></ons-input>
                    </label>
                    <label for="lang2" class="center">
                        lang2
                    </label>
                </ons-list-item>
            </ons-list>
        </ons-dialog>
    </ons-template>

in my controller i have this:

if(!languagedlg)
   ons.createDialog('languagedialog.html', { parentScope: $scope })
          .then(function(dialog) {
               languagedlg = dialog;
               dialog.show();
            });
else{
   languagedlg.show();
}

When I tap on the button that opens the dialog i can see the overlay but the dialog is invisible. It’s there because I click (blindly) on the radio buttons and it’s working but it doesn’t appear on the screen. Tried to debug but there are no any errors and the CSS seems fine. Check screenshot below:

What am I doing wrong?

Tried on nexus 5 and nexus 9 with Onsen .rc10

[jcdenton]

I am changing the theme using gulp and editing the .styl file. Found out that something is wrong with how gulp is building the .css file.

Instead, tried to edit the theme from http://components2.onsen.io/ and replaced the .css file with the one I downloaded and the dialogs appeared again.

Although downloading the file from the url above, the dialogs showed up again, some default classes are not applied for list items. i.e I have :

<ons-list>
   <ons-list-item>
     <div class="left"><ons-icon></ons-icon></div>
     <div class="center">text</div>
   </ons-list-item>
</ons-list>

the two divs are shown one below the other and not inline as they should.
Which is normal, because checking the .CSS file there are no any rules for list__item__center,list__item__left and list__item__right.

What version of OnsenUI the above URL generates the .css for?

[jcdenton]

The CSS file that I generated using gulp had this block for some reason:

.dialog-container {
  height: inherit;
  min-height: inherit;
  overflow: hidden;
  border-radius: 4px;
  background-color: #f4f4f4;
  -webkit-mask-image: url("data:image/png");
}

While the .CSS file downloaded from the components2 URL did not had it…
So I commented out only the -webkit-mask-image:url("data:image/png"); rule and the dialogs appearing again.

[steve_mapes]

I had the same problem which was caused by the CSP directive blocking the image

Refused to load the image '<URL>' because it violates the following Content Security Policy directive: "default-src * 'unsafe-inline' gap:". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

So for me a work around without reducing the CSP was to simply set the webkit-mask-image to none for the class dialoug-container

.dialog-container {
    -webkit-mask-image: none;
}