Css – angular design material md-list-item in the right

angular-materialangularjscssmaterial-design

According the example: https://material.angularjs.org/#/demo/material.components.list

The checkboxes are alligned right:
Example Image

What happens in my code is that the checkboxes appear under the text:
My result Image

I don't know why the results are different because I copy pasted the example and I just changed ng-repeat from 4 to 2 elements.

My codepen: http://codepen.io/anon/pen/wBbREV

<md-list>
    <md-subheader class="md-no-sticky">md-list</md-subheader>

   <md-list-item>
        <p> title </p>
        <md-checkbox class="md-secondary"></md-checkbox>
    </md-list-item>

    <md-list-item>
        <p> title </p>
        <md-checkbox class="md-secondary"></md-checkbox>
    </md-list-item>
</mdlist>

Best Answer

To make it on the same row, Just align the layout like this,

<md-list-item layout="row">

Here is the updated Version

Related Topic