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

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

Ejemplo que muestra el control Arriba-Abajo visible

Ejemplo que muestra el control Arriba-Abajo oculto

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

1. Vaya a IDE > Configuración adicional
2. Haga clic en el botón Interfaces de tema
3. Haga clic en + Interfaz

4. Proporcione las siguientes entradas:

   • 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 ícono de marca de verificación para guardar

Crear una Interfaz de Tema Personalizada (firefox)

1. Vaya a IDE > Configuración adicional
2. Haga clic en el botón Interfaces de temas
3. Haga clic en + Interfaz

4. Proporcione las siguientes entradas:

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

5. Haga clic en el ícono 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 la aplicación.

1. Vaya a IDE > Look and Feel
2. Seleccione la Colección asignada a su aplicación
3. Vaya a 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 las siguientes entradas:

    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 un nivel granular, por ejemplo, a un control específico.

1. Vaya a IDE > Look and Feel
2. Seleccione la Colección de clientes
3. Haga clic en el botón + Tema
4. Asigne un Nombre de 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 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

11. Haga clic en Guardar

12. Haga clic en el botón + Estilo

13. Proporcione las siguientes entradas:

    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 hasta la página con el control que desea modificar
2. Vaya a Action Drawer > Live Designer
3. Seleccione el control en la vista de diseño de la página
4. Vaya a More > Styles
5. Haga clic en + Conditional Formatting
6. Seleccione Unconditional
7. Haga clic en el botón Choose Style
8. Busque el tema personalizado. Por ejemplo: Hide Up-Down Control
9. Haga clic en el botón + Choose
10. Navegue nuevamente a la vista de la aplicación, actualice el navegador y pruebe la actualización