Dash daq ColorPicker - weird half round border

Dash Python
1

When I run the example from the dash-docs for the ColorPicker it looks like this:

How do I get rid of that strange looking half round border?

image

In the dash-docs it looks like this:

image

I tried both Chrome and Firefox. I also ran it without a stylsheet, and also using a Bootstrap stylesheet. They all look the same.

Using inspect element, I can remove the round border by un-checking the line with the border-radius , but I don’t know how to add this correctly to the css in the assets folder. Adding it as-is doesn’t work.

Any ideas?

.caSNYE > div {
    box-shadow: none !important;
    background-color: #fff;
 /*   border-radius: 100% !important;    disabling this removes the half round border */
    border: 1px solid #D3D3D3 !important;
}
1 Like
2

Hello AnnMarie,

Did you resolve the problem?? I have the same issue.

Thank you,
Isa

3

Hi @isaamarod

Well, I solved the issue by using the dbc.Input. You can see it in my Dash Bootstrap Theme Explorer app here: https://hellodash.pythonanywhere.com/

        dbc.Input(
             type="color",
             id="bg_color",
             value="#e2e2e4",
             style={"width": 75, "height": 50},
         )

Before I switched, I did get something sort-of working with dash daq ColorPicker. If you don’t want to use the dbc.Input, let me know and I’ll see if I can did that up.

1 Like
4

Hi @AnnMarieW

I found the solution! Please, see here Daq Color-picker style border-radius - #2 by isaamarod

Thank you!

1 Like
5

Great solution - thanks!