How to make a layout grid automatically adjust when buttons within it are not displayed through UserRoles?

0
I have a home page which will be used by many different users with many different user roles. I have used a Layout Grid and each cell of the grid has a Card Action Building Block which will link to various pages. When a user logs in that doesn’t have access to some of the pages the buttons disappear but the container that it is in still shows and leaves a space in the grid where the button should be. How do I get the grid to adjust and move up buttons to fill empty cells?
asked
1 answers
0

so it looks like you want to use some kind of “liquid card container” so that when a card isnt visible the rest bounces into place.

1- the easiest way to do this, is to create a layout container with conditional visibility  for each user role.

2- the hard way to do this is with crazy sass.

put classes ap_cardcontainer and fluid4 on the listview

in the listview create a container with the class ap_card

and add this to your sass file (and combile your sass)

.mx-listview.ap_cardcontainer {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  > ul {
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
    > li{
      display: contents;
      > .mx-dataview{
        display: contents;
        > .mx-dataview-content{
          display: contents;
        }
      }
    }
  }
  & > ul > li {
    .card, .ap_card{ // Fluid 4
      width: calc(100% - 0px);
      margin-right: 30px;
      margin-bottom: 30px;
    }
    &:nth-child(1n) .card{
      margin-right: 0;
    }
  }
  &.fluid2 > ul > li {
    .card, .ap_card{ // Fluid 4
      width: calc(50% - 15px);
      margin-right: 30px;
      margin-bottom: 30px;
    }
    &:nth-child(2n) .card{
      margin-right: 0;
    }
  }
  &.fluid3 > ul > li {
    .card, .ap_card{ // Fluid 4
      width: calc(33.33% - 20px);
      margin-right: 30px;
      margin-bottom: 30px;
    }
    &:nth-child(3n) .card{
      margin-right: 0;
    }
  }
  &.fluid4 > ul > li {
    .card, .ap_card{ // Fluid 4
      width: calc(25% - 23px);
      margin-right: 30px;
      margin-bottom: 30px;
    }
    &:nth-child(4n) .ap_card{
      margin-right: 0;
    }
  }
}

 

answered