How to change default behavior of ons-switch on click and switch on and off it on basis of function only.
Shubham Kaushik
@Shubham Kaushik
Posts made by Shubham Kaushik
-
Switch Issue
-
Ons-Navigator issue in Angular 4
How to integrate ons-navigator in Angular 4.
Currently it is showing the error: No OnsNaviagtor provider is specified. -
App gets zoom On click Of input
My app gets zoom whenever I click on input. I am clueless how to solve this issue.
I am using Onsen 2 with my app. -
RE: Toolbar display issue
I have send you 2 screenshots. Now When I push page this screenshot page 1 opens with this page and then toolbar height set like in screenshot 2 which i want.
Code i have already shared with you.
-
Toolbar display issue
I have a page in which there are 2 tab bar like below:But when i push page ons-toolbar size go from top then bottom. Suggest the solution for this.
<ons-page style="background-color:white" ng-controller="AlarmCtrl"> <ons-toolbar class="toolbar_clr"> <div class="left"> <div class="left" style="line-height: 44px"> <ons-icon icon="ion-android-arrow-back" ng-click="pop_alarm();" size="30px" style="color:white;padding-left:10px;padding-right:10px;margin-top:7px"></ons-icon> </div> </div> <div class="right" ng-show="showAlarmDel"> <ons-toolbar-button style="margin-left:-20px" ng-click="deleteall_passalarm()"> <ons-icon icon="ion-android-delete" size="30px" style="color:white;"></ons-icon> </ons-toolbar-button> </div> <div class="center"> <span style="color:white">{{currentLocale.almSet}}</span> </div> </ons-toolbar> <ons-tabbar position="top" var="alarm_tabbar"> <ons-tab page="alarmset.html" active="true"> <span>{{currentLocale.almsett}}</span> </ons-tab> <ons-tab page="alarmhistory.html" ng-click="alarm_data()"> <span>{{currentLocale.History}}</span> </ons-tab> </ons-tabbar> </ons-page>
My toolbar css is this:
.toolbar_clr { background-color: #125073; /* padding-top: 10px; */ min-height: 50px; }
-
Calling function on ons-switch issue
I am calling a function on click of content inside ons row. The same row also have ons-switch inside it but when i click on switch function call is not working properly. Suggest me the solution please.
<div style="margin:10px" class="cardalike"> <div style="margin-top:10px"> <!--<ons-row class="row ons-row-inner" style="padding-right:5px;" ng-click="calFirst_switch.checked()?calFirst_switch.setChecked(false):calFirst_switch.setChecked(true);">--> <ons-row class="row ons-row-inner" style="padding-right:5px;" ng-init="calFirst_switch=false" ng-click="switch_change()"> <div style="width:50px;"> <img src="icons/calender.png" style="margin-left:13px;" class="medium_icon" /> </div> <ons-col class="col ons-col-inner"> <div> <span style="float:left;color:rgb(117, 108, 108)"> {{currentLocale.JourneyDate}} </span> <ons-switch modifier="material" style="float:right;" ng-model="calFirst_switch"> </ons-switch> </div> </ons-col> </ons-row> </div> <div ng-if="calFirst_switch==true"> <div style="height: 35px;margin-left:50px"> <input type="text" style="width:200px;float:left;" class="form-control" datepicker-popup="{{format}}" ng-click="open($event)" ng-model="$parent.dt" is-open="status.opened" min-date="{{minnDate}}" max-date="{{maxxDate}}" datepicker-options="searchdateOptions" ng-required="true" readonly close-text="Close" /> </div> </div> $scope.switch_change=function() { if ($scope.calFirst_switch == false) { $scope.calFirst_switch = true; } else $scope.calFirst_switch = false; }
-
RE: Keypad Issue in Android Device
This issue is happening with XOLO PRIME phone and OS version is 5.0.2.
-
Keypad Issue in Android Device
I am using Onsen 2 in my application but there is only one major issue that I am facing in android phone is that as soon as I click on input box and keyboard appears ,
suddenly all my css got distorted. This issue is not happening in case Of Onsen 1. Please help me guyz . ASAP. -
RE: ons-input
I am using Onsen 2 in my application but there is only one major issue that I am facing in android phone is that as soon as I click on input box and keyboard appears suddenly all my css got distorted. This issue is not happening in case Of Onsen 1. Please help me guyz . ASAP.
-
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(); }