TextView scrolling and sizing issue on iOS

[3rror404]

I'm experiencing some strange issues with the TextView since upgrading to N3.1.3

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" class="page">

    <Page.actionBar>
        <ActionBar title="My App" icon="" class="action-bar">
        </ActionBar>
    </Page.actionBar>

    <GridLayout rows="auto, auto, auto, auto, auto, auto">
        <StackLayout class="p-20" row="0">
            <Label text="Default style = scrolls out of container" class="body m-b-10" />
            <TextView hint="Add your comment..." />
        </StackLayout>

        <StackLayout class="p-20" row="1">
            <Label text="Adding border changes the height but fixes scrolling" textWrap="true" class="body m-b-10" />
            <TextView hint="Add your comment..." class="bordered" />
        </StackLayout>

        <StackLayout class="p-20" row="2">
            <Label text="border-radius = weird" class="body m-b-10" />
            <TextView hint="Add your comment..." class="bordered fixed-height border-radius" />
        </StackLayout>
        
    </GridLayout>
</Page>

@import 'nativescript-theme-core/css/core.light.css';

.page {
    background-color: #F2F2F2;
}

TextView {
    background-color: #FFF;
}

.bordered {
    border-width: 1;
    border-color: green;
}

.fixed-height {
    height: 70;
}

.border-radius {
    border-radius: 4;
}

• The default TextView with no custom CSS scrolls out of it's bounding box when multiple lines are entered. (EDIT: I am adding a background colour to this in CSS. Removing the bg colour fixes the default state)
• A TextView with a custom border becomes shorter than it's default state.
• When a custom border-radius is added the whole border scrolls with the text.

Here is the sample project used in the gif: https://github.com/3rror404/ns-textview-issues

┌──────────────────┬─────────────────┬────────────────┬───────────────┐
│ Component        │ Current version │ Latest version │ Information   │
│ nativescript     │ 3.1.3           │ 3.1.3          │ Up to date    │
│ tns-core-modules │ 3.1.1           │ 3.1.1          │ Up to date    │
│ tns-android      │                 │ 3.1.1          │ Not installed │
│ tns-ios          │ 3.1.0           │ 3.1.0          │ Up to date    │
└──────────────────┴─────────────────┴────────────────┴───────────────┘

[tsonevn]

Hi @3rror404,
Thank you for the attached sample project.
I reviewed it and indeed there is a problem the TextView while setting backgroundColor and borderRadius to the component. Regarding that as e temporary solution about the borderRadius could suggest to insert the TextView inside the StackLayout and to attached the boderRadius and borderColor to the parent Layout instead of to the TextView. For example:

<StackLayout class="bordered border-radius" row="2">
            <TextView hint="Add your comment..." class=" fixed-height" />
</StackLayout>

For further info and fix for the reported problems please keep track on the issue.

[PanayotCankov]

I did refactor the background corner radiuses a little while ago. I think it messed with the clip to bounds. This is a must fix.

[Ericky14]

It says this issue's PR has been merged, but which version has it been merged to? Also, I use nativescript-angular, do I have to wait for it to be merged there so I can use it in my application?

Thanks.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.