Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Dialog issues



  • I am opening a dialog but when i open it for the first time it shows angular coding part in it ,then shows properly. Plesae suggest me the solution for this.

    Code is this.

    <ons-dialog var="feedback" animation="none" mask-color="rgba(0, 0, 0, 0.4)" cancelable>
    
        <div class="dialog" style="z-index: 20001;min-width: 98%!important;">
    
            <ons-icon size="40px" icon="ion-ios-close-empty" class="crossicon" ng-click="hidefeedbackDialog()"></ons-icon>
    
            <div ng-show="showStars">
    
    
                <ons-row>
    
                    <ons-col ng-repeat="rating in ratings">
    
                        <div star-rating rating-value="rating.current" max="rating.max" on-rating-selected="getSelectedRating(rating)">
                        </div>
                    </ons-col>
                </ons-row>
            </div>
    
            <div class="main_feedback">
    
                <div ng-show="showMe">
                    <ons-toolbar class="toolbar_clr">
                        <div class="right">
                            <ons-icon size="40px" icon="ion-ios-close-empty" style="color:white" class="crossicon" ng-click="hidefeedbackDialog()"></ons-icon>
    
                        </div>
                        <div class="center">
                            <span style="color:white">{{currentLocale.feedback}}</span>
                        </div>
                    </ons-toolbar>
    
                    <ons-row>
                        <ons-col ng-repeat="rating in ratings">
    
                            <div star-rating rating-value="rating.current" max="rating.max" style="margin: 38px 0 0 0;" on-rating-selected="getSelectedRating(rating)">
                            </div>
                        </ons-col>
                    </ons-row>
                    <div id="rcorners1">
    
                        <div>
                            <ul class="feedMessage" ng-repeat="x in myData | orderBy:'CreateDate'">
                                <li class="messagebox" ng-show="x.IsAdmin==false">
                                    <p class="msgg">  {{ x.Message}} </p>
                                    <p class="date"> {{x.DateDisplayed }}</p>
    
                                <li class="messagebox1" ng-show="x.IsAdmin==true">
                                    <p class="msgg">  {{ x.Message}} </p>
                                    <p class="date"> {{x.DateDisplayed }}</p>
    
                            </ul>
    
                        </div>
    
                    </div>
    
                    <div class="msg ">
                        {{currentLocale.feedMessage}}!.
    
                    </div>
    
                    <ul class="asFedback">
                        <li style="padding-top:0px;">
                            <textarea placeholder="Add Your Feedback" ng-model="feedback.text"></textarea>
                            <img src="images/send.png" class="sendimage" ng-click="send_feedback(feedback)">
                        </li>
                    </ul>
    
    
                    <ons-dialog var="dialogplay" animation="none" mask-color="rgba(0, 0, 0, 0.4)">
                        
                            <div style="text-align: center; padding: 5px;">
                                <p style="color:#125073;margin:3px">
                                    Redirecting to Play Store.
                                <p align="center" style="margin:3px"> <ons-icon icon="ion-load-c" size="25px" spin="true" style="margin-top:5px"></ons-icon></p>
    
                                <button type="button" class="fedokButton" ng-click="click('Rate Us');closeDialog()">{{currentLocale.ok}}</button>
    
                                <button type="button" class="fedcancelButton" ng-click="stopTimer()">{{currentLocale.no}}</button>
                            </div>
                            
              </ons-dialog>
    
                </div>
            </div>
        </div>
    </ons-dialog>
    

    And to open it
    code is this

     $scope.showFeedback = function () {
            var feedbackDlg = "Feedback.html"
            if (!$scope.dialogs[feedbackDlg]) {
                ons.createDialog(feedbackDlg, { parentScope: $scope }).then(function (dialog) {
                    $scope.dialogs[feedbackDlg] = dialog;
                    dialog.show();
                });
            }
            else {
                $scope.dialogs[feedbackDlg].show();
            }
            $scope.notify();
        }
    

  • Onsen UI

    @Shubham-Kaushik Didn’t see any obvious mistake. Can you provide a minimum app where this is reproducible? Ideally made with tutorial.onsen.io , but a Github repo would also work.