-
Notifications
You must be signed in to change notification settings - Fork 1.7k
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
Wide table handling is not flexible, how to override the CSS? #117
Comments
Until @snide can address the underlying concern, here is a workaround to easilly add custom CSS that should work just fine on the RTD site: One simple approach to adding custom CSS is not to create a whole new theme, but simple drop a css file in
(Credit: http://stackoverflow.com/a/9738992/179917 ) |
I found a solution that works without making a /* override table width restrictions */
.wy-table-responsive table td, .wy-table-responsive table th {
white-space: normal;
}
.wy-table-responsive {
margin-bottom: 24px;
max-width: 100%;
overflow: visible;
} and then in html_static_path = ['_static']
html_context = {
'css_files': [
'_static/theme_overrides.css', # overrides for wide tables in RTD theme
],
} |
The workaround that @smartass101 came up with is a good one. We should probably document this :) |
@ericholscher: Actually, you might want to document something slightly different. @smartass101: While setting Here is yet another alternative, which works just fine. It registers the extra files for inclusion in the same way as a sphinx extension would. Simply add this function to def setup(app):
app.add_javascript("custom.js")
app.add_stylesheet("custom.css") Note the absence of the |
I was afraid something like that would bite me back eventually. Thank you @KevinCathcart for this cleaner solution that is also documented in Sphinx docs. |
Dunno how you guys want to me to handle this. If someone wants to update the readme or something with proper docs I'll merge it in. I'm just a design hack :) |
Unfortunately the fix by @KevinCathcart works only locally because on RTD the commond hosted CSS theme files get added after that the one specified by <link type="text/css" href="_static/theme_overrides.css" rel="stylesheet"></link>
<link type="text/css" href="https://media.readthedocs.org/css/sphinx_rtd_theme.css" rel="stylesheet"></link>
<link type="text/css" href="https://media.readthedocs.org/css/readthedocs-doc-embed.css" rel="stylesheet"></link> |
For the time being I solved this by declaring the overrides as /* override table width restrictions */
.wy-table-responsive table td, .wy-table-responsive table th {
/* !important prevents the common CSS stylesheets from
overriding this as on RTD they are loaded after this stylesheet */
white-space: normal !important;
}
.wy-table-responsive {
overflow: visible !important;
} |
Hmm. Yea, the calls to add_javascript get called before our own calls, so On Mon, Apr 28, 2014 at 1:03 PM, Ondrej Grover notifications@github.comwrote:
|
Thanks @smartass101 for providing a workaround! Why not have relevant CSS fixed by default? Are there cases when it is desirable to truncate the information in table, be it a tablet screen or a computer screen? On tablets existing tables are even worse because horizontal scroll of individual elements is hard on touch interfaces. On macs there is no indication that table can be horizontally scrolled because scrollbars are hidden by default; they don't appear even on hover, you need to actually start scrolling to see the scrollbars. |
@KevinCathcart's solution works just fine for me, see my conf.py The order of the included files is avtually not that important, as long as the specificity of the CSS statement is higher: Thanks! |
@smartass101, your solution worked for my project. Thanks! |
This makes things far easier to read. Workaround stolen from: readthedocs/sphinx_rtd_theme#117
RTD didn't seem to load it. Found this method at readthedocs/sphinx_rtd_theme#117
RTD please put your shit together: readthedocs/sphinx_rtd_theme#117
If I could make on addendum to this solution: /* override table width restrictions */
@media screen and (min-width: 767px) {
.wy-table-responsive table td {
/* !important prevents the common CSS stylesheets from
overriding this as on RTD they are loaded after this stylesheet */
white-space: normal !important;
}
.wy-table-responsive {
overflow: visible !important;
}
} This will enable scrolling for devices where it makes sense (phones and small tablets) and disable it for others. I've also stripped the exception for |
We have to over-ride part of the stylesheet that breaks multi-line table content. See: readthedocs/sphinx_rtd_theme#259 readthedocs/sphinx_rtd_theme#117 readthedocs/sphinx_rtd_theme#276
Sphinx now returns a warning when using |
See readthedocs/sphinx_rtd_theme#117 for a bigger discussion and many references.
Solution taken from here: readthedocs/sphinx_rtd_theme#117 The LRM doesn't contain tables AFAICS so I didn't apply this patch. Change-Id: Ib6428f605613199b647dd04a297512c865cf7b12
Fix linewrapping by css readthedocs/sphinx_rtd_theme#117 (comment)
See readthedocs/sphinx_rtd_theme#117 for a bigger discussion and many references.
Since Sphinx 1.8, the correct way to specify custom css files in html_css_files = [
'custom.css'
'https://example.com/css/custom.css',
('print.css', {'media': 'print'})
] |
See readthedocs/sphinx_rtd_theme#117 for a bigger discussion and many references.
I understand that wide tables need special handling in responsive designs.
However, on a computer screen a table like this http://docs.getpelican.com/en/latest/settings.html#basic-settings is very inconvenient to read.
Any ideas how to address this inconvenience?
I tried to override the CSS style for the table as described in getpelican/pelican#1311 (specifically commit smartass101/pelican@e1ee4c9), but that works only locally. It would work well if I could get something like
sphinx_rtd_theme.get_html_theme_path()
on RTD, but I wasn't able to find the out what the theme path is on RTD.If CSS overriding is not possible, would it be possible to add some theme setting that would disable the current wide table handling?
The text was updated successfully, but these errors were encountered: