How To Hide an Up-Down Control in Numeric Field¶

Numeric fields display an up-down control incrementor, by default, when the field is in the edit state. A user can click the up or down buttons to increment or decrement a corresponding numeric value. There may be instances where you want to hide this up-down control, and this article will step you through how to hide it.

Example showing the Up-Down Control visible

Example showing the Up-Down Control hidden

Create a Custom Theme Interface (Chrome, Safari, Edge, Opera)¶

1. Navigate to the IDE > Additional Settings
2. Click the Theme Interfaces button
3. Click + Interface

4. Provide the following inputs:

   • Real Estate = Controls
   • Group = Fields
   • Collection = Customer
   • Name = Up-Down Control
   • Selector = input::-webkit-outer-spin-button, input::-webkit-inner-spin-button

5. Click the checkmark icon to save

Create a Custom Theme Interface (Firefox)¶

1. Navigate to the IDE > Additional Settings
2. Click the Theme Interfaces button
3. Click + Interface

4. Provide the following inputs:

   • Real Estate = Controls
   • Group = Fields
   • Collectione = Customer
   • Name = Up-Down Control (Firefox)
   • Selector = input[type=number]

5. Click the checkmark icon to save

Option 1: Apply the Custom Theme Sitewide¶

Follow these steps if you want to apply this customization across an entire app.

1. Navigate to the IDE > Look and Feel
2. Select the Collection assigned to your app
3. Go to the Base Theme
4. Select Controls under Components
5. Select Fields under Subcomponents
6. Click the + Style button

7. Provide the following inputs:

   1. Area = Up-Down Control
   2. Style Type = Display
   3. 1-Display = ; -webkit-appearance: none; margin: 0
   4. 2-Opacity = 0

8. Click Save

9. Click the + Style button

10. Provide the following inputs:

    1. Area = Up-Down Control (Firefox)
    2. Style Type = Display
    3. 1-Display = ;-moz-appearance: textfield

11. Click Save

Option 2: Apply the Custom Theme to a Specific Control¶

Follow these steps if you want to apply this customization at a granular level, for example to a specific control.

1. Navigate to the IDE > Look and Feel
2. Select the Customer Collection
3. Click the + Theme button
4. Assign a Theme Name. For example: Hide Up-Down Control
5. Set the Type to Field
6. Click Save
7. Select Controls under Components
8. Select Fields under Subcomponents
9. Click the + Style button

10. Provide the following inputs:

    1. Area = Up-Down Control
    2. Style Type = Display
    3. 1-Display = ; -webkit-appearance: none; margin: 0
    4. 2-Opacity = 0

11. Click Save

12. Click the + Style button

13. Provide the following inputs:

    1. Area = Up-Down Control (Firefox)
    2. Style Type = Display
    3. 1-Display = ;-moz-appearance: textfield

14. Click Save

Apply Theme to a Control¶

1. Navigate to the page with the control to modify
2. Go to Action Drawer > Live Designer
3. Select the control from the page design view
4. Go to More > Styles
5. Click + Conditional Formatting
6. Select Unconditional
7. Click the Choose Style button
8. Locate the custom theme. For example: Hide Up-Down Control
9. Click the + Choose button
10. Navigate back to the app view, refresh the browser and test update