search

freddyaboulton / gradio-range-slider

Apache License 2.0
5 stars 1 forks source link

Gradio styling not respected #1

Closed henryruhs closed 5 months ago

henryruhs commented 5 months ago

Please respect the Gradio styles and reuse their classes.

Screenshot from 2024-05-30 14-29-25

After our modifications at FF it looks worse, I only modify on a input=["range"] level:

Screenshot from 2024-05-30 14-29-32

freddyaboulton commented 5 months ago

Are you using custom css? If so, can you share?

henryruhs commented 5 months ago

The first screen is without custom css, even there you can see that Gradio has different styles.

https://github.com/facefusion/facefusion/blob/feat/range-slider/facefusion/uis/assets/overrides.css#L14

That is also the branch that integrates your range slider. I did not spend time adjusting your styles. It's better to solve it on your side.

freddyaboulton commented 5 months ago

Ok it's actually a bug on gradio imo. I do not use firefox but I thought gradio's slider looked the same across browsers. So I added some css to make the range slider consistent across chrome and firefox. But looks like gradio does not apply consistent styles across browsers for the slider.

So I removed my css so that it mirrors the core slider's behavior. Released in version 0.0.4

henryruhs commented 5 months ago

error remains... the approach of replicating / mirroring is not suitable. I fixed Gradio already, now I have to double-fix it!?

image

freddyaboulton commented 5 months ago

I took a look and it is likely caused by the custom css in your app. I removed it and the range slider renders correctly.

image

If these overrides must be applied, consider using elem_classes in the sliders already present so that your css only apply to those sliders. Style conflicts are expected if they are applied broadly like this.