1584
Views
7
Comments
Solved
how to customize the dropdown widget
Question

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

Rank: #922
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;


}

Rank: #922

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

Rank: #38

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

Rank: #39799

Hi everyone, regarding customizing the dropdown widget. Has anyone tried to create a reversed dropdown (rise-up menu)? I have some problems in customizing the CSS to reverse the dropdown widget.


Thanks in advance.

Best regards,


Jonathan