Quantcast
Channel: Ionic Forum - Latest topics
Viewing all articles
Browse latest Browse all 70765

In ios, selecting item in ion radio group causes automatic scroll in ionic v4

$
0
0

@jos333 wrote:

Current behavior:
when I select one of the items in the ion radio group, ion content scroll to down and i can’t scroll up. Kindly find the attached video for the reference.

Expected behavior:
When I select it should stay in that position, should not scroll automatically.

Steps to reproduce:
Start a sample project and put my code with some sample data. And run it in IOS device.

Related code:

<ion-content fullscreen>
<ion-list bg-transparent lines="none">
    <ng-container *ngFor="let product of newProductsAndVariants; let i = index">
        <ion-radio-group allowEmptySelection="true">
            <ion-list-header class="ion-padding-top">
                <ion-label>
                    <div fs25 white>{{product?.product?.languages[currentLanguage]?.name}}</div>
                    <div fs15 white padding-top-5 text-mixed-casing fw100> <span> {{product?.product?.languages[currentLanguage]?.description}} </span> </div>
                </ion-label>
            </ion-list-header>
            <ion-item lines="none" *ngFor="let variant of product?.product?.variants; let j = index">
                <ion-radio slot="start" mode="md" [value]="variant" (click)="totalTimeandPrice(i, $event.target.value, j)"></ion-radio>
                <ion-label class="ion-text-wrap">
                    <div fs20 white> {{variant?.languages[currentLanguage]?.variantName}} </div>
                </ion-label>
                <ion-label slot="end" class="ion-text-right">
                    <div fs20 white><span margin-right-20>{{variant?.duration}}
                            min</span><span>{{variant?.pricing[0]?.price}}</span></div>
                </ion-label>
            </ion-item>
        </ion-radio-group>
    </ng-container>
</ion-list>
</ion-content>
insert short code snippets here
```<ion-content fullscreen>
<ion-list bg-transparent lines="none">
    <ng-container *ngFor="let product of newProductsAndVariants; let i = index">
        <ion-radio-group allowEmptySelection="true">
            <ion-list-header class="ion-padding-top">
                <ion-label>
                    <div fs25 white>{{product?.product?.languages[currentLanguage]?.name}}</div>
                    <div fs15 white padding-top-5 text-mixed-casing fw100> <span> {{product?.product?.languages[currentLanguage]?.description}} </span> </div>
                </ion-label>
            </ion-list-header>
            <ion-item lines="none" *ngFor="let variant of product?.product?.variants; let j = index">
                <ion-radio slot="start" mode="md" [value]="variant" (click)="totalTimeandPrice(i, $event.target.value, j)"></ion-radio>
                <ion-label class="ion-text-wrap">
                    <div fs20 white> {{variant?.languages[currentLanguage]?.variantName}} </div>
                </ion-label>
                <ion-label slot="end" class="ion-text-right">
                    <div fs20 white><span margin-right-20>{{variant?.duration}}
                            min</span><span>{{variant?.pricing[0]?.price}}</span></div>
                </ion-label>
            </ion-item>
        </ion-radio-group>
    </ng-container>
</ion-list>
</ion-content>

**Other information:**
<!-- List any other information that is relevant to your issue. Stack traces, related issues, suggestions on how to fix, Stack Overflow links, forum links, etc. -->

**Ionic info:**

Ionic:

   Ionic CLI                     : 5.4.1 (C:\Users\Joshuva\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.11.0
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Capacitor:

   Capacitor CLI   : 1.2.1
   @capacitor/core : 1.2.1

Utility:

   cordova-res : 0.3.0
   native-run  : 0.2.2

System:

   NodeJS : v10.11.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.11.1
   OS     : Windows 10

Posts: 1

Participants: 1

Read full topic


Viewing all articles
Browse latest Browse all 70765

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>