How to add custom css in swagger-ui using .Net

Question

Hi I'm using swagger ui in my web api project. It's very good but i am facing some ui issue in page.

this is the snapshot

How can I fix this issue by adding custom css. if i have to add custom css then where i have to add. in project file or in swagger ui project then i have to import. I am also using swashbuckle to show respone message.

Please suggest me.

Related: [Modifications to Swagger UI header](https://stackoverflow.com/q/36291146/113116), [Swagger (Swashbuckle) hide header](https://stackoverflow.com/q/31636969/113116), [How to replace Swagger UI header logo in Swashbuckle](https://stackoverflow.com/q/38713764/113116), [Replace Swashbuckle UI completely](https://stackoverflow.com/q/31647635/113116), [Swagger UI themes](https://stackoverflow.com/q/28033075/113116) — Helen, Jan 08 '18 at 13:24
Does this answer your question? [Modifications to Swagger UI header](https://stackoverflow.com/questions/36291146/modifications-to-swagger-ui-header) — Liam, Feb 20 '20 at 13:25

score 1 · Answer 1 · answered Jan 09 '18 at 09:54

1

In swashbuckle there is an option: InjectStylesheet that should do exactly what you need.
That is located in the SwaggerConfig.cs and is relatively simple to integrate.

See my example here: https://github.com/heldersepu/SwashbuckleTest/blob/master/Swagger_Test/App_Start/SwaggerConfig.cs#L238

answered Jan 09 '18 at 09:54

Helder Sepulveda

15,500
4
29
56

I have injected my css and i am overwriting this class. .swagger-section .swagger-ui-wrap .model-signature pre or code{ font-size: .85em; line-height: 1.2em; overflow: auto; max-height: 200px; cursor: pointer; } but it's not working on very big json file. – Jitendra singh Jan 09 '18 at 11:36
@Jitendrasingh Can you be more specific? Can you see the CSS you injected? – Helder Sepulveda Jan 09 '18 at 11:55
@Jitendrasingh Maybe you can create a minimal project on GitHub showing your issue? – Helder Sepulveda Jan 09 '18 at 11:59
in normal project i am not getting this issue, could you please suggest how can we fix by writing custom css in that fiel. – Jitendra singh Jan 10 '18 at 10:28
Your question is about: How to add custom css in swagger-ui using .Net... is that part working now? – Helder Sepulveda Jan 10 '18 at 12:23
this is the project url i have created today. https://github.com/jitsingh89/JIT.Swagger.git – Jitendra singh Jan 10 '18 at 17:41
@Jitendrasingh If that is working fine then question has been answered. you have now a different problem. – Helder Sepulveda Jan 11 '18 at 18:00
In Your sample project you have not enabled the `InjectStylesheet` option – Helder Sepulveda Jan 11 '18 at 18:28
@Jitendrasingh I sent you a Pull Request on GitHub, your project had MANY many issues! – Helder Sepulveda Jan 12 '18 at 08:47
Thanks HelderSepu – Jitendra singh Jan 23 '18 at 11:37

How to add custom css in swagger-ui using .Net

1 Answers1