Como Ocultar um Controle para Cima e para Baixo em um Campo Numérico

Campos numéricos exibem um incrementador de controle para cima-baixo, por padrão, quando o campo está no estado de edição. Um usuário pode clicar nos botões para cima ou para baixo para incrementar ou decrementar um valor numérico correspondente. Pode haver casos em que você queira ocultar esse controle para cima-baixo, e este artigo mostrará como ocultá-lo.

Exemplo mostrando o Controle Up-Down visível

Exemplo mostrando o Controle Cima-Baixo oculto

Crie uma Interface de Tema Personalizada (chrome, Safari, Edge, Opera)

1. Navegue até IDE > Configurações adicionais
2. Clique no botão Interfaces de tema
3. Clique em + Interface

4. Forneça as seguintes entradas:

   • Imóveis = Controles
   • Grupo = Campos
   • Coleção = Cliente
   • Nome = Controle para cima e para baixo
   • Seletor = input::-webkit-outer-spin-button, input::-webkit-inner-spin-button

5. Clique no ícone de marca de seleção para salvar

Crie uma Interface de Tema Personalizada (firefox)

1. Navegue até IDE > Configurações adicionais
2. Clique no botão Interfaces de tema
3. Clique em + Interface

4. Forneça as seguintes informações:

   • Imóveis = Controles
   • Grupo = Campos
   • Colecionador = Cliente
   • Nome = Controle para cima e para baixo (Firefox)
   • Seletor = input[type=number]

5. Clique no ícone de marca de seleção para salvar

Opção 1: Aplicar o Tema Personalizado em Todo o Site

Siga estas etapas se quiser aplicar esta personalização em um aplicativo inteiro.

1. Navegue até IDE > Aparência
2. Selecione a Coleção atribuída ao seu aplicativo
3. Vá para o Tema base
4. Selecione Controles em Componentes
5. Selecione Campos em Subcomponentes
6. Clique no botão + Estilo

7. Forneça as seguintes entradas:

   1. Área = Controle para cima e para baixo
   2. Tipo de estilo = Exibição
   3. 1-Exibição = ; -webkit-appearance: none; margin: 0
   4. 2-Opacidade = 0

8. Clique em Salvar

9. Clique no botão + Estilo

10. Forneça as seguintes informações:

    1. Área = Controle para cima e para baixo (Firefox)
    2. Tipo de estilo = Exibição
    3. 1-Exibição = ;-moz-appearance: textfield

11. Clique em Salvar

Opção 2: Aplicar o Tema Personalizado a um Controle Específico

Siga estas etapas se quiser aplicar esta personalização em um nível granular, por exemplo, a um controle específico.

1. Navegue até IDE > Look and Feel
2. Selecione a Coleção do cliente
3. Clique no botão + Tema
4. Atribua um Nome do tema. Por exemplo: Ocultar controle para cima e para baixo
5. Defina o Tipo como Campo
6. Clique em Salvar
7. Selecione Controles em Componentes
8. Selecione Campos em Subcomponentes
9. Clique no botão + Estilo

10. Forneça as seguintes entradas:

    1. Área = Controle para cima e para baixo
    2. Tipo de estilo = Exibição
    3. 1-Exibição = ; -webkit-appearance: none; margin: 0
    4. 2-Opacidade = 0

11. Clique em Salvar

12. Clique no botão + Estilo

13. Forneça as seguintes informações:

    1. Área = Controle para cima e para baixo (Firefox)
    2. Tipo de estilo = Exibição
    3. 1-Exibição = ;-moz-appearance: textfield

14. Clique em Salvar

Aplicar Tema a um Controle

1. Navegue até a página com o controle a ser modificado
2. Vá para Action Drawer > Live Designer
3. Selecione o controle na visualização de design da página
4. Vá para More > Styles
5. Clique em + Conditional Formatting
6. Selecione Unconditional
7. Clique no botão Choose Style
8. Localize o tema personalizado. Por exemplo: Hide Up-Down Control
9. Clique no botão + Choose
10. Navegue de volta para a visualização do aplicativo, atualize o navegador e teste a atualização