-
Notifications
You must be signed in to change notification settings - Fork 17
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
Horizontal scroll on small screen #31
Comments
Hi eatonmunoz, you can prevent the word-wrap by adding the following lines to your themes css file (styles.css) - it will override the default behaviour: Code .EnlighterJS{
width: auto !important;
overflow-x: scroll !important;
word-wrap: normal !important;
}
.EnlighterJS li{
white-space: pre !important;
} Media Query @media only screen
and (min-device-width: 320px)
and (max-device-width: 480px){
.EnlighterJS{
width: auto !important;
overflow-x: scroll !important;
word-wrap: normal !important;
}
.EnlighterJS li{
white-space: pre !important;
}
} best regards, Andi |
Great, actually that's what I want. I wonder if it could be horizontal-scrollable by default without modifying the css, or maybe there is another consideration? Anyway thank you for this nice and helpful plugin. Best regards, |
Dear Bjron, currently this is not easy to fix: it is caused by the different colors of the You can modify the CSS to set the line-number background color to the same value like the code background or maybe use a background image element. |
Nice Great, actually that's what I search. In future wordpress plugin its need a check box for aktiv scrollbar or not. |
Hi Andi, at first thanks for this great plugin. Found it yesterday and it seems to work very well. I added your shared snippet from above to my stylesheet. Unfortunately, the horizontal scroll does not work for me: example-link. Any idea how to fix it? Thank you and best regards, Bruno |
Hi Bruno, br, Andi |
It works in Safari and Firefox on a Mac. But not in Chrome and Opera. Here it is fixed with the behavior of overflow:hidden. |
your example works fine on chrome(win10). only the background issue is still present |
Hm, it should be very easy to fix the background. But it seems that the overflow-problem is Mac-related: example |
In my case I solved the @bjorntheart problem with this:
|
The background issue is not resolved... So for me the correct CSS seems to be (tested in Fedora 28 with Firefox 62 and the classic theme):
|
Just FYI i've added a dedicated option to EnlighterJS v3 which allows to choose between the overflow modes var options = {
language : 'javascript',
theme: 'enlighter',
indent : 2,
linenumbers: true,
linehover: true,
textOverflow: 'scroll'
}; |
Works for me 👍 |
The fix from @nikolauskrismer works. But only on post page... not in the post overview page: Example |
@AndiDittrich this option is not yet implemented in version 3.10.0, right? It would be nice to have it because line wrapping looks very bad for certain code samples. |
it has been added to EnlighterJS v3 - but this version cannot be added to the current WordPress plugin - the next major release (Enlighter v4) will include this option... in the meantime you can use the experimental integration and override the settings manually (see experiments repo) |
I tested it on v4 Beta 1 Wordpress Plugin. As before its only the problem in Blog, not in article. |
the issue seems to be related to your theme...please check the layout testing env flexbox issue within your theme |
Thank you that you looked on an issue on my side (& site 🦄). I am not that CSS-Guy, but I think it should be fixed with custom CSS: .enlighter-overflow-scroll.enlighter-v-standard {
display: grid !important;
} |
... but don't work in Safari 🤦♂ |
take a look onto the css rules i've disabled in the post above. your css fix looks weak... |
This works in Safari & Chrome 🤦♂ 👍 .fusion-blog-layout-medium .fusion-post-medium, .fusion-blog-layout-medium .fusion-post-medium-alternate, .fusion-blog-layout-medium-alternate .fusion-post-medium, .fusion-blog-layout-medium-alternate .fusion-post-medium-alternate {
display: block !important;
}
.enlighter-overflow-scroll.enlighter-v-standard {
display: grid !important;
} |
|
Chrome need this property, don't know why 🤣 |
I use the theme "Twenty Sixteen" and use the Enlighter Plugin Version 3.10.0 enable for the "Gutenberg Editor". I can´t find a textOverflow Option in the settings or if i edit an article. Is it my mistake, a template or gutenberg issue or a bug? |
you need Enlighter v4-beta1 |
Hi! Is horizontal scrolling already a feature in current release version of Enlighter WordPress? I can't find the setting to enable it. |
of course. |
Text overflow (scroll bar) option is not working fine anymore: https://www.swtestacademy.com/datepicker-using-selenium/ I have tested it 14 inch MacBook pro on chrome. |
@swtestacademy your codeblocks doesn't have the attribute |
I disabled the scroll bar maybe because of that you could not see the enlighter-overflow-scroll attribute. I also removed all customizations and still I am facing an issue. I will debug more and if I find anything, I will post here. |
I will leave the scroll bar option enabled like below: class="enlighter-default enlighter-v-standard enlighter-t-wpcustom enlighter-overflow-scroll " if you have a chance, would you re-check again? |
It is about the "Dynamic Resource Invocation (DRI)" option. When I disable it, the scroll bar comes, but the colors and theme have gone this time, and the code blocks turn to full grey mode. I am trying to understand why this is happening, but I found a point to narrow down the problem area. |
@AndiDittrich, I have finally solved the issue. Solution steps:
After these changes, the scroll bar appeared. |
How about horizontal scroll on small screen like mobile browser for long code instead of line wrapping? Is there a way to enable it or not supported yet? I think I need this feature. Thank you.
The text was updated successfully, but these errors were encountered: