CODEWITHSUNDEEP
css
Zibron
Zibron

Reputation: 25

Responsive list with square items

I need to display an horizontal list of users, defined by a square picture and their name, the picture being on top of the name.

But, I have some constraints : The whole component has to be responsive, so both the picture and the name should resize according to the displayed height of the component, the list must be centered horizontaly, and should be able to hold enough items to fill the width of the display (I used a limit of ten).

My problem is that I couldn't make it works with the rules I have. I used a flexbox for the resizability, but it always breaks the square ratio, or I break the responsive rule by using fixed size for the pictures.

That's what I want it to look like. To take this example, I used fixed size for the picture.

Centered horizontal list

EDIT: I should have provide the code of course.

HTML : 

<div class="display-children">
<div ng-repeat="e in students.all"
        ng-click="chooseChild(e)"
        ng-class="{'selected': e == student }"
        class="round-avatar">

        <img ng-src="/userbook/avatar/[[ e.id ]]" alt="[[e.displayName]]"/>
        <span>[[ e.firstName ]]</span>
</div>

CSS :

.display-children {
    height: 12vh;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;

    .round-avatar {
      flex: 1 1 auto;
      opacity: 0.5;
      height: 100%;

      img {
        border-radius: 50%;
        height: 75%;
        display: block;
        overflow: hidden;
        border: 1px solid $medium-grey;
      }

      span {
        height: 25%;
        text-align: center;
        color: $medium-grey;
      }
    }
  }

Upvotes: 0

Views: 62

Answers (2)

Zibron
Zibron

Reputation: 25

Well it turns out that using justify-content: center for the flexbox and flex-grow: 1 for the items at the same time just does not work.

In the end, I removed the flex-grow: 1 and everything worked perfectly.

I have no clue whether or not they were meant to work together, but I found no documentation regarding their incompatibility.

I will wait for someone to give more insight in how flexbox works, or maybe give me a better solution, but for the moment I will go with that.

Upvotes: 0

Jahid Hasan
Jahid Hasan

Reputation: 224

It's pretty easy to do using css. You should use the li display block. If you are not sure share the code here,so that i can check.

Upvotes: 0

Related Questions