CODEWITHSUNDEEP
cssangularjsmaterial-designangular-material
ttncrch
ttncrch

Reputation: 7253

angular design material md-list-item in the right

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>

Upvotes: 3

Views: 10232

Answers (3)

Sai Teja
Sai Teja

Reputation: 1

I think iam late to conversation but sharing my answer use <md-list-item layout="row"> and after your p element use <span flex></span> Make sure your md-list-item taking 100% width

Upvotes: 0

dting
dting

Reputation: 39287

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

Upvotes: 4

Sajeetharan
Sajeetharan

Reputation: 222532

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

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

Here is the updated Version

Upvotes: 4

Related Questions