Vertically align checkbox and text on different columns

ionic-v1
1

Hello there !

image

I have a small problem with my todo list in ionic : the checkbox and the text are not vertically aligned as you can see.

The two are in different columns like this :

<div class="col col-25"> <label class="checkbox no-padding"> <input class="no-padding" type="checkbox" ng-model="todo.done" ng-checked="todo.done" ng-change="updateTodos();"> </label> </div> <div class="col col-75 no-side-padding left"> <label class="checkbox no-padding"> {{todo.name}} </label> </div>

And I can’t figure out how I can vertically align them, does anyone have an idea on how I can fix this ?

Thanks in advance for your help :grinning:

Rem

2

Why even break them into two columns? I would refactor the layout instead. You should have a simpler DOM (ie shallower == faster).

I would enable the proper flexbox value for vertical alignment.

I also suspect that users will want to click on the label as well to mark it as done, but your sample would not do that.
-Chris

3 
	  <div class="row">
		<div class="col col-25">
			<label class="checkbox no-padding">
			<input class="no-padding" type="checkbox" ng-model="todo.done" ng-checked="todo.done" ng-change="updateTodos();">
			</label>
		</div>
		<div class="col col-75 no-side-padding right" style="padding-top: 17px;">
			<label class="checkbox no-padding">
			Rahul
			</label>
		</div>	
	  </div>