Issues Arise with Nativescript Layout When Content is Not in View on iOS

This problem has been giving me a hard time for the past few days. I hope someone can help me figure out what's wrong.

I have a view that shows a nested list inside a main list. The main list contains header details. Everything looks fine when the initial content is displayed, but when scrolling to bring the header information into view, it becomes incorrect.

<ScrollView>
<FlexboxLayout flexDirection="column">
    <StackLayout *ngFor="let property of properties">
        <FlexboxLayout flexDirection="row">
            <FlexboxLayout flexDirection="column" alignContent="center" style="background-color: red;">
                <Label [text]="property.addressLine1"></Label>
                <Label [text]="formatCityStatePostalCode(property)"></Label>
            </FlexboxLayout>
        </FlexboxLayout>

        <StackLayout *ngFor="let action of property.actions">
            <Label style="padding-bottom: 30" [text]="action.title"></Label>
        </StackLayout>
    </StackLayout>
</FlexboxLayout>

I've experimented with using different layouts like StackLayouts, GridLayouts, and FlexboxLayouts, but they all yield the same result.

Here's how it looks with both headers in the initial view

You'll notice that both headers are identical.

However, when the second header is off screen, it looks like this.

The off-screen header gets displayed

iosangularscrollviewnativescript

Answer №1

I encountered a similar issue in the past where hidden views were being stretched to align their bottom with the bottom of the scrollview, causing overlapping. To identify this problem, I suggest adding a background color with 20% opacity to all these labels.

One way to potentially resolve this is by temporarily setting iosOverflowSafeArea="false" on dynamically created elements within a ScrollView.

<ScrollView>
<FlexboxLayout flexDirection="column">
    <StackLayout *ngFor="let property of properties" iosOverflowSafeArea="false">
        <FlexboxLayout flexDirection="row">
            <FlexboxLayout flexDirection="column" alignContent="center" style="background-color: red;">
                <Label [text]="property.addressLine1"></Label>
                <Label [text]="formatCityStatePostalCode(property)"></Label>
            </FlexboxLayout>
        </FlexboxLayout>

        <StackLayout *ngFor="let action of property.actions" iosOverflowSafeArea="false">
            <Label style="padding-bottom: 30" [text]="action.title"></Label>
        </StackLayout>
    </StackLayout>
</FlexboxLayout>
</ScrollView>

The discussion related to this issue can be found here:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be causing the conditional div to malfunction in Angular?

There are three conditional div elements on a page, each meant to be displayed based on specific conditions. <div *ngIf="isAvailable=='true'"> <form> <div class="form-group"> <label for ...

angulartypescriptfirebase

How to Retrieve Properties from Child Elements in NativeScript ngFor Directive

Working with a dynamically generated checklist in Angular/Nativescript: <StackLayout *ngIf="assessment"> <StackLayout *ngFor="let instance_item of assessment.exam_instance_items; let i= index"> <ns-examitem [attr.id] ...

angularnativescriptnativescript-angular

I am experiencing issues with certain Tailwind CSS classes not functioning properly in my Angular 16 project

I have embarked on an exciting journey of developing an Angular 16 project integrated with the latest version of Tailwind CSS, V3. Following the official documentation, I expected everything to work seamlessly. However, I am perplexed as to why some classe ...

angulartailwind-csstailwind-3daisyuiangular16

Routing static pages in Angular 2

I successfully created a static page using Angular 2. When I run ng serve and visit my page, it functions as intended. Specifically, I can navigate to a specific page by typing in the URL, such as www.mysite.com/resume. However, after uploading it to my si ...

javascriptangularangular2-routing

Obtaining the dimensions of each individual child component within an NgTemplate

I have the following code snippet within my template. While I can iterate through its components using `get`, it does not return an object that allows me to access deeper into the HTML attributes. <ng-template #container></ng-template> Compon ...

angulartypescriptangular9

Tips for managing your time while anticipating an observable that may or may not

I am facing a dilemma in my Angular app where I need to conditionally make an HTTP call to check for the existence of a user. Depending on the result of this call, I may need to either proceed with another API request or halt the processing altogether. I ...

angulartypescriptrxjs

The function tokenNotExpired encounters an error when attempting to access the localStorage, as it

I am looking to incorporate the angular2-jwt library into my project: https://github.com/auth0/angular2-jwt However, I encountered an exception when attempting to call the tokenNotExpired function: Exception: Call to Node module failed with error: Refe ...

javascriptangularlocal-storageangular-universalangular2-jwt

Dynamic Dropdown Options in Angular 6 HTML Input Field

Looking to create an interactive HTML5 input field that guides the user with their input. Consider a scenario where the user is required to follow a specific grammar while entering text: rule: <expression> {<op><expression>} expression: ...

htmlangular

Enhancing Angular input validators with updates

Working on a project with Angular 6, I have set up an input field using mat-input from the Angular Material framework and assigned it an id for FormGroup validation. However, when I initialize my TypeScript class and update the input value, the validator d ...

javascriptnode.jsangulartypescriptangular-cli

Angular2: Issue encountered while processing click event

When I click a button on my client application, it sends a request to the server I created using Express. The request handler in the server simply logs 'Delete from server' every time the button is clicked. I am encountering these errors when cl ...

javascriptangularjsangularangular2-routingangular2-directives

`ng-apexcharts` causing unit test failures

I've been working on integrating apexcharts and ng-apexcharts into my home component. While I was able to get it up and running smoothly, it seems to be causing issues with my unit tests. Despite researching possible solutions, I haven't been abl ...

angulartypescriptng-apexcharts

Services that are not configured as singleton instances

In my view, I am utilizing a file upload component multiple times. Each uploading file is managed by a service that handles its metadata. However, when I add files to one component, all the components begin updating instead of just the intended one. Is it ...

angular

Reactive form allows you to easily format dates

Currently, the date displayed is 1/4/2022. We need it to display in the format 01/04/2022. Can we achieve this formatting using reactive forms with the sample Model form provided below? Thank you. How can we format it when starting from transactionStartD ...

javascriptangulartypescript

Using Angular's routerLinkActive to manage active states for multiple paths

With my Angular 5 project, I have successfully implemented a bootstrap nav-bar menu where routerLinkActive works perfectly when the initial path matches the routerlink of the menu item, like this: <li [routerLinkActive]="['active']"> < ...

angularroutesangular2-routingrouterlinkactive

Unable to retrieve npm repository from GitHub

I've been grappling for approximately 2 hours to integrate a repository into my angular project without success. Here's the link I've been trying: https://github.com/cmelange/ECL-3D-Components#ecl-3d-components. Despite previously having i ...

angulargithubnpm

Unusual behavior exhibited by ng-if within a widget

Hey there, seeking some assistance here. I'm currently making edits to a widget and within the client HTML code, I've come across two ng-if statements (the first one was already there, I added the second). <li> <a ng-if="data.closed ...

htmlangularservicenow-client-scripts

Exploring the Connection with JSON-server

While creating a simulated API using json-server, I encountered an issue with passing a query. When utilizing _expand, I am able to display the parameters of a relationship, but it doesn't seem to work when the relationship is nested within a child. ...

jsonangularjson-server

Optimal Method for Inserting Lengthy Data using Sequelize

I have a table containing 20 elements. Is there a more concise way to input data into Sequelize without listing each element individually like this: Sequelize.create({ elem1: req.body.eleme1, elem2: req.body.eleme2, elem3: req.body.eleme3, elem4: ...

mysqlangularsequelize.js

Why does the property of {{hero.name}} function properly in a <h> tag but not in an <img> tag?

Within this template, the code below functions correctly: <h3>{{hero.name}}</h3> It also works for: <a routerLink="/details/{{hero.id}}">{{hero.name}}</a> However, there seems to be an issue with the following image path ...

angulartypescriptfirebasegoogle-cloud-firestoreangularfire

Changes are not being detected in new Angular 2 files

Currently, I am enhancing an Angular 2 project by incorporating new modules. However, the changes I made in these files are not being recognized within the project. I have attempted to research how change detection functions in Angular 2, but have not bee ...

javascriptangular