Hey guys. I’ve got a problem that I keep running into. It seems that having list items with inputs and option-buttons is a bad mix, but I’d like to find a way to make it work. Here is my mark up.
<ion-list show-reorder="data.reorder"> <ion-item class="row" ng-repeat="(letter, bounds) in scale"> <div class="col"><input type="text" class="center" ng-model="letter" name="grade_name" required></div> <div class="col" ng-repeat-start="bound in bounds"><input type="text" class="center" ng-model="bound.upper" name="upper" required></div> <div class="col" ng-repeat-end><input type="text" class="center" ng-model="bound.lower" name="lower" required></div> <!-- <ion-reorder-button class="ion-navicon float" on-reorder="reorderItem(letter, $fromIndex, $toIndex)"> </ion-reorder-button> --> </ion-item> </ion-list>
Basically this generates a list of three inputs corresponding to a letter grade, upper grade bound and lower grade bound. It looks and works great until I throw in the ion-reorder-button at the bottom. All of the input elements behave as if they are block elements as in the image below.
I tried giving a class to the columns so that they were inline-blocks which did work, but this generated the following which is ugly and not what I am looking for, aha.
There has to be a way to do this! Appreciate any help