Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Minor (cosmetic): CSS overflow/wrapping issue #3899

Closed
hlubovac opened this issue Nov 13, 2017 · 9 comments · Fixed by #4121
Closed

Minor (cosmetic): CSS overflow/wrapping issue #3899

hlubovac opened this issue Nov 13, 2017 · 9 comments · Fixed by #4121

Comments

@hlubovac
Copy link

image

I hope it's clear from the image. Commit dated: 11/11/2017. Horizontal scrollbar does show.

I don't know what's better to suggest: wrap (to avoid horizontal scrollbar, but then presentation might get ugly, being that model-names tend to be long and would word-break badly) or go-wide (with horizontal scrollbar).

Perhaps option #2 is easier, as it's already there (that table.parameters is what drives this); I was going to suggest to maybe remove the right border and right-gradient bg-color to white, but I can't quickly find where the gray border comes from (I was able to get rid of the "green" one and the corner-radius).

@webron
Copy link
Contributor

webron commented Nov 13, 2017

@hlubovac can you provide with an API definition that reproduces it?

@hlubovac
Copy link
Author

I was going to submit what you asked, but then I just discovered that this problem isn't about swagger-json content, but more about CSS related to viewport width.

"Enough" width:
image

Not enough width:
image

image

Here's the sample that you asked for anyway:
agent.json.txt

@webron
Copy link
Contributor

webron commented Nov 16, 2017

@hlubovac just tried loading it in the latest master, and can't really reproduce it (tested in both FF and Chrome).

@hlubovac
Copy link
Author

That's weird, because I copied master on 11/11, which is the latest, I think.

So, as you're decreasing the width of the window, what happens to these two boxes (green and blank, in the example above)?

@webron
Copy link
Contributor

webron commented Nov 17, 2017

They just get minimized and adjust to the width.

@hlubovac
Copy link
Author

If we're looking at the same source, table.parameters (present within each endpoint-block) will not allow wrapping beyond its width. Maybe you didn't expand an endpoint-block?

Collapsed, everything wraps fine:
image

Uncollapsed, it's not:
image

image

But, again, it's cosmetic.

@webron
Copy link
Contributor

webron commented Nov 17, 2017

I'm not really very worried about supporting that width.

@hlubovac
Copy link
Author

Below 1155px is when it starts overlapping content.
Although that 350 would be nice for my phone :) - but I understand: for the purpose of the content, it's not necessary.

Thanks.

@unrevised6419
Copy link

unrevised6419 commented Jan 16, 2018

I also encountered issue and found the problem. I'll make a PR.
This is because in index.html they provide is box-sizing: border-box; into an inline style, but in swagger-ui.css no.

@lock lock bot locked and limited conversation to collaborators Jul 2, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants