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

Markdown tables expand beyond window with no scrollbar #834

Closed
sahilTakiar opened this issue Feb 22, 2016 · 4 comments
Closed

Markdown tables expand beyond window with no scrollbar #834

sahilTakiar opened this issue Feb 22, 2016 · 4 comments
Labels
Bug
Milestone

Comments

@sahilTakiar
Copy link

@sahilTakiar sahilTakiar commented Feb 22, 2016

I created the following test table in a .md file:

|Test1|Test2|
|-------------|-------------|
|Hello|`really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really long code`|

And when loaded via a ReadTheDocs theme the resulting table looks like this:

screen shot 2016-02-21 at 6 39 10 pm

The contents of a row that expand beyond the current window are not viewable. There is also no way to scroll horizontally on the table to view the contents at the end of the row. I am assuming this is happening because the text with the <code> tag is not splittable.

  • My mkdocs.yml file contains:
theme: readthedocs

pages:
    - Home: index.md

markdown_extensions:
  - toc:
      permalink: True
  - tables
  • Viewing the docs using Chrome.

Any ideas how to get around this?

@d0ugal d0ugal added the Bug label Feb 22, 2016
@d0ugal
Copy link
Member

@d0ugal d0ugal commented Feb 22, 2016

You could add some custom CSS, I'm not sure what off the top of my head, but otherwise I am no aware of a workaround.

@waylan
Copy link
Member

@waylan waylan commented Feb 22, 2016

This is a common problem with any code block on any web site. Unless you account for it in your CSS, code blocks with long lines will run off the right of the screen. The typical solution is to define a rule that a scroll bar is used if the width of the block exceeds some value, but not if it is less. Just like GitHub has in the first comment here.

However, the weird thing here is that this is inline code, which would normally wrap like this: really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really long code. I expect the difference is that it is in a table cell. Not sure what needs to happen.

@sahilTakiar
Copy link
Author

@sahilTakiar sahilTakiar commented Feb 23, 2016

Thanks for the comments. I'll try to see if some custom CSS will fix this. Ideally, an horizontal scroll bar would be automatically created so that the code is viewable. Basically, replicating what GitHub does for rendering long code in a table (see https://github.com/linkedin/gobblin/wiki/Gobblin-on-Yarn#configuration)

@d0ugal d0ugal modified the milestone: 0.16 Apr 27, 2016
waylan added a commit to waylan/mkdocs that referenced this issue Aug 16, 2016
The code span wrapping  eliminates the need to account for the long table as
reported, but other things might cause a table to be wider than the page,
so we still address it.

Fixes mkdocs#834.
@waylan
Copy link
Member

@waylan waylan commented Aug 17, 2016

@sahilTakiar do the changes in #1027 resolve this for you?

styfle added a commit to styfle/mkdocs that referenced this issue Aug 24, 2016
This fixes Issue mkdocs#834 and is alternative to PR mkdocs#1027.
@waylan waylan closed this in 3796099 Aug 26, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants
You can’t perform that action at this time.