angular design material md-list-item in the right

css angularjs material-design angular-material

10,157

Solution 1

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

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

Here is the updated Version

Solution 2

There's actually been a change to the css that fixes what you are experiencing:

If you use the development version:

https://rawgit.com/angular/bower-material/master/angular-material.min.css

<head>
  <link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css">
  <meta name="viewport" content="initial-scale=1" />
</head>

Your page checkboxes should line up.

http://codepen.io/anon/pen/MYdLam

10,157

Author by

Epitouille

Updated on June 30, 2022

Comments

Epitouille almost 2 years
According the example: https://material.angularjs.org/#/demo/material.components.list

The checkboxes are alligned right:

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

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>
```
Epitouille about 9 years

Thanks for answering, but the checkboxes are not totally on the right of the screen, like the angular-material exemple shows