Horizontal listview with clickable card content? Possible?

0
Greetings,  I have this listview that I would like to use horizontally and not vertically but with clickable cards as it's content, and also an arrow so it moves left and an  arrow so it moves right and like this goes through different cards on the list. Any suggestion on how to do this? Thanks in advance! Regards,  Ana 
asked
2 answers
2

this magic sass should work

just add this to you sass and add the class to your listview.

ap_card ap_card_clickable ap_cardcontainer ap_cardcontainerfluid4

than in your listview add a button with no styling that doest what you want the onclick to do.

.mx-listview{
  &.ap_card > ul > li.mx-listview-item{
    position: relative;
    border-radius: 8px;
    border: 1px solid $border-color-default;
    margin: 0;
    overflow: hidden;
    background-color: $white;
  }


  &.ap_card-clickable > ul > li.mx-listview-item{ // clickable Styling
    transition: all 0.3s ease;
    position: relative; //makes button position work
    box-shadow: 0 10px 30px -6px rgba(0, 0, 0, 0.16);
    border: none;
    *{ //makes button full width of card, otherwise it gets caught on formgroups and other elements.
      position: static;
    }

    &:hover{
      background-color: rgba($link-color, 0.1);
      //transform: scale(1.05);
    }
    button.btn-default{
      position:absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      //background-color: red;
      opacity: 0;
    }
  }


  &.ap_cardcontainer { // make the cardcontainer fluid
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    > ul {
      padding: 0;
      margin: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      padding: 10px 15px;
      width: 100%;
      > li.mx-listview-item{}
    }
  }

  &.ap_cardcontainer.fluid1 > ul > li.mx-listview-item{ // Fluid 1
    width: calc(100%);
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 15px;
    &:nth-child(4n +1){
      margin-left: 0;
    }
    &:nth-child(4n){
      margin-right: 0;
    }
  }

  &.ap_cardcontainer.fluid2 > ul > li.mx-listview-item{ // Fluid 2
    width: calc(50% - 22.5px);
    margin-right: 15px;
    margin-left: 15px;
    margin-bottom: 30px;
    &:nth-child(2n +1){
      margin-left: 0;
    }
    &:nth-child(2n){
      margin-right: 0;
    }
  }
  &.ap_cardcontainer.fluid3 > ul > li.mx-listview-item{ // Fluid 3
    width: calc(33% - 22.5px);
    margin-right: 15px;
    margin-left: 15px;
    margin-bottom: 30px;
    &:nth-child(3n +1){
      margin-left: 0;
    }
    &:nth-child(3n){
      margin-right: 0;
    }
  }
  &.ap_cardcontainer.fluid4 > ul > li.mx-listview-item{ // Fluid 4
    width: calc(25% - 22.5px);
    margin-right: 15px;
    margin-left: 15px;
    margin-bottom: 30px;
    &:nth-child(4n +1){
      margin-left: 0;
    }
    &:nth-child(4n){
      margin-right: 0;
    }
  }

  &.ap_card.ap_card-tile > ul > li.mx-listview-item{ // Tile Styling
    display: flex;
    align-items: center;
    text-align: center;
    flex-direction: column;
    padding: 30px;

    .glyphicon {
      font-size: 30px;
      margin-bottom: 10px
    }
    .title{
      margin-top: 0;
    }
    button.btn-primary{
      //position:absolute;
      display: none;
      bottom: 0;
      left: 0;
      width: 100%;
      border-radius: 0px 0px 4px 4px;
      //height: 100%;
      opacity: 1;
    }
  }
}

 

answered
0

You can use clickable container in Mendix 8

answered