JoshDSommer / nativescript-ngx-slides

A NativeScript + Angular module for to add a slides component to your mobile app
Other
45 stars 34 forks source link

3 step form inside slides #58

Open otnielgomez opened 6 years ago

otnielgomez commented 6 years ago

Hi guys, I think this plugin is awesome but I´m having some troubles placing a form inside slides.

I want to make a 3 step form but the keyboard keeps overlapping on the fields.

I think some how the problem is inside de <slide> tag

Is there any workarroud or suggestions for this not to happen?

Here is the code.

<slides #formSlider pageHeight="500" [pageIndicators]="false">
                <slide slideHeight="80%">
                    <GridLayout columns="*" rows="*,50">
                        <StackLayout col="0" row="0" style="background: purple;">
                            <TextField class="field" hint="Nombre(s)"></TextField>
                            <TextField class="field" hint="Apellidos"></TextField>
                            <GridLayout rows="60" columns="*,*,*">
                                <TextField class="field" col="0" hint="Día"></TextField>
                                <TextField class="field" col="1" hint="Mes"></TextField>
                                <TextField class="field" col="2" hint="Año"></TextField>
                            </GridLayout>
                            <TextField class="field" hint="Lugar de naciemiento"></TextField>
                            <TextField class="field" hint="CURP"></TextField>
                            <TextField class="field" hint="Estado civil"></TextField>
                            <TextField class="field" hint="Religión"></TextField>
                            <TextField class="field" hint="Nombre(s)"></TextField>
                            <TextField class="field" hint="Apellidos"></TextField>
                            <GridLayout rows="60" columns="*,*,*">
                                <TextField class="field" col="0" hint="Día"></TextField>
                                <TextField class="field" col="1" hint="Mes"></TextField>
                                <TextField class="field" col="2" hint="Año"></TextField>
                            </GridLayout>
                            <TextField class="field" hint="Lugar de naciemiento"></TextField>
                            <TextField class="field" hint="CURP"></TextField>
                            <TextField class="field" hint="Estado civil"></TextField>
                            <TextField class="field" hint="Religión"></TextField>
                        </StackLayout>
                        <StackLayout col="0" row="1" style="background: yellow;">
                            <Button class="boton-primary next" text="Siguiente >" (tap)="nextStepForm()"></Button>
                        </StackLayout>    
                    </GridLayout>
                </slide>
                <slide>
                    <!-- SECOND PART OF THE FORM -->
                </slide>
                <slide>
                    <!-- THIRD PART OF THE FORM -->
                </slide>
            </slides>
JoshDSommer commented 6 years ago

This just an idea but maybe try putting a scrollview inside of the <slide> that wraps the grid layout?. I believe that should resolve your issue.