css for drop down list

[chercm]

i have a user drop down list but no matter what i do , the input box area is way too small 

how can i increase it ?

.sn-record-picker {
width: 100%;
max-width: 600px; /* Ensure it spans across the available width */
font-size: 1.6em;
padding: 10px;
height: 100px; /* Ensure it's large enough */
border-radius: 8px;

[Manikandan Than]

Hello @chercm ,

Is this drop down created as custom dropdown which configured in HTML and available on Portal or OOB button on Native(Form level) UI ?
If its custom created means you can add the width on style tag for that button.

If its OOB field then change the size/length of a field by select 'Configure Style'. 
Create New style for that field
In the 'Style' section add the width as per the requirement

Kindly mark it correct and helpful if it solves your issue.

Thanks and Regards,

Manikandan Thangaraj

[chercm]

this is not on the form . this is plain script . it is on the widget 

[Murtaza Saify]

To increase the size of the user dropdown list input box in ServiceNow, you need to adjust the CSS styles. Based on your provided CSS snippet, it looks like you're targeting the .sn-record-picker class, which is used for record pickers (including user dropdowns). However, the height property might not be applied correctly due to the default styles or other overriding styles.

Here’s how you can fix this:

---

1. Inspect the Element

1. Open the page in your browser.

2. Right-click on the user dropdown and select Inspect (or press F12).

3. Identify the exact class or element controlling the input box size.

---

2. Update the CSS

Based on your requirements, here’s how you can adjust the CSS:

Option 1: Increase Input Box Height

If the input box itself is too small, target the input element inside the .sn-record-picker:

css

Copy

.sn-record-picker input {
  height: 50px; /* Adjust height as needed */
  font-size: 1.6em; /* Adjust font size */
  padding: 10px; /* Adjust padding */
}

Option 2: Increase the Dropdown Container Height

If the entire dropdown container (including the input and dropdown list) is too small, target the .sn-record-picker container:

css

Copy

.sn-record-picker {
  width: 100%;
  max-width: 600px; /* Ensure it spans across the available width */
  font-size: 1.6em; /* Adjust font size */
  padding: 10px; /* Adjust padding */
  height: auto; /* Allow height to adjust based on content */
  min-height: 50px; /* Set a minimum height */
  border-radius: 8px; /* Rounded corners */
}

Option 3: Increase Dropdown List Height

If the dropdown list (options) is too small, target the dropdown list specifically:

css

Copy

.sn-record-picker .dropdown-menu {
  max-height: 300px; /* Adjust max height of the dropdown list */
  overflow-y: auto; /* Add scrollbar if needed */
}

---

3. Apply the CSS

1. Service Portal:

   • If this is for a Service Portal, add the CSS to the Theme or Widget CSS.

   • Navigate to Service Portal > Themes or Widgets, and paste the CSS in the appropriate CSS file.

2. Classic UI:

   • If this is for a classic UI form, add the CSS to the Form CSS field.

   • Navigate to the form, open the Form Layout, and paste the CSS in the CSS Includes field.

3. Custom Application:

   • If this is for a custom application, add the CSS to the Application CSS file.

---

4. Debugging Tips

• Use the browser’s Inspect tool to check if your styles are being applied.

• Look for any overriding styles that might be affecting the height.

• Add !important to your CSS rules if necessary (use sparingly):

  css

  Copy

  .sn-record-picker input {
    height: 50px !important;
  }

---

5. Example: Full CSS

Here’s a complete example to increase the input box size:

css

Copy

.sn-record-picker {
  width: 100%;
  max-width: 600px;
  font-size: 1.6em;
  padding: 10px;
  height: auto;
  min-height: 50px;
  border-radius: 8px;
}

.sn-record-picker input {
  height: 50px; /* Adjust height as needed */
  font-size: 1.6em; /* Adjust font size */
  padding: 10px; /* Adjust padding */
}

.sn-record-picker .dropdown-menu {
  max-height: 300px; /* Adjust max height of the dropdown list */
  overflow-y: auto; /* Add scrollbar if needed */
}

[chercm]

@Murtaza Saify  i am interesting in this box