I would very much like to bine an item-input-inset with an ion-toggle instead of the button - so the user can choose to disable the input field.
What I want is something like this:
I do wish to connect the text input to a model so I always have a variable that is Not Applicable or some other string that the user entered (or empty).
But my first problems has been the layout that seems to mess up. This is how far I got:
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text" placeholder="Text input">
</label>
<ion-toggle>
</ion-toggle>
</div>
</div>
gives the following messed up layout
I would very much like to bine an item-input-inset with an ion-toggle instead of the button - so the user can choose to disable the input field.
What I want is something like this:
I do wish to connect the text input to a model so I always have a variable that is Not Applicable or some other string that the user entered (or empty).
But my first problems has been the layout that seems to mess up. This is how far I got:
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text" placeholder="Text input">
</label>
<ion-toggle>
</ion-toggle>
</div>
</div>
gives the following messed up layout
Share Improve this question edited Jul 15, 2016 at 13:25 Norfeldt asked Jul 10, 2016 at 14:08 NorfeldtNorfeldt 9,73824 gold badges110 silver badges173 bronze badges 2- Plunker? or css code for item-input-wrapper? – David H. Commented Jul 12, 2016 at 17:29
- There are some answer already, check it out @Norfeldt – trungvose Commented Jul 13, 2016 at 11:06
3 Answers
Reset to default 4 +300@Norfeldt: Please check the snippet below and let me know your thought. Hope it works as your expectation.
angular.module('ionicApp', ['ionic'])
.controller('MainCtrl', function($scope) {
//INIT checked false
$scope.toggleInput = {
checked: false
};
$scope.toggleInputChange = function() {
//TO DO
};
});body {
cursor: url('http://ionicframework./img/finger.png'), auto;
}
.item-toggle .toggle {
top: 18px !important;
}
.item-toggle input[type='text'] {
pointer-events: all;
padding-left: 10px;
width: 100%;
color: #000;
font-weight: 500;
}
.item-toggle input[type="text"]:disabled {
font-weight: 100;
background: #fff;
}<link href="//code.ionicframework./nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework./nightly/js/ionic.bundle.js"></script>
<body ng-app="ionicApp">
<div ng-controller="MainCtrl">
<ion-content>
<ion-toggle ng-model="toggleInput.checked" ng-change="toggleInputChange()">
<input ng-disabled="!toggleInput.checked" type="text" ng-model="userInput.value" placeholder="{{toggleInput.checked ? 'This is the user input...' : 'Not Applicable' }}">
</ion-toggle>
</ion-content>
</div>
</body>Hope it will help you.
Required CSS
.item-toggle input[type='text'] {
pointer-events: all;
}
Template Code:
<ion-content>
<ion-toggle ng-model="pushNotification.checked"
ng-change="pushNotificationChange()">
<input ng-disabled="!pushNotification.checked" type="text" ng-model="userInput.value" placeholder="{{placeholder}}">
</ion-toggle>
</ion-content>
Controller Code
var temp = '';
$scope.placeholder = 'Not Applicable';
$scope.pushNotificationChange = function() {
if($scope.pushNotification.checked) {
$scope.userInput.value = temp;
}
else {
temp = $scope.userInput.value;
$scope.userInput.value = '';
}
};
$scope.pushNotification = { checked: false };
$scope.userInput = {value:''};
Check this plunker http://codepen.io/anon/pen/XKzaBo
I suggest you apply the following CSS:
.item-toggle {
padding: 0;
border-width: 0;
}
.item-toggle .toggle {
position: inherit;
top: inherit;
right: inherit;
}
See http://play.ionic.io/app/8a0cf8a27f4e.