Horizontal scroll on small screen

[muhammadkholidb]

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.

[AndiDittrich]

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;
}

Result

Media Query Additionally, you can wrap the code into a css media query to enable scrolling only on small devices:

@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

[muhammadkholidb]

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, Eaton Munoz.

[bjorntheart]

Hey Andi.

I tried the CSS you provided in the example, but when I scroll horizontally there is an issue with the background color

[AndiDittrich]

Dear Bjron,

currently this is not easy to fix: it is caused by the different colors of the ul as well as li containers (to get a different line-number-bar background-color).

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.

[ghost]

Nice Great, actually that's what I search. In future wordpress plugin its need a check box for aktiv scrollbar or not.

[indikatordesign]

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

[AndiDittrich]

Hi Bruno, it seems to work fine ?! whats your issue ?

br, Andi

[indikatordesign]

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.

[AndiDittrich]

your example works fine on chrome(win10). only the background issue is still present

[indikatordesign]

Hm, it should be very easy to fix the background.

But it seems that the overflow-problem is Mac-related: example

[JavierSegoviaCordoba]

In my case I solved the @bjorntheart problem with this:

.EnlighterJS {
         width: auto !important;
         overflow-x: auto !important;
         word-wrap: normal !important;
}

ul.EnlighterJS{
     display: grid;
}

.EnlighterJS li{
        white-space: pre !important;
    display: table-caption;
}

[nikolauskrismer]

The background issue is not resolved... ... when using line numbers "ol.EnlighterJS" needs to be added and "display: table-caption" seems to hide line numbers in that case.

So for me the correct CSS seems to be (tested in Fedora 28 with Firefox 62 and the classic theme):

.EnlighterJS {
    width: auto;
    overflow-x: auto;
    word-wrap: normal;
}

ol.EnlighterJS,
ul.EnlighterJS {
    display: grid;
}

.EnlighterJS li {
    white-space: pre;
}

[AndiDittrich]

Just FYI

i've added a dedicated option to EnlighterJS v3 which allows to choose between the overflow modes scroll and wrap. it will be available in Enlighter v4 soon (the css solution is not backward compatble!)

var options = {
        language : 'javascript',
        theme: 'enlighter',
        indent : 2,
        linenumbers: true,
        linehover: true,
        textOverflow: 'scroll'
};

[SKozak]

The background issue is not resolved... ... when using line numbers "ol.EnlighterJS" needs to be added and "display: table-caption" seems to hide line numbers in that case.

So for me the correct CSS seems to be (tested in Fedora 28 with Firefox 62 and the classic theme):

.EnlighterJS {
  width: auto;
  overflow-x: auto;
  word-wrap: normal;
}

ol.EnlighterJS,
ul.EnlighterJS {
  display: grid;
}

.EnlighterJS li {
  white-space: pre;
}

Works for me 👍

[Suplanus]

The fix from @nikolauskrismer works. But only on post page... not in the post overview page: Example

[andreszs]

@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.

[AndiDittrich]

@andreszs

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)

[Suplanus]

I tested it on v4 Beta 1 Wordpress Plugin. But the problem is still there. Look here.

As before its only the problem in Blog, not in article.

[AndiDittrich]

@Suplanus

the issue seems to be related to your theme...please check the layout

---

testing env

---

flexbox issue within your theme

[Suplanus]

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;
}

[Suplanus]

... but don't work in Safari 🤦‍♂ Have you a tip for me?

[AndiDittrich]

take a look onto the css rules i've disabled in the post above. your css fix looks weak...

[Suplanus]

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;
}

[AndiDittrich]

display: gridshouldn't be necessary

[Suplanus]

Chrome need this property, don't know why 🤣

[ebody]

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?

[AndiDittrich]

you need Enlighter v4-beta1

[softtama]

Hi! Is horizontal scrolling already a feature in current release version of Enlighter WordPress? I can't find the setting to enable it.

[AndiDittrich]

of course. Enlighter -> Appearance

[swtestacademy]

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.

[AndiDittrich]

@swtestacademy your codeblocks doesn't have the attribute enlighter-overflow-scroll set - maybe it's a caching issue (EnlighterJS js config) or some custom css. the recent EnlighterJS version changed it's internal dom structure - the external API kept untouched but this may break custom modifictions - in this case you have to take care of such changes on your own

[swtestacademy]

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.

[swtestacademy]

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?

[swtestacademy]

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.

[swtestacademy]

@AndiDittrich, I have finally solved the issue.

Solution steps:

1) I disabled the Dynamic Resource Invocation (DRI). 2) I selected the Initialization code as "Add code to the library (single file)".

After these changes, the scroll bar appeared.