Cómo Ocultar un Control Arriba-abajo en un Campo Numérico¶

Los campos numéricos muestran un incrementador de control arriba-abajo, de forma predeterminada, cuando el campo está en estado de edición. Un usuario puede hacer clic en los botones arriba o abajo para incrementar o disminuir un valor numérico correspondiente. Puede haber casos en los que desee ocultar este control arriba-abajo y este artículo le explicará cómo ocultarlo.

Ejemplo que muestra el control arriba-abajo visible

Ejemplo que muestra el control Arriba-Abajo oculto

Cree una Interfaz de Tema Personalizada (chrome, Safari, Edge, Opera)¶

1. Navegue hasta IDE > Configuraciones adicionales
2. Haga clic en el botón Interfaces de tema
3. Haga clic en + Interfaz

4. Proporcione los siguientes insumos:

   • Bienes Raíces = Controles
   • Grupo = Campos
   • Colección = Cliente
   • Nombre = Control arriba-abajo
   • Selector = input::-webkit-outer-spin-button, input::-webkit-inner-spin-button

5. Haga clic en el icono de marca de verificación para guardar.

Crear una Interfaz de Tema Personalizada (firefox)¶

1. Navegue hasta IDE > Configuraciones adicionales
2. Haga clic en el botón Interfaces de tema
3. Haga clic en + Interfaz

4. Proporcione los siguientes insumos:

   • Bienes Raíces = Controles
   • Grupo = Campos
   • Colección = Cliente
   • Nombre = Control arriba-abajo (Firefox)
   • Selector = input[type=number]

5. Haga clic en el icono de marca de verificación para guardar.

Opción 1: Aplicar el Tema Personalizado en Todo el Sitio¶

Siga estos pasos si desea aplicar esta personalización en toda una aplicación.

1. Navegue hasta IDE > Apariencia
2. Selecciona la Colección asignada a tu aplicación.
3. Vaya al Tema base
4. Seleccione Controles en Componentes
5. Seleccione Campos en Subcomponentes
6. Haga clic en el botón + Estilo

7. Proporcione las siguientes entradas:

   1. Área = Control arriba-abajo
   2. Tipo de estilo = Pantalla
   3. 1-Pantalla = ; -webkit-appearance: none; margin: 0
   4. 2-Opacidad = 0

8. Haga clic en Guardar

9. Haga clic en el botón + Estilo

10. Proporcione los siguientes insumos:

    1. Área = Control arriba-abajo (Firefox)
    2. Tipo de estilo = Pantalla
    3. 1-Pantalla = ;-moz-appearance: textfield

11. Haga clic en Guardar

Opción 2: Aplicar el Tema Personalizado a un Control Específico¶

Siga estos pasos si desea aplicar esta personalización a nivel granular, por ejemplo a un control específico.

1. Navegue hasta IDE > Apariencia
2. Seleccione el Cliente Colección
3. Haga clic en el botón + Tema
4. Asigne un Nombre del tema. Por ejemplo: Ocultar control arriba-abajo
5. Establezca el Tipo en Campo
6. Haga clic en Guardar
7. Seleccione Controles en Componentes
8. Seleccione Campos en Subcomponentes
9. Haga clic en el botón + Estilo

10. Proporcione los siguientes insumos:

    1. Área = Control arriba-abajo
    2. Tipo de estilo = Pantalla
    3. 1-Pantalla = ; -webkit-appearance: none; margin: 0
    4. 2-Opacidad = 0

11. Haga clic en Guardar

12. Haga clic en el botón + Estilo

13. Proporcione los siguientes insumos:

    1. Área = Control arriba-abajo (Firefox)
    2. Tipo de estilo = Pantalla
    3. 1-Pantalla = ;-moz-appearance: textfield

14. Haga clic en Guardar

Aplicar Tema a un Control¶

1. Navegue a la página con el control para modificar.
2. Vaya a Cajón de acciones > Live Designer
3. Seleccione el control desde la vista de diseño de página.
4. Vaya a Más > Estilos
5. Haga clic en + Formato condicional
6. Seleccione Incondicional
7. Haga clic en el botón Elegir estilo
8. Localice el tema personalizado. Por ejemplo: Ocultar control arriba-abajo
9. Haga clic en el botón + Elegir
10. Vuelva a la vista de la aplicación, actualice el navegador y pruebe la actualización.