Height of dropdown not updated
Service Studio Version
11.10.14 (Build 39806)

Hello everybody,

I am trying to edit the height of my dropdown widget. The height is well changed on my browser app but not in my service studio. It's very annoying to develop the visual.

Please can you help me?

Here the dropdown before edited height (40px) and after (20px) : 

When i change the padding of my dropdown it occurs this (it's weird):

Thanks a lot! and have a good day !

styles.jpg

mvp_badge
MVP
Solution

Hi Julien,

You can reference the .dropdown-container:after selector for adjusting the Dropdown widget (right-side) down-arrow as mentioned below.

CSS Snippet (RWA)

.dropdown-container:after {
    /* content: unset; // Style declaration to remove the Dropdown -> right down-arrow */
    border-color: red; // Style declaration to color the Dropdown -> right down-arrow
}


Hope this helps you!


Kind regards,

Benjith Sam

I've found it. You must customize this css : 

[data-dropdown] > div.dropdown-display {
    padding: 0px 0px 0px 0px;
    background-color: white;
    height:20px;
    border: 1px solid rgb(151, 151, 151);
    color: rgb(0, 56, 53);
    font-weight: normal;
    font-size:  10px;
    border-radius: 0px !important;
}


If you know how can i remove or edit the position of the little row in the right of the dropdown, please help me :)


Hi Julien,

To edit the position of drop down arrow at the right you need change this class,

.choices[data-type*="select-one"]:after {

  1.     color: var(--color-neutral-7);
  2.     content: '\f107';
  3.     font: normal normal normal 24px/1 FontAwesome;
  4.     font-family: 'FontAwesome';
  5.     position: absolute;
  6.     right: 26px;
  7.     top: 8px;
  8.     -webkit-transition: all 300ms ease;
  9.     transition: all 300ms ease;
  10.     transform-origin: center;

}

Regards,

Komal


Hi Komal, 

Thanks, but can you give me more details please? Because i  changed the value of right, top and the color but nothing change...

To be sure, are you talking about that arrow ?

mvp_badge
MVP
Solution

Hi Julien,

You can reference the .dropdown-container:after selector for adjusting the Dropdown widget (right-side) down-arrow as mentioned below.

CSS Snippet (RWA)

.dropdown-container:after {
    /* content: unset; // Style declaration to remove the Dropdown -> right down-arrow */
    border-color: red; // Style declaration to color the Dropdown -> right down-arrow
}


Hope this helps you!


Kind regards,

Benjith Sam

Hi Benjith,

You're amazing! thanks a lot :)

Have a good day!

Regards,

Julien

mvp_badge
MVP

You're welcome, Julien. Thank you for the words of appreciation :)

Glad to help you and wish you a great day too :)


Kind regards,

Benjith Sam

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.