Skip to content

TextView scrolling and sizing issue on iOS #4733

Closed

Description

@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.

ezgif com-video-to-gif

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    │
└──────────────────┴─────────────────┴────────────────┴───────────────┘

Activity

  1. tsonevn commented on Aug 23, 2017

    @tsonevn
    Contributor

    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.

  2. added this to the milestone on Aug 23, 2017
  3. PanayotCankov commented on Aug 23, 2017

    @PanayotCankov
    Contributor

    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.

  4. added
    ready for testTSC needs to test this and confirm against live production apps and automated test suites
    on Aug 29, 2017
  5. removed
    ready for testTSC needs to test this and confirm against live production apps and automated test suites
    on Aug 29, 2017
  6. Ericky14 commented on Sep 5, 2017

    @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.

  7. lock commented on Aug 27, 2019

    @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.

  8. locked and limited conversation to collaborators on Aug 27, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions