Contenido de iones con la lista de iones solo se muestra en un área pequeña de mi componente -- angular campo con ionic-framework campo con ionic4 camp Relacionados El problema

Ion-content with ion-list only shown in small area of my component


0
vote

problema

Español

En mi página, uso dos componentes uno junto al otro así:

  <ion-content> <ion-row>   <ion-col  size=4>     <list-component></list-component>   </ion-col>   <ion-col size=8>     <news-component></news-component>   </ion-col> </ion-row>   

En el componente de lista, quiero usar una lista desplazable como esta desde los documentos iónicos:

  <ion-list>     <ion-item>         <ion-label>Pokémon Yellow</ion-label>         </ion-item>         <ion-item>             <ion-label>Mega Man X</ion-label>         </ion-item> </ion-list>   

Cuando lo uso así, toda la página se desplaza, incluido el componente de noticias. Así que revisé a Google y encontré que necesito usar la lista dentro de un bloque de contenido de iones. Así que lo intenté así:

  <ion-content         [scrollEvents]="true"         (ionScrollStart)="logScrollStart()"         (ionScroll)="logScrolling($event)"         (ionScrollEnd)="logScrollEnd()">     <ion-list>         <ion-item>             <ion-label>Pokémon Yellow</ion-label>         </ion-item>         <ion-item>             <ion-label>Mega Man X</ion-label>         </ion-item>     </ion-list> </ion-content>   

Pero ahora tengo el problema de que la lista se muestra solo en una ventana pequeña y no en todo el componente.

lista en la ventana pequeña

Cuando agrego una altura como el ejemplo debajo, funciona, pero entonces no es dinámico. Quiero darle como el 90% de la altura del componente. Pero mi magia no es tan fuerte para hacerlo ... ðÿ~ ¢

  <ion-content style="height: 66vh">   

lista con altura estática

¿Qué me he olvidado de hacer que funcione?

iónico:

CLI iónico: 5.4.5 (/ USR / local / lib / node_modules / iónico) Marco iónico: @ iónico / angular 4.11.3 @ angular-devkit / build-angular: 0.801.3 @ Angular-Devkit / Schematics: 8.1.3 @ angular / cli: 8.1.3 @ JICIIC / Angular-Toolkit: 2.0.0

Utilidad:

cordova-res: no instalado RUNN RUN: NO INSTALADO

Sistema:

nodejs: v12.4.0 (/ USR / local / bin / nodo) NPM: 6.9.0 OS: MACOS CATALINA

Original en ingles

In my page I use two components next to each other like this:

<ion-content> <ion-row>   <ion-col  size=4>     <list-component></list-component>   </ion-col>   <ion-col size=8>     <news-component></news-component>   </ion-col> </ion-row> 

In the list-component I want to use a scrollable list like this from the ionic docs:

<ion-list>     <ion-item>         <ion-label>Pokxc3xa9mon Yellow</ion-label>         </ion-item>         <ion-item>             <ion-label>Mega Man X</ion-label>         </ion-item> </ion-list> 

When I use it like this, the whole page scrolls including the news-component. So I checked google and found that I need to use the list inside an ion-content block. So I tried it like this:

<ion-content         [scrollEvents]="true"         (ionScrollStart)="logScrollStart()"         (ionScroll)="logScrolling($event)"         (ionScrollEnd)="logScrollEnd()">     <ion-list>         <ion-item>             <ion-label>Pokxc3xa9mon Yellow</ion-label>         </ion-item>         <ion-item>             <ion-label>Mega Man X</ion-label>         </ion-item>     </ion-list> </ion-content> 

But now I have the problem that the list is shown only in a small window and not in the whole component.

List in small window

When I add a height like example below it works, but then it is not dynamic. I want to give it like 90% of the height of the component. But my magic is not that strong to do so... xf0x9fx98xa2

<ion-content style="height: 66vh"> 

List with static height

What do I have forgotten to make it work?

Ionic:

Ionic CLI : 5.4.5 (/usr/local/lib/node_modules/ionic) Ionic Framework : @ionic/angular 4.11.3 @angular-devkit/build-angular : 0.801.3 @angular-devkit/schematics : 8.1.3 @angular/cli : 8.1.3 @ionic/angular-toolkit : 2.0.0

Utility:

cordova-res : not installed native-run : not installed

System:

NodeJS : v12.4.0 (/usr/local/bin/node) npm : 6.9.0 OS : macOS Catalina

        
   
   

Lista de respuestas

0
 
vote

De acuerdo, después de que lo hubiera visto de nuevo tres semanas después, funciona como se esperaba. No sé por qué, pero esto puede estar cerrado.

 

Okay, After I had a look at it again three weeks later, it works as expected. I don't know why, but this can be closed.

 
 
   
   

Relacionados problema

-1  IONIC: ¿Cómo puedo acceder a un archivo en la carpeta Activos?  ( Ionic how can i access a file in assets folder ) 
Tengo un problema cuando intento acceder a un archivo donde está la carpeta de activos del proyecto. No puedo acceder a ella. ¿Puedes ayudarme? Mi TS es: ...

1  IONIC 4 + STENIENJS - Agregar soporte para Google Analytics  ( Ionic 4 stenciljs adding support for google analytics ) 
Estoy jugando con un interesante conjunto de marcos iónicos y stencitrjs: no quiero agregar nada más (sin angular, viue, etc.) y, debido a que estoy enfrentan...

0  IONIC 4 - La propiedad 'DataDirectory' no existe en el tipo de error 'Archivo' construir Android  ( Ionic 4 property datadirectory does not exist on type file error build and ) 
¿Alguien ha visto este error cookies.txt0 ? I importado de esa manera en el archivo cookies.txt1111 : cookies.txt2 y, en el componente, estoy llamando...

0  IONIC 4: Cómo tener una etiqueta de iones (con proporciones mínimas) e ION-SELECT (con proporciones máximas) en la misma línea de una manera proporcional  ( Ionic 4 how to have an ion label with minimum proportions and ion select wit ) 
Tengo un formulario para el registro de usuarios. Tengo problemas al colocar etiquetas y seleccionar en la misma línea. También al colocar las mismas líneas s...

0  No se encuentra Modal Controller iónico en el paquete de reacción  ( Ionic modalcontroller in react package is not found ) 
Estoy usando reaccionar con el paquete iónico e intenté importar modalcontroller de '@ iónico / reaccionar' pero un error ha ecurado: _bootStrapContainer =...

0  InPrembolser en .show () indefinido y la instancia se desvanece del alcance?  ( Inappbrowser on show undefined and instance is vanished from the scope ) 
OK Pregunta puede sonar raro. Tengo 2 páginas en mi aplicación IONIC 5. La página A tiene una pantalla de inicio de sesión, llame a su archivo .service.ts c...

0  Restablecer la fuente en IIX 4/5 a la fuente predeterminada  ( Reset font on ionic 4 5 to default font ) 
Tengo un problema con IONIC, he cambiado la fuente predeterminada a una fuente de Google, como esta: --ion-font-family: 'Oleo Script',cursive !important; Hi...

0  Añadiendo páginas iónicas a la aplicación angular ya creada [iónico]  ( Adding ionic pages to already created angular app ionic ) 
He convertido con éxito la aplicación angular en una aplicación iónica que puede ejecutarse en iOS y Android. Ahora estoy tratando de agarrar los métodos del ...

-1  Toast.Present () falló en IONIC 4  ( Toast present failed in ionic 4 ) 
¿Hay alguien que pueda ayudarme a traducir esto a IONIC-4? async addTransaction() { this.ref = this.db.list('transactions', ref => ref.orderByChild('mont...

0  Notificación iónica 4, Firebase-X y FCM PUSH NECUENCIA CON BOTOS DE ACCIÓN  ( Ionic 4 firebase x and fcm push notification with action buttons ) 
Estoy tratando de agregar botones de acción a las notificaciones de push enviadas a través del SDK de administración de Firebase a mi aplicación IONIC 4 usand...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos