error of Material list of angular components in angular dart

Question

Whenever I am trying to populate a list of item with material-list in a display: inline-flex; the flex doesn't responses, the list only gets align horizontally, but if I change the HTML code from material-list to ul it populates the list as expected. So, can anyone tell what I am doing wrong?

list.html

    <div class="demo-list-content">
     <material-list>
        <material-list-item>
            <material-icon icon="home"></material-icon>
            <div class="demo-list-item">Item 1</div>
        </material-list-item>
        <material-list-item>
            <material-icon icon="home"></material-icon>
            <div class="demo-list-item">Item 1</div>
        </material-list-item>
        <material-list-item>
            <material-icon icon="home"></material-icon>
            <div class="demo-list-item">Item 1</div>
        </material-list-item>
        <material-list-item>
            <material-icon icon="home"></material-icon>
            <div class="demo-list-item">Item 1</div>
        </material-list-item>
        <material-list-item>
            <material-icon icon="home"></material-icon>
            <div class="demo-list-item">Item 1</div>
        </material-list-item>
    </material-list>
</div>

list.css

.demo-list-content {
    margin: 24px;
}

material-list {
    padding: 16px;
    display: inline-flex;
}

material-list-item {
    width: 200px;
    display: inline;
    flex-direction: column;
    border: solid;
    margin: 16px;
    text-align: center;
}

.demo-list-item {

}

Jake Rote · Accepted Answer · 2017-09-21 14:55:51Z

1

If you remove the flex related stuff and add the following style it should wrap

.material-list-item {
    float: left;
}

answered Sep 21, 2017 at 14:55

Jake Rote

2,2673 gold badges18 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tushar Rai Over a year ago

thank you so much for understanding the question and help.

Collectives™ on Stack Overflow

error of Material list of angular components in angular dart

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related