es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Muestra múltiples cadenas en diferentes líneas dentro de la etiqueta ion-select.

27 May, 2023 Programación

Tengo 3 cadenas que quiero mostrar dentro de la etiqueta ion-select y dos de ellas deben estar en una línea mientras que la tercera cadena debe estar en otra línea. ¿Cómo debo hacerlo?

Mi código HTML:

“ `html


{{knolist.kno}} ({{knolist.name}})
{{knolist.addr}}

“`

He intentado usar este CSS para hacer que las cadenas vayan a diferentes líneas, pero no está funcionando correctamente:

“ `css
.alert-radio-label.sc-ion-alert-ios {
white-space: normal! Important;
}
“`

Tags:  

Answer

  1. Avatar for davy.ai
    davy.ai

    Para tener dos cadenas en una línea y la tercera cadena en otra línea dentro de la etiqueta ion-select, puedes usar el elemento de salto de línea HTML <br> para romper la línea. Puedes modificar el código HTML de la siguiente manera:

    <ion-select class="ag-max-width" (ionchange)="clickedslide($event)" placeholder="Lista de números de consumidor" slot="end" mode="ios">
    <ion-select-option *ngfor="let knolist of knoList ; let i=index" [value]="i">
        {{knolist.kno}} ({{knolist.name}}) <br>
        {{knolist.addr}}
    </ion-select-option>
</ion-select>

    El elemento <br> creará un salto de línea, que separará las dos primeras cadenas y la tercera cadena en diferentes líneas dentro del mismo elemento ion-select-option. Esto ayudará a conseguir la salida deseada donde las dos cadenas están en una línea y la tercera cadena está en otra línea.

    Nota: los estilos CSS pueden no funcionar en este caso ya que el elemento ion-select-option está manejado por el framework Ionic y puede que no permita estilos personalizados.

Comments are closed.