Is there anything wrong with the following ionic code,caz the url './#/tab/guiderRegister' seems not working properly, which only shows the header. but './#/tab/register'and './#/tab/signup' can work.
//ionic state
.state('tabs.register', {
url:'/register',
views:{
'home-tab':{
templateUrl:'./register',
controller:'homeController'
}
}
})
.state('tabs.guiderRegister', {
url:'/guiderRegister',
views:{
'home-tab':{
templateUrl:'./guiderRegister',
controller:'homeController'
}
}
})
.state('tabs.signup', {
url:'/signup',
views:{
'home-tab':{
templateUrl:'./signup',
controller:'homeController'
}
}
})
//html
<div class="row registerChoose">
<div>
<div class="chooseEG">Expat</div>
<div class="chooseEG">Guider</div>
<div class="chooseEG">signup</div>
</div>
</div>
//guiderRegister
<ion-view view-title="Guider Register" hide-tabs>
<ion-nav-buttons side="secondary">
<button class="button button-icon">Signup</button>
</ion-nav-buttons>
<ion-content class="">
<div class="list">
<form name="guiderRegister" action="./postGuiderRegister" method="post" id="guiderRegister">
<label class="item item-input">
<input type="text" placeholder="Username" name="username">
</label>
<label class="item item-input">
<input type="email" placeholder="Email" name="email">
</label>
<label class="item item-input">
<input type="password" placeholder="Password" name="password">
</label>
<label class="item item-input">
<input type="password" placeholder="Password Again" name="password_confirmation">
</label>
<label class="item item-input">
<input type="text" placeholder="Nationality" name="nationality" >
</label>
<label class="item item-input">
<textarea placeholder="* Intruduce Yourself" name="constantIntro" style="min-height:6em;">
</textarea>
</label>
<!-- <label class="item item-input">
<input type="text" placeholder="Service Location" name="location">
</label> -->
<ion-toggle ng-model="serviceLocation">Service Location</ion-toggle>
<ion-radio ng-model="myLocation" ng-show="serviceLocation" ng-repeat="destination in destinationSettings" ng-value="destination.text" name="location">
#{{ destination.text }}
</ion-radio>
<label class="item item-input">
<input type="text" placeholder="Charge" name="change">
</label>
<ion-toggle ng-model="serviceProvided">Service Provided</ion-toggle>
<ion-checkbox ng-repeat="item in provideList"
ng-model="item.checked"
ng-checked="item.checked"
ng-show="serviceProvided">
#{{ item.text }}
</ion-checkbox>
<input name="_token" type="hidden" value="{{ csrf_token() }}">
</form>
</div>
</ion-content>
<ion-footer-bar align-title="middle" class="bar-stable">
<input type="submit" class="title button" value="submit" form="guiderRegister">
</ion-footer-bar>
</ion-view>
Related
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">
<label class="sr-only">Email</label>
<input
type="text"
class="form-control mb-2 mr-sm-2"
placeholder="Email"
/>
<label class="sr-only">Password</label>
<input
type="password"
class="form-control mb-2 mr-sm-2"
placeholder="Password"
/>
<button type="submit" class="btn btn-dark mb-2">Sign In</button>
<div class="form-check mb-2 mr-sm-2">
<input
class="form-check-input"
type="checkbox"
id="inlineFormCheck"
/>
<label class="form-check-label" for="inlineFormCheck">
Remember me
</label>
</div>
</form>
How to push the checkbox and 'Remember me' label to the next line, just below the Email label? I used line break after the Sign In button but it's not working.
One way would be to move checkbox outside .form-inline class, because it uses display: flex and flex-flow: row, which keeps all child elements in a single line.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="form-inline">
<label class="sr-only">Email</label>
<input
type="text"
class="form-control mb-2 mr-sm-2"
placeholder="Email"
/>
<label class="sr-only">Password</label>
<input
type="password"
class="form-control mb-2 mr-sm-2"
placeholder="Password"
/>
<button type="submit" class="btn btn-dark mb-2">Sign In</button>
</div>
<div class="form-check mb-2 mr-sm-2">
<input
class="form-check-input"
type="checkbox"
id="inlineFormCheck"
/>
<label class="form-check-label" for="inlineFormCheck">
Remember me
</label>
</div>
</form>
I have tried a lot of things to clear the input fields in ionic modal. It has already been more than two days I have been searching for the solution. Can anyone provide me the solution? I have only included the necessary parts.
controller.js
.controller('ClientCtrl', ['$scope', '$ionicModal', function($scope, $ionicModal) {
//I have retrieved data form local storage
//$scope.clients contains the data
//client add modal
$ionicModal.fromTemplateUrl('templates/clientAdd.html', {
scope: $scope
}).then(function(modal) {
$scope.clientAdd = modal;
});
// Triggered in the client add modal to close it
$scope.closeClientAddForm = function() {
$scope.clientAdd.hide();
};
// Open the client add modal
$scope.clientAddForm = function() {
$scope.clientAdd.show();
};
}])
.controller('ClientAddCtrl', ['$scope', '$state', function($scope, $state) {
//$scope.client = null;
$scope.client = {};
$scope.addClientData = function(clientData) {
$scope.clientinfo = clientData;
//operation to store data
/* $scope.clearForm = function() {
var client = {
companyName: "",
address: "",
contactName: "",
contactEmail: "",
contactPhone: "",
shippingName: "",
shippingAddress: ""
}
$scope.clientAddForm.$setPristine();
$scope.client = angular.copy(client);
}*/
$scope.closeClientAddForm();
}
}])
modal
<ion-modal-view cache-modal-view="false" ng-controller="ClientAddCtrl">
<ion-header-bar class="bar bar-dark">
<h1 class="title">Client Details</h1>
<div class="buttons">
<button class="button button-assertive" ng-click="closeClientAddForm()">Close</button>
</div>
</ion-header-bar>
<ion-content>
<form name="clientAddForm" ng-submit="addClientData(client)" novalidate>
<ion-list>
<div class="padding item-divider">
BILLING DETAILS
</div>
<label class="item item-input">
<span class="input-label">Name <span class="style_error">*</span></span>
<input name="companyName" type="text" ng-model="client.BillingDetails.companyName" required>
</label>
<p class="style_error" ng-show="clientForm.companyName.$dirty && clientForm.companyName.$invalid">Company name is required.</p>
<label class="item item-input">
<span class="input-label">Address 1 <span class="style_error">*</span></span>
<input name="address" type="text" ng-model="client.BillingDetails.address" required>
</label>
<p class="style_error" ng-show="clientForm.address.$dirty && clientForm.address.$invalid">Address is required.</p>
<label class="item item-input">
<span class="input-label">Address 2 </span>
<input name="address2" type="text" ng-model="client.BillingDetails.address2">
</label>
<div class="padding item-divider">
CONTACT DETAILS
</div>
<label class="item item-input">
<span class="input-label">Name <span class="style_error">*</span></span>
<input name="contactName" type="text" ng-model="client.ContactDetails.contactName" required>
</label>
<p class="style_error" ng-show="clientForm.contactName.$dirty && clientForm.contactName.$invalid">Name is required.</p>
<label class="item item-input">
<span class="input-label">Email <span class="style_error">*</span></span>
<input name="contactEmail" type="email" ng-model="client.ContactDetails.contactEmail" required>
</label>
<p class="style_error" ng-show="clientForm.contactEmail.$dirty && clientForm.contactEmail.$invalid">Enter a valid email</p>
<label class="item item-input">
<span class="input-label">Phone <span class="style_error">*</span></span>
<input name="contactPhone" type="number" ng-model="client.ContactDetails.contactPhone" required>
</label>
<p class="style_error" ng-show="clientForm.contactPhone.$dirty && clientForm.contactPhone.$invalid">Phone is required.</p>
<label class="item item-input">
<span class="input-label">Mobile </span>
<input name="contactMobile" type="number" ng-model="client.ContactDetails.contactMobile">
</label>
<label class="item item-input">
<span class="input-label">Fax </span>
<input name="contactFax" type="number" ng-model="client.ContactDetails.contactFax">
</label>
<label class="item item-input">
<span class="input-label">Website </span>
<input name="contactWebsite" type="text" ng-model="client.ContactDetails.contactWebsite">
</label>
<div class="padding item-divider">
SHIPPING DETAILS
</div>
<label class="item item-input">
<span class="input-label">Name <span class="style_error">*</span></span>
<input name="shippingName" type="text" ng-model="client.ShippingDetails.shippingName" required>
</label>
<p class="style_error" ng-show="clientForm.shippingName.$dirty && clientForm.shippingName.$invalid">Shipping name is required.</p>
<label class="item item-input">
<span class="input-label">Address 1 <span class="style_error">*</span></span>
<input name="shippingAddress" type="text" ng-model="client.ShippingDetails.shippingAddress" required>
</label>
<p class="style_error" ng-show="clientForm.shippingAddress.$dirty && clientForm.shippingAddress.$invalid">Shipping Address is required.</p>
<label class="item item-input">
<span class="input-label">Address 2 </span>
<input name="shippingAddress2" type="text" ng-model="client.ShippingDetails.shippingAddress2">
</label>
<div class="padding item-divider">
NOTES
</div>
<ion-item>
<textarea placeholder="notes" name="shippingNotes" ng-model="client.notes" style="width:100%">
</textarea>
</ion-item>
</ion-list>
<button class="button button-block button-positive" type="submit" ng-disabled="clientAddForm.$invalid" >Add Client</button>
</form>
</ion-content>
</ion-modal-view>
Please read and try below link.
https://forum.ionicframework.com/t/clear-button-to-clear-all-fields/12190
<ion-view>
<div class="bar bar-header bar-dark">
<h1 class="title">Welcome</h1>
</div>
<ion-content class="has-header">
<form ng-submit="doLogin()">
<div class="list">
<label class="item item-input">
<span class="input-label">手机号</span>
<input type="text" ng-model="phonenumber" placeholder="这里输入手机号" maxlength="11">
<button class="button button-dark" style="margin-right: 16px;" ng-click="getVerifyCode(111)">获取验证码</button>
</label>
<label class="item item-input">
<span class="input-label">验证码</span>
<input type="password" ng-model="verifycode">
</label>
<label class="item">
<button class="button button-block button-dark" ng-click="getVerifyCode(111)">登 陆</button>
</label>
</div>
</form>
</ion-content>
</ion-view>
why the button(获取验证码) inside label tag doesnt work?
but the button(登 陆) outside label tag work fine, why?
please help me to fixed this. I need to make a response when click
the button(获取验证码)
working demo
The solution is simply not to use a label for the item. Instead just use a div
html
<form ng-submit="doLogin()">
<div class="list">
<div class="item item-input">
<span class="input-label">手机号</span>
<input type="text" ng-model="phonenumber" placeholder="这里输入手机号" maxlength="11">
<!-- <input ></input> -->
<button class="button button-dark" style="margin-right: 16px;" ng-click="getVerifyCode(111)">获取验证码</button>
</div>
<label class="item item-input">
<span class="input-label">验证码</span>
<input type="password" ng-model="verifycode">
</label>
<label class="item">
<button class="button button-block button-dark" ng-click="getVerifyCode(111)">登 陆</button>
</label>
</div>
</form>
I am attempting at making a drop down box appear as soon as you click on an input text area, revealing more boxes (i.e info to complete).
this is a link to the wireframes I am basing my design on :
https://drive.google.com/file/d/0BxNRMs44yAigWmRneC1GTUZheGs/view?usp=sharing
I have used Bootstrap so far and can't seem to successfully add the drop down, and would appreciate any help/guidance.
<div id="popup3" class="popup">
<h3>Add your locations here</h2>
<form role="form">
<div class="inner-addon right-addon">
<i class="glyphicon glyphicon-camera"></i>
<input type="text" class="form-control" placeholder="Address"/>
</div>
<div class="inner-addon right-addon">
<i class="glyphicon glyphicon-camera"></i>
<input type="text" class="form-control" placeholder="Address" />
</div>
<div class="inner-addon right-addon">
<i class="glyphicon glyphicon-camera"></i>
<input type="text" class="form-control" placeholder="Address" />
</div>
<div class="inner-addon right-addon">
<i class="glyphicon glyphicon-camera"></i>
<input type="text" class="form-control" placeholder="Address" />
</div>
<div class="inner-addon right-addon">
<i class="glyphicon glyphicon-camera"></i>
<input type="text" class="form-control" placeholder="Address" />
</div>
<div class="inner-addon right-addon">
<i class="glyphicon glyphicon-camera"></i>
<input type="text" class="form-control" placeholder="Address" />
</div>
<div class="inner-addon right-addon">
<i class="glyphicon glyphicon-camera"></i>
<input type="text" class="form-control" placeholder="Address" />
</div>
<div class="inner-addon right-addon">
<i class="glyphicon glyphicon-camera"></i>
<input type="text" class="form-control" placeholder="Address" />
</div>
<div class="inner-addon right-addon">
<i class="glyphicon glyphicon-camera"></i>
<input type="text" class="form-control" placeholder="Address" />
</div>
<div class="inner-addon right-addon">
<i class="glyphicon glyphicon-camera"></i>
<input type="text" class="form-control" placeholder="Address" />
</div>
<div class="form-group">
<textarea class="form-control" rows="1" ></textarea>
<textarea class="form-control" rows="1" ></textarea>
<textarea class="form-control" rows="1" ></textarea>
<textarea class="form-control" rows="1" ></textarea>
<textarea class="form-control" rows="1" ></textarea>
<textarea class="form-control" rows="1" ></textarea>
<textarea class="form-control" rows="1" ></textarea>
<textarea class="form-control" rows="1" ></textarea>
<textarea class="form-control" rows="1" ></textarea>
</div>
</form>
</div>
<div id="popup4" class="popup">
<h3>Choose the categories that best define your drift</h3>
<form role="form">
<select multiple class="form-control" id="sel">
<option>Art</option>
<option>Entertainment</option>
<option>History</option>
<option>Landmarks</option>
<option>Music</option>
<option>Nature</option>
<option>Oddities</option>
</select>
</form>
</div>
and this is my css :
/* enable absolute positioning */
.inner-addon {
position: relative;
}
/* style icon */
.inner-addon .glyphicon {
position: absolute;
padding: 10px;
pointer-events: none;
}
/* align icon */
.left-addon .glyphicon { left: 0px;}
.right-addon .glyphicon { right: 0px;}
/* add padding */
.left-addon input { padding-left: 30px; }
.right-addon input { padding-right: 30px; }
I have the following content in ionic.
<ion-content>
<div class="row row-center">
<div class="col-150 col-offset-50"><h4>Login</h4></div> </div>
<div class="row">
<div class=" col-10 col-offset-50"><h4>Username</h4></div>
<div class=" col-10 col-offset-5"><label class="item item-input">
<input type="text" placeholder="Username" ng-model="username">
</label></div>
</div>
<div class="row row-bottom">
<div class=" col-10 col-offset-50"><h4>Password</h4></div>
<div class=" col-10 col-offset-5"><label class="item item-input">
<input type="password" placeholder="Password" ng-model="password">
</label>
</div>
</div>
</ion-content>
The output looks like this:
I am new to ionic and would really appreciate some help in
1)space between the two rows for username and password
2)Aligning both the username and password rows a little more to the left so that the Login row looks centered.
Why don't you use inline labels?
To align all labels to center, add text-center class to your labels.
<ion-content>
<div class="list">
<label class="item item-input">
<span class="input-label text-center">Login</span>
</label>
<label class="item item-input">
<span class="input-label text-center">Username</span>
<input type="text">
</label>
<label class="item item-input">
<span class="input-label text-center">Password</span>
<input type="password">
</label>
</div>
</ion-content>
To centrally align just 'Login' label, add text-center just to that label
<ion-content>
<div class="list">
<label class="item text-center">
Login
</label>
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password">
</label>
</div>
</ion-content>
To add space between items, add margin-bottom to .input-label class. Don't do this in the original ionic css file - create another stylesheet to contain all your overrides.