how to customize the dropdown widget

how to customize the dropdown widget

  

Hi guys,

      I was trying to customize the dropdown box by reducing its height and adjusting the width of dropdown list, But its not working.

this is how it should look, the height of the widget should be of 38px.

 

but when i try to make changes it ends up like this

the borders getting cut and cant able to adjust the width of dropdown list

the width of the dropdown list should be equal to the width of the dropdown widget.

Is there anyone could help me on this issue

Regards,

Hafizudin M

Hi Hafizudin M,


you must override the default css classes  which is used for drop down. Page level or inline you can override it.

Cheers,

Rocky

Rocky wrote:

Hi Hafizudin M,


you must override the default css classes  which is used for drop down. Page level or inline you can override it.

Cheers,

Rocky

Hi Rocky,

      I tried to override the css, but its not working, adjusting height can be done but adjusting the width of the dropdown list is not working. The thing is that i cant able to find the right css class to override it.

     Is there any suggestion that u can give on this.

Thanks,

Hafizudin M


Solution

Hafizudin M wrote:

Rocky wrote:

Hi Hafizudin M,


you must override the default css classes  which is used for drop down. Page level or inline you can override it.

Cheers,

Rocky

Hi Rocky,

      I tried to override the css, but its not working, adjusting height can be done but adjusting the width of the dropdown list is not working. The thing is that i cant able to find the right css class to override it.

     Is there any suggestion that u can give on this.

Thanks,

Hafizudin M



You can write your own class for that widget like this

.DropClass{

height: 30px!important;

width: 40%!important;


}

Solution

Rocky wrote:

Hafizudin M wrote:

Rocky wrote:

Hi Hafizudin M,


you must override the default css classes  which is used for drop down. Page level or inline you can override it.

Cheers,

Rocky

Hi Rocky,

      I tried to override the css, but its not working, adjusting height can be done but adjusting the width of the dropdown list is not working. The thing is that i cant able to find the right css class to override it.

     Is there any suggestion that u can give on this.

Thanks,

Hafizudin M



You can write your own class for that widget like this

.DropClass{

height: 30px!important;

width: 40%!important;


}


hey Rocky


I have tried this. Its not working

Can you tell me which platform you are using web or mobile?

For mobile Please use this code to reduce the height of dropdown.


SyntaxEditor Code Snippet

[data-dropdown] > div.dropdown-display {
    padding: 5px 10px;
    background-color: white;
    border: 1px solid rgb(151, 151, 151);
    color: rgb(0, 56, 53);
    font-weight: bold;
    border-radius: 5px !important;
}
[data-dropdown] > div.dropdown-display:after {
    border: 1.2px solid #455a64;
    border-right: 0 !important;
    border-top: 0 !important;
    width: 10px;
    height: 10px;
    bottom: 1px !important;
    -webkit-transform: rotate(-45deg) translateY(-15px);
    transform: rotate(-45deg) translateY(-15px);
}

Below is the output...


Regards,

pankaj