How can I add some spacing between Cards in a horizonal list view?

0
Hi, is there any easy way to add some spacing between cards in a listview on a Native App.   This is what the cards currently look like when view on the device   Ideally I would like some form a space between each of the cards, just to separate them a bit. This is the current properties for the listview     I know I could look into CSS but is there an easy option just using the built in properties?   
asked
2 answers
0

Hey Gareth, 

Are the "Devices" the data source for your listview? If so I would take a look at the design properties of the listview itself to see if any of those have an impact. If they still aren't helping, Unfortunately I would suggest trying some CSS, the space-between attribute of the flexbox module could be helpful here and should be relatively simple to implement.

Another potential solution is to add some sort of margin left/right on the cards themselves, which again would requite some simple CSS. 

 

flexbox: https://www.geeksforgeeks.org/css-flexbox-and-its-properties/ 

space-between: https://www.geeksforgeeks.org/how-to-set-space-between-the-flexbox/

 

Hopefully this helps, good luck!

 

answered
0

Hello Gareth,

 

By using CSS, this will be easy to handle.

Try setting below CSS:

 

.boardCard > ul {
    display: flex;
    flex-wrap: wrap;
}

.boardCard > ul > li {
    display: flex;
    width:20%; //for 5 cards in one row
    padding: 8px; //adds the space between cards
}

 

Hope this helps!!

answered