Ion-checkbox with collection-repeat : How to manage the style?

ionic-v1
1

Hello,

I’d like to implement a ion-checkbox list with collection repeat but the display of the text in the list item put it like a vertivcal-align : top.

Can you please help me and tell me how to get it like a vertical-algn : middle ?

I tried that : ng-style="{height: 60; vertical-align:middle;}" but not working at all…
Thank you very much.

            <ion-checkbox 
              class="item item-checkbox my-item"
              collection-repeat="item in items"
              collection-item-width="'100%'"
              collection-item-height="60"
              ng-style="{height: 60}"
              ng-class="{'item-light' : !item .checked, 'item-stable ': item .checked}"
              ng-model="item .checked" 
              ng-checked="item .checked"
              ng-click="checkedchange(item )">
                      <h2>{{item.value}}</h2>
        </ion-checkbox>
2

Does anyone can give me an advice ?
THank you…

3

Vertical align only works with display: table-cell when it’s parent is display: table.

Maybe you might want to try other attributes like padding-top: 10px; or margin-top: 10px; this will push your content and you can get the effect of vertical align (if your content height is not variable).

Another nice approach with text can be setting line-height to the text. (Line-height can have values in %)

4

Thank you very much I’m gonna try that.

5

Hi,
unfortunately it’s not working…

I tried everything and it seems adding margin-top:‘10px’ or padding-top:‘10px’ cancel the style…
I applied that :
ng-style="{height:‘45’, margin-top:‘10px’}" or
ng-style="{height:‘45’, padding-top:‘10px’}"

6

Apply the styles in the css CSS files and not via ng-style.
You can check in Chrome “inspect element” if the rules have been applied correctly. If no, you can always use !important.

7

Thank you very much It’s working !!

.my-item {
left: 0;
right: 0;
/* padding-top: 0;
padding-bottom: 0;*/
display: inline-block;
line-height: normal;
}