Swagger-ui: How to cope with bootstrap4 as surrounding framework for integration?

[jdillon]

How do allow embedding Swagger-UI, default theme (which I think is just fine) into a webapp which uses bootstrap4? Looks like classes conflict and the end result is that the Swagger-UI renders very very strangely. Its mostly okay but things like its endpoint detail layouts is totally messed up.

I'm really happy with the default theme for my use-case, but the webapp its inside of is bootstrap4 and its appears that things like "col" conflict and end up having the swagger display rendering very strangely.

Is there a simple solution to this?

[jdillon]

FTR it mostly just works, and I really appreciate that, and I really hope I don't have to become an expert in react to fix this. If someone could point me in the right direction or some simple hack I'd really appreciate it.
:-)

[shockey]

Hmm, this is kinda tricky...

I wish you could do something like:

:not(.swagger-ui) * {
  /* bootstrap */
}

but alas, :not() doesn't support combinators.

This isn't so much a React thing as it is just a limitation of CSS - Bootstrap assumes it will be a first-class citizen on the page, and we just happen to use class names that collide.

This kind of thing is solved by Shadow DOM encapsulation, but that's still a ways off... so I don't think there's really a way for you to solve this on your end, besides manually identifying what's colliding and handwriting overriding CSS that straightens the UI out.

From the project's side, we can do two things:

• solve this specifically by identifying the overlapping class names, and changing them
• solve this generally by adding a build step that prefixes _all_ of our css classes with something like swui- (this PostCSS plugin would do this automagically for us)

[shockey]

CC: https://github.com/swagger-api/swagger-ui/issues/4460

[jdillon]

thanks for the reply. Seems like a solution to prefix is probably gonna be the simplest and best bang-for-buck to avoid potential CSS class-name collisions with whatever framework might be used when embedding swagger-ui. You could do the other and identify overlapping class-names but thats gonna be very specific to bootstrap or whatever; so you might fix it for bootstrap but maybe some other framework would still have some problems. So using a prefix seems the most sane generally, though i'm no expert :-P CSS often causes my head to explode actually :-P

[rishacha]

Hi @shockey , postcss-class-prefix is no longer maintained. This seems like a better option. Although I need to figure out where I can add it ( perhaps in the webpack-*.config.js ). Can I open a PR?

P.S. : Also, I see a file called postcss.config.js. Is this fix already in place?

[shockey]

@rishacha, yeah, you should add the postcss-prefixer plugin to our postcss config file 😄 we do already have postcss, but it's only being used for autoprefixer.

be sure to ignore .swagger-ui if you open a PR for this! thanks!

[milushov]

@shockey @rishacha @jdillon
Hello, guys, any news? I have the same problem 😢

[ndbabb]

I don't have a full accounting of CSS issues with bootstrap, but I was able to fix the main one by overriding the .col class on my SwaggerUI page like so:

.col { 
  width: auto;
}

[DeeDeeG]

I'm having a similar problem using bootstrap and swagger-ui together.

@shockey, would it be of use to the project if someone went into the .scss source files of this repo, and prefixed all the styles manually? (It might break a lot of existing pull requests, or throw off downstream forks, I guess.)

I'd do that if it would be helpful.

[shockey]

@DeeDeeG, I'd prefer to systematically prefix things - doing it manually requires everyone who could possibly decide to contribute to know about the prefix, which worries me.

I'll say again - I'd also accept a PR that simply changes our col class to use a different name. That doesn't solve all the possible problems here, but if that's everyone's pain point today it's a good place to start.

[thierrydallacroce]

Feedback on my PR appreciated.