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

Horizontal scroll on small screen #31

Closed
muhammadkholidb opened this issue Mar 25, 2016 · 35 comments
Closed

Horizontal scroll on small screen #31

muhammadkholidb opened this issue Mar 25, 2016 · 35 comments
Labels
EnlighterJS v2 legacy EnlighterJS (based on MooTools Framework) question

Comments

@muhammadkholidb
Copy link

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
Copy link
Member

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
enlighter_scrollbar

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

@AndiDittrich AndiDittrich added question EnlighterJS v2 legacy EnlighterJS (based on MooTools Framework) labels Mar 25, 2016
@muhammadkholidb
Copy link
Author

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
Copy link

Hey Andi.

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

screen shot 2016-06-12 at 16 30 48

@AndiDittrich
Copy link
Member

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
Copy link

ghost commented Jan 24, 2017

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

@indikatordesign
Copy link

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
Copy link
Member

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

br, Andi

@indikatordesign
Copy link

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
Copy link
Member

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

@indikatordesign
Copy link

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

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

@JavierSegoviaCordoba
Copy link

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
Copy link

nikolauskrismer commented Sep 13, 2018

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
Copy link
Member

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
Copy link

SKozak commented Jan 22, 2019

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
Copy link

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

@andreszs
Copy link

andreszs commented Jun 3, 2019

@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
Copy link
Member

@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
Copy link

Suplanus commented Jul 22, 2019

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
Copy link
Member

AndiDittrich commented Jul 22, 2019

@Suplanus

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


testing env

image


flexbox issue within your theme

Screenshot_2019-07-22_12-01-25

@Suplanus
Copy link

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
Copy link

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

@AndiDittrich
Copy link
Member

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

@Suplanus
Copy link

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
Copy link
Member

display: gridshouldn't be necessary

@Suplanus
Copy link

Chrome need this property, don't know why 🤣

@ebody
Copy link

ebody commented Feb 3, 2020

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
Copy link
Member

you need Enlighter v4-beta1

@softtama
Copy link

softtama commented Aug 11, 2020

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

@AndiDittrich
Copy link
Member

of course. Enlighter -> Appearance

@swtestacademy
Copy link

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
Copy link
Member

@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
Copy link

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
Copy link

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
Copy link

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
Copy link

swtestacademy commented Jan 23, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
EnlighterJS v2 legacy EnlighterJS (based on MooTools Framework) question
Projects
None yet
Development

No branches or pull requests