RadDataForm Angular with groups on iOS ignores CSS

[billfrost]

This issue relates to iOS only - works fine on Android.

Versions: nativescript-ui-dataform: 6.0.0 CLI, tns-core-modules, tns-android, tns-ios: 6.3.0

Use the following in an Angular component.html file:

<GridLayout rows="*">
    <RadDataForm row="0" [source]="address">
        <TKPropertyGroup tkDataFormGroups collapsible="true" name="Edit this address" collapsed="false" hidden="false">
            <TKEntityProperty tkPropertyGroupProperties name="address" hintText="address" index="0">
                <TKPropertyEditor tkEntityPropertyEditor type="Text">
                    <TKPropertyEditorStyle tkPropertyEditorStyle fillColor="Pink" labelPosition="Top"></TKPropertyEditorStyle>
                </TKPropertyEditor>
            </TKEntityProperty>
            <TKEntityProperty tkPropertyGroupProperties name="address2" index="1">
                <TKPropertyEditor tkEntityPropertyEditor type="Text"></TKPropertyEditor>
            </TKEntityProperty>
        </TKPropertyGroup>
    </RadDataForm>
</GridLayout>

Add the following to the component.css file:

DataFormEditorLabel {
    position: top;
    background-color: pink;
}

Add this to the component.ts file:

private _address = new Address();
get address(): Address {
    return this._address;
}

Add Address.ts with this code:

export class Address {
    address: string;
    address2: string;

    constructor(address: string = '', address2: string = '') {
        this.address = address;
        this.address2 = address2;
}

Run the app on Android and everything works fine.

Run the app on iOS and the second address2 field which is styled with CSS does not reflect the CSS styling, but the first address field respects the TKPropertyEditorStyle settings.

[lini]

Hi, I did some tests and it seems that styling editors inside groups is only possible from the markup at the moment. I have logged this issue and it will be fixed in the next nativescript-ui-dataform release.