how to customize the dropdown widget

Hafizudin M

Solved

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

07 Jun 2018

JeffT

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;

}

See solution in context

07 Jun 2018

JeffT

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

07 Jun 2018

4 replies

Last reply 21 Feb 2019

Show thread

Hide thread

Hafizudin M

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,

Is there any suggestion that u can give on this.

Thanks,

Hafizudin M

07 Jun 2018

JeffT

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,

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;

}

07 Jun 2018

shanthi kallareddy

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,

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

10 Dec 2018

trinusha karumanchi

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,

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;

}

Hi Rocky,

I am facing a similar kind of issue which is I want to adjust the height of the drop-down list. I tried in different ways but it is not working. Can you suggest me a way.

21 Feb 2019

Pankaj pant

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

10 Dec 2018

Jonathan Djuwandi

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

11 Sep 2020

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

See the full guidelines