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 