redocusaurus icon indicating copy to clipboard operation
redocusaurus copied to clipboard

Footer UI defects on Redoc sidebar

Open jrub opened this issue 2 years ago • 9 comments
trafficstars

Hi there, I built the Redoc component as the main page and the footer is showing some glitches as the Redocly watermark shows above it. I'm using the default themes. Any ideas or tips to improve it? Thx

image

jrub avatar Feb 28 '23 11:02 jrub

Can recreate this on the example website - https://redocusaurus.vercel.app/docs/nested/nested-1#tag/store_model image

rohit-gohri avatar Feb 28 '23 12:02 rohit-gohri

Also note that depending on the screen size, when using three colums they stack too soon

Screenshot_2023-02-28-14-15-05-818_com.duckduckgo.mobile.android.jpg

jrub avatar Feb 28 '23 13:02 jrub

Any ideas or tips to improve it?

I don't really have a fix for this. You might have to fix this with some custom css like the custom fixes already added here - https://github.com/rohit-gohri/redocusaurus/blob/main/packages/docusaurus-theme-redoc/src/theme/Redoc/styles.css

Would be happy to merge and release a PR.

Also note that depending on the screen size, when using three colums they stack too soon

That is just default docusaurus theme, nothing to do with redoc.

rohit-gohri avatar Feb 28 '23 13:02 rohit-gohri

If you are looking for a quick fix. Then you can add this css to your custom.css file.

.menu-content .scrollbar-container > ul + div {
    position: relative;
}

Innders avatar Mar 24 '23 15:03 Innders

Thanks @Innders , however I don't see any .menu-content or .scrollbar-container on my code? 🤔

jrub avatar Mar 27 '23 15:03 jrub

@jrub you need to add that whole code snippet above to the default custom.css file that's created when you initialised docusaurus.

image

Innders avatar Mar 27 '23 15:03 Innders

@Innders well I recreated the file as I removed it at some point, but it did not work. I had this when I initialised: https://github.com/jrub/redocusaurus_test/commit/ee18599ee163e3d0949861c170bce6fcf959d566#diff-44813f307e729042af7e70beff6f32ea63a7941bc100043a49e84d229ea2570f so I think it might be a different thing form what you're getting? (as again, those classes are not around). Thanks again!

jrub avatar Mar 27 '23 15:03 jrub

@jrub make sure you uncomment this line in your docusaurus.config.js file. Otherwise the CSS file won't be included in your build and none of those styles will be applied.

I just tried it in your repo and it worked for me :)

image

Innders avatar Mar 27 '23 16:03 Innders

yeah, I did, plus relaunching yarn start, just in case 😢

jrub avatar Mar 27 '23 16:03 jrub