I'm trying to add borders to this nativescript GridLayout usig the gridStyle
<GridLayout columns="200, 150" rows="15, 20" class="gridStyle">
<label text="Patient Name" class="rowLabelStyle" row="0" col="0"/>
<label text="{{ fullName }}" class="rowDataStyle" row="1" col="0"/>
<label text="DOB" class="rowLabelStyle" row="0" col="1"/>
<label text="{{ data.subDateOfBirth }}" class="rowDataStyle" row="1" col="1"/>
</GridLayout>
and here is the relevant css
.gridStyle {
background-color: cadetblue;
border: solid 1px darkgray ;
}
I have look in many places, tutorial, the official documentation without much luck, the table will not show any orders are all
In NativeScript supported CSS properties are border-width, border-color and border-radius. border tag alone would not work.
HTML
<GridLayout columns="200, 150" rows="15, 20" class="gridStyle">
<label text="Patient Name" class="rowLabelStyle" row="0" col="0"/>
<label text="{{ fullName }}" class="rowDataStyle" row="1" col="0"/>
<label text="DOB" class="rowLabelStyle" row="0" col="1"/>
<label text="{{ data.subDateOfBirth }}" class="rowDataStyle" row="1" col="1"/>
</GridLayout>
CSS
.gridStyle {
border-color: cadetblue;
border-width: 1px;
}
More info: https://docs.nativescript.org/ui/styling