How to customize dropdown widget icon and its color code

Hi Team,

can anyone help me out to customize dropdown widget icon(which is displayed on the right side) and its color code ?

I have saw this , but no use.


Hi,

    Try to change the css of dropdown widget(stylesheet editor in basetheme).

SyntaxEditor Code Snippet

[data-dropdown] {
    color: #4d4d4d;
}

[data-dropdown] > div.dropdown-display {
    background-color:  #fff;
    border: none;
    padding: 14px 10px;
}

[data-dropdown] > div.dropdown-display,
[data-dropdown] > div.dropdown-list {
    border-radius: 2px;
}

[data-dropdown] > div.dropdown-display:after {
    border: 1px solid #455a64;
    border-right: 0 !important;
    border-top: 0 !important;
    width: 5px;
    height: 5px;
    bottom: 13px;
    -webkit-transform: rotate(-45deg) translateY(-15px);
            transform: rotate(-45deg) translateY(-15px);
}

[data-dropdown] > div.dropdown-display.dropdown-disabled:after {
    color: #d3d3d3; 
    border-color: #d3d3d3; 
}

[data-dropdown] > div.dropdown-list {
    box-shadow: none;
    border: none;
    border-radius: 0;
    position: fixed;
}


Vitheya S wrote:

Hi,

    Try to change the css of dropdown widget(stylesheet editor in basetheme).

SyntaxEditor Code Snippet

[data-dropdown] {
    color: #4d4d4d;
}

[data-dropdown] > div.dropdown-display {
    background-color:  #fff;
    border: none;
    padding: 14px 10px;
}

[data-dropdown] > div.dropdown-display,
[data-dropdown] > div.dropdown-list {
    border-radius: 2px;
}

[data-dropdown] > div.dropdown-display:after {
    border: 1px solid #455a64;
    border-right: 0 !important;
    border-top: 0 !important;
    width: 5px;
    height: 5px;
    bottom: 13px;
    -webkit-transform: rotate(-45deg) translateY(-15px);
            transform: rotate(-45deg) translateY(-15px);
}

[data-dropdown] > div.dropdown-display.dropdown-disabled:after {
    color: #d3d3d3; 
    border-color: #d3d3d3; 
}

[data-dropdown] > div.dropdown-list {
    box-shadow: none;
    border: none;
    border-radius: 0;
    position: fixed;
}

Thanks Vitheya

[data-dropdown] > div.dropdown-display:after {
    border: 1px solid #455a64; //This one did the trick to change the color of the icon

}

May i know, how to change the icon of the dropdown which exist pre-defined?



Rajesh Nadar wrote:

Hi Team,

can anyone help me out to customize dropdown widget icon(which is displayed on the right side) and its color code ?

I have saw this , but no use.


Hi Rajesh,


If you want to customize widgets, you can always clone the eSpace where they are and change their properties there.

In that way, always that you want to tweak them or reuse them you just need to add that dependency.

An example:

 

Hope this can help you.


Best regards,

Ricardo

Rajesh Nadar wrote:

Vitheya S wrote:

Hi,

    Try to change the css of dropdown widget(stylesheet editor in basetheme).

SyntaxEditor Code Snippet

[data-dropdown] {
    color: #4d4d4d;
}

[data-dropdown] > div.dropdown-display {
    background-color:  #fff;
    border: none;
    padding: 14px 10px;
}

[data-dropdown] > div.dropdown-display,
[data-dropdown] > div.dropdown-list {
    border-radius: 2px;
}

[data-dropdown] > div.dropdown-display:after {
    border: 1px solid #455a64;
    border-right: 0 !important;
    border-top: 0 !important;
    width: 5px;
    height: 5px;
    bottom: 13px;
    -webkit-transform: rotate(-45deg) translateY(-15px);
            transform: rotate(-45deg) translateY(-15px);
}

[data-dropdown] > div.dropdown-display.dropdown-disabled:after {
    color: #d3d3d3; 
    border-color: #d3d3d3; 
}

[data-dropdown] > div.dropdown-list {
    box-shadow: none;
    border: none;
    border-radius: 0;
    position: fixed;
}

Thanks Vitheya

[data-dropdown] > div.dropdown-display:after {
    border: 1px solid #455a64; //This one did the trick to change the color of the icon

}

May i know, how to change the icon of the dropdown which exist pre-defined?



Hi ,

 you cant directly change that icon. In outsystem  uiweb you can change and publish that.

As Ricardo said with the help of dependency use that customized dropdown widget.


Ricardo Pereira wrote:

Rajesh Nadar wrote:

Hi Team,

can anyone help me out to customize dropdown widget icon(which is displayed on the right side) and its color code ?

I have saw this , but no use.


Hi Rajesh,


If you want to customize widgets, you can always clone the eSpace where they are and change their properties there.

In that way, always that you want to tweak them or reuse them you just need to add that dependency.

An example:

 

Hope this can help you.


Best regards,

Ricardo

Hi Ricardo Pereira,

Thanks for the reply , is this apply for mobile app as well? if yes, may i know how to clone the eSpace? and do that trick . Because there is unclear documentation for cloning eSpace . Your support will be appreciated.


Thanks & regards,

Rajesh Nadar


Vitheya S wrote:

Rajesh Nadar wrote:

Vitheya S wrote:

Hi,

    Try to change the css of dropdown widget(stylesheet editor in basetheme).

SyntaxEditor Code Snippet

[data-dropdown] {
    color: #4d4d4d;
}

[data-dropdown] > div.dropdown-display {
    background-color:  #fff;
    border: none;
    padding: 14px 10px;
}

[data-dropdown] > div.dropdown-display,
[data-dropdown] > div.dropdown-list {
    border-radius: 2px;
}

[data-dropdown] > div.dropdown-display:after {
    border: 1px solid #455a64;
    border-right: 0 !important;
    border-top: 0 !important;
    width: 5px;
    height: 5px;
    bottom: 13px;
    -webkit-transform: rotate(-45deg) translateY(-15px);
            transform: rotate(-45deg) translateY(-15px);
}

[data-dropdown] > div.dropdown-display.dropdown-disabled:after {
    color: #d3d3d3; 
    border-color: #d3d3d3; 
}

[data-dropdown] > div.dropdown-list {
    box-shadow: none;
    border: none;
    border-radius: 0;
    position: fixed;
}

Thanks Vitheya

[data-dropdown] > div.dropdown-display:after {
    border: 1px solid #455a64; //This one did the trick to change the color of the icon

}

May i know, how to change the icon of the dropdown which exist pre-defined?



Hi ,

 you cant directly change that icon. In outsystem  uiweb you can change and publish that.

As Ricardo said with the help of dependency use that customized dropdown widget

Hi Vitheya S,

May i know, which dependency is used to customize the dropdown widget ?

If you knew it, please share the link. Your support will be appreciated . 


Thanks & Regards,

Rajesh Nadar


Ricardo Pereira wrote:

Rajesh Nadar wrote:

Hi Team,

can anyone help me out to customize dropdown widget icon(which is displayed on the right side) and its color code ?

I have saw this , but no use.


Hi Rajesh,


If you want to customize widgets, you can always clone the eSpace where they are and change their properties there.

In that way, always that you want to tweak them or reuse them you just need to add that dependency.

An example:

 

Hope this can help you.


Best regards,

Ricardo

Hi Ricardo,

 Actually i clone the espace (outsystemsuiweb) and changed that icon published that modules.Through dependency i used in my screen.But the output like this....


Rajesh Nadar wrote:

Vitheya S wrote:

Rajesh Nadar wrote:

Vitheya S wrote:

Hi,

    Try to change the css of dropdown widget(stylesheet editor in basetheme).

SyntaxEditor Code Snippet

[data-dropdown] {
    color: #4d4d4d;
}

[data-dropdown] > div.dropdown-display {
    background-color:  #fff;
    border: none;
    padding: 14px 10px;
}

[data-dropdown] > div.dropdown-display,
[data-dropdown] > div.dropdown-list {
    border-radius: 2px;
}

[data-dropdown] > div.dropdown-display:after {
    border: 1px solid #455a64;
    border-right: 0 !important;
    border-top: 0 !important;
    width: 5px;
    height: 5px;
    bottom: 13px;
    -webkit-transform: rotate(-45deg) translateY(-15px);
            transform: rotate(-45deg) translateY(-15px);
}

[data-dropdown] > div.dropdown-display.dropdown-disabled:after {
    color: #d3d3d3; 
    border-color: #d3d3d3; 
}

[data-dropdown] > div.dropdown-list {
    box-shadow: none;
    border: none;
    border-radius: 0;
    position: fixed;
}

Thanks Vitheya

[data-dropdown] > div.dropdown-display:after {
    border: 1px solid #455a64; //This one did the trick to change the color of the icon

}

May i know, how to change the icon of the dropdown which exist pre-defined?



Hi ,

 you cant directly change that icon. In outsystem  uiweb you can change and publish that.

As Ricardo said with the help of dependency use that customized dropdown widget

Hi Vitheya S,

May i know, which dependency is used to customize the dropdown widget ?

If you knew it, please share the link. Your support will be appreciated . 


Thanks & Regards,

Rajesh Nadar


Hi Rajesh,

I am also facing this problem. I am working on that once i got solution. let u know about that.


Vitheya S wrote:

Rajesh Nadar wrote:

Vitheya S wrote:

Rajesh Nadar wrote:

Vitheya S wrote:

Hi,

    Try to change the css of dropdown widget(stylesheet editor in basetheme).

SyntaxEditor Code Snippet

[data-dropdown] {
    color: #4d4d4d;
}

[data-dropdown] > div.dropdown-display {
    background-color:  #fff;
    border: none;
    padding: 14px 10px;
}

[data-dropdown] > div.dropdown-display,
[data-dropdown] > div.dropdown-list {
    border-radius: 2px;
}

[data-dropdown] > div.dropdown-display:after {
    border: 1px solid #455a64;
    border-right: 0 !important;
    border-top: 0 !important;
    width: 5px;
    height: 5px;
    bottom: 13px;
    -webkit-transform: rotate(-45deg) translateY(-15px);
            transform: rotate(-45deg) translateY(-15px);
}

[data-dropdown] > div.dropdown-display.dropdown-disabled:after {
    color: #d3d3d3; 
    border-color: #d3d3d3; 
}

[data-dropdown] > div.dropdown-list {
    box-shadow: none;
    border: none;
    border-radius: 0;
    position: fixed;
}

Thanks Vitheya

[data-dropdown] > div.dropdown-display:after {
    border: 1px solid #455a64; //This one did the trick to change the color of the icon

}

May i know, how to change the icon of the dropdown which exist pre-defined?



Hi ,

 you cant directly change that icon. In outsystem  uiweb you can change and publish that.

As Ricardo said with the help of dependency use that customized dropdown widget

Hi Vitheya S,

May i know, which dependency is used to customize the dropdown widget ?

If you knew it, please share the link. Your support will be appreciated . 


Thanks & Regards,

Rajesh Nadar


Hi Rajesh,

I am also facing this problem. I am working on that once i got solution. let u know about that.


Hi Vitheya S,

Thanks for your support. Will be waiting for your reply..


Regards,

Rajesh Nadar


Hi rajesh,

  you can make a customized dropdown by cloning outsystemsuiweb, but If you try this method for dropdown, your application will slow down. So, you can achieve this by  adding background image for the dropdown.



Rajesh Nadar wrote:

Ricardo Pereira wrote:

Rajesh Nadar wrote:

Hi Team,

can anyone help me out to customize dropdown widget icon(which is displayed on the right side) and its color code ?

I have saw this , but no use.


Hi Rajesh,


If you want to customize widgets, you can always clone the eSpace where they are and change their properties there.

In that way, always that you want to tweak them or reuse them you just need to add that dependency.

An example:

 

Hope this can help you.


Best regards,

Ricardo

Hi Ricardo Pereira,

Thanks for the reply , is this apply for mobile app as well? if yes, may i know how to clone the eSpace? and do that trick . Because there is unclear documentation for cloning eSpace . Your support will be appreciated.


Thanks & regards,

Rajesh Nadar


Yes, in mobile you can clone an eSpace too. I don't know it's is final result :D

To clone an eSpace, right click the widget you want to change in the Interface Tab and select "Open in ### eSpace". He automatically opens a clone.


Hope this can help.


Regards,

Ricardo