Recently while developing a NativeScript Android app, I wanted to create a card style list-view with a margin between each row to give it a material design look.
Since NativeScript uses CSS for it’s styling, I presumed adding margin to each item in the list would do the trick.
The problem
Here’s my CSS styling with the margin-bottom on each item in the list. All other CSS properties took effect just not margin-bottom.
margin-bottom not being applied to each row
The solution
After spending some time scratching my head and trying various solutions I found a fix. By wrapping my grid-layout with a stack-layout, margin took effect.
It seems as though margin will not work if it’s being applied to the first element after list-view.itemTemplate.
margin-bottom working now since it’s no longer the first child of itemTemplate
Hope this helps anybody who ran into the same problem.