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.

Alinee los elementos del formulario en un formulario con FormItems anidados.

28 Jul, 2023 Programación

Estoy usando ant design en blazor. Un problema que tengo actualmente es que en el diseño anidado del <FormItem> no puedo alinear los elementos como un formulario. Actualmente no están en línea. ¿Hay alguna forma de solucionarlo? ¿Supongo que debería hacerse de alguna manera HTML?

Aquí está mi código actual:

<Panel Header="Información básica" Key="1">
    <Form Layout="FormLayout.Horizontal" Model="this">
        <FormItem Label="Título del registro">
          <Input @bind-Value="@this.Title" />
        </FormItem>
        <FormItem Label="Descripción 1235465">
          <Input @bind-Value="@this.Description" />
        </FormItem>
        <FormItem Label="Contenido">
          <TextArea Rows="4" @bind-Value="@this.Content" />
        </FormItem>
        <FormItem Label="Fecha" NoStyle>
          <DatePicker @bind-Value="@this.SelectedDate" ShowTime="@true" OnChange="this.OnDateSelected" />
        </FormItem>
    </Form>
  </Panel>

Aquí cómo se ve actualmente:

Imagen

Aquí hay un ejemplo de lo que estoy tratando de lograr:

Imagen

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Una posible solución alternativa para este problema es usar CSS para establecer la propiedad de visualización de los elementos anidados <formitem> en inline-block. Esto hará que los elementos aparezcan en línea entre sí, como en la imagen de ejemplo deseada.

    Aquí hay un ejemplo de código CSS que puedes agregar a tu componente Blazor:

    .ant-form-item-label {
  display: inline-block;
  width: 120px; /* ajusta el ancho según sea necesario */
  margin-right: 10px; /* agrega espacio entre la etiqueta y la entrada */
}

.ant-form-item-control {
  display: inline-block;
  width: calc(100% - 130px); /* calcula el ancho según el ancho de la etiqueta */
}

    Puedes agregar este código CSS tanto en la sección head de tu componente Blazor como en un archivo CSS separado que incluyas en tu componente.

    Con este CSS aplicado, tus elementos <formitem> deberían aparecer en línea entre sí, como en la imagen de ejemplo deseada.

Comments are closed.