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

Hello, i am having this exact issue for a reactive web app i'm building - I still can't work out how to move the arrow up! @Benjith Sam can you please help? I understand it is here:

.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
}

however, instead of border-color, what would i put there so that the arrow is not at the bottom and instead is align with the text?


mvp_badge
MVP

Hi Howie,

For the mentioned case, could you try setting the top value in the CSS definition?

CSS Snippet:

.dropdown-container:after {
    border-color: red;
    top: 15px;
}


Note: Instead of customizing the widget actual style class, I would suggest you to chain a custom class and define the custom style rule as shown below.

CSS Snippet:

.cust__dropdown .dropdown-container:after {
    border-color: red;
    top: 15px;
}

Demo screen: RWA | DropdownArrowStyling


I hope this helps you!


Kind regards,

Benjith Sam

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