CSS conflict with reveal.js

marijnh commented

2016-08-22 17:02:31 +02:00

(Migrated from gitlab.com)

I'm trying to have codemirror on my slides with reveal.js and there seems to be a css conflict.

Look at this page that reproduces the issue: http://viebel.github.io/klipse/misc/reveal-codemirror.html.

There are a couple of issues:

The code is centered instead of aligned left
When trying to navigate the code with the keyboard arrows, it feels very weird
The cursor is not visible when editing the code

I'm trying to have codemirror on my slides with reveal.js and there seems to be a css conflict. Look at this page that reproduces the issue: http://viebel.github.io/klipse/misc/reveal-codemirror.html. There are a couple of issues: 1. The code is centered instead of aligned left 2. When trying to navigate the code with the keyboard arrows, it feels very weird 3. The cursor is not visible when editing the code

marijnh commented

2016-08-23 07:56:04 +02:00

(Migrated from gitlab.com)

You would have to override the css for CodeMirror, because reveal css will change/modify the properties of div's and so on.

What you would have to alter is as follows:

.reveal .CodeMirror-lines {
    text-align: left !important;
    ......
    ......
}

Alter the CSS for getting the result, because, your CodeMirror is inside a reveal div and that will obviously add it's own css, like:

.reveal .slides {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    overflow: visible;
    z-index: 1;
    text-align: center;  /* Culprit -- changing the alignment */
    -webkit-perspective: 600px;
    perspective: 600px;
    -webkit-perspective-origin: 50% 40%;
    perspective-origin: 50% 40%;
}

You would have to override the css for CodeMirror, because reveal css will change/modify the properties of div's and so on. What you would have to alter is as follows: ``` css .reveal .CodeMirror-lines { text-align: left !important; ...... ...... } ``` Alter the CSS for getting the result, because, your CodeMirror is inside a reveal div and that will obviously add it's own css, like: ``` css .reveal .slides { position: absolute; width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0; margin: auto; overflow: visible; z-index: 1; text-align: center; /* Culprit -- changing the alignment */ -webkit-perspective: 600px; perspective: 600px; -webkit-perspective-origin: 50% 40%; perspective-origin: 50% 40%; } ```

marijnh commented

2016-08-23 08:49:22 +02:00

(Migrated from gitlab.com)

Thanks.

But my problem is with the less trivial css than text-align.
As I mentioned above:

When trying to navigate the code with the keyboard arrows, it feels very weird
The cursor is not visible when editing the code

What css should I override to fix that?

Thanks. But my problem is with the less trivial css than `text-align`. As I mentioned above: 1. When trying to navigate the code with the keyboard arrows, it feels very weird 2. The cursor is not visible when editing the code What css should I override to fix that?

marijnh commented

2016-08-23 14:35:28 +02:00

(Migrated from gitlab.com)

You could try wrapping your editor instances inside web components. That should remove the problems caused by agressive, unscoped CSS in reveal.js.

But in general, I'm not taking responsibility for issues like this, produced by outside CSS. You'll just have to find the relevant properties and reset them in your own CSS.

You could try wrapping your editor instances inside [web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components). That should remove the problems caused by agressive, unscoped CSS in reveal.js. But in general, I'm not taking responsibility for issues like this, produced by outside CSS. You'll just have to find the relevant properties and reset them in your own CSS.

marijnh (Migrated from gitlab.com) closed this issue

2016-08-23 14:35:28 +02:00

marijnh commented

2016-10-02 16:47:47 +02:00

(Migrated from gitlab.com)

mentioned in issue #121

marijnh commented

2016-10-28 23:23:03 +02:00

(Migrated from gitlab.com)

mentioned in issue #1735

marijnh commented

2017-01-10 12:29:34 +01:00

(Migrated from gitlab.com)

mentioned in issue #1788

marijnh commented

2017-01-10 12:30:49 +01:00

(Migrated from gitlab.com)

Per @marijnh suggestion, I've tried to put my editor instance inside a web component but still some CSS is bleeding into the editor:

CodeMirror with reveal: you cannot move with arrows until the end of the line and you cannot insert a space.
CodeMirror without reveal: it works fine.

I know that it is probably an issue with reveal so I am reporting also in reveal repo.

Maybe you guys at CodeMirror can think of a workaround?

Per `@marijnh` suggestion, I've tried to put my editor instance inside a web component but still some CSS is bleeding into the editor: - [CodeMirror with reveal](http://viebel.github.io/klipse/misc/codemirror-reveal-webcomponent.html): you cannot move with arrows until the end of the line and you cannot insert a space. - [CodeMirror without reveal](http://viebel.github.io/klipse/misc/codemirror-webcomponent.html): it works fine. I know that it is probably an issue with reveal so I am reporting also in [reveal repo](https://github.com/hakimel/reveal.js/issues/1788). Maybe you guys at CodeMirror can think of a workaround?

marijnh commented

2017-01-11 11:27:38 +01:00

(Migrated from gitlab.com)

Moving with arrows or using space is related in to Reveal.js keyboard bindings.
https://github.com/hakimel/reveal.js/#keyboard-bindings

https://github.com/hakimel/reveal.js/blob/master/js/reveal.js#L4201

You need to be able to stop event propagation from CodeMirror editor in to Reveal.js handler.

Moving with arrows or using space is related in to Reveal.js keyboard bindings. https://github.com/hakimel/reveal.js/#keyboard-bindings https://github.com/hakimel/reveal.js/blob/master/js/reveal.js#L4201 You need to be able to stop event propagation from CodeMirror editor in to Reveal.js handler.

marijnh commented

2017-01-11 11:42:33 +01:00

(Migrated from gitlab.com)

@RopoMen Here is a version with a code mirror editor on slide 1 and a textarea on slide 2.
As you can see, inside the textarea, arrows and space work fine.

`@RopoMen` [Here](http://viebel.github.io/klipse/misc/codemirror-reveal-webcomponent.html?fdfd) is a version with a code mirror editor on slide 1 and a textarea on slide 2. As you can see, inside the textarea, `arrows` and `space` work fine.

marijnh commented

2017-01-11 12:18:25 +01:00

(Migrated from gitlab.com)

It's because

https://github.com/hakimel/reveal.js/blob/master/js/reveal.js#L4144

// Check if there's a focused element that could be using
// the keyboard
var activeElementIsCE = document.activeElement && document.activeElement.contentEditable !== 'inherit';
var activeElementIsInput = document.activeElement && document.activeElement.tagName && /input|textarea/i.test( document.activeElement.tagName );
var activeElementIsNotes = document.activeElement && document.activeElement.className && /speaker-notes/i.test( document.activeElement.className);

If you inspect DOM in first slide you can see that CodeMirror editor is not directly using input/textarea when content is edited. (if I'm correct)

It's because https://github.com/hakimel/reveal.js/blob/master/js/reveal.js#L4144 ``` // Check if there's a focused element that could be using // the keyboard var activeElementIsCE = document.activeElement && document.activeElement.contentEditable !== 'inherit'; var activeElementIsInput = document.activeElement && document.activeElement.tagName && /input|textarea/i.test( document.activeElement.tagName ); var activeElementIsNotes = document.activeElement && document.activeElement.className && /speaker-notes/i.test( document.activeElement.className); ``` If you inspect DOM in first slide you can see that CodeMirror editor is not directly using input/textarea when content is edited. (if I'm correct)

marijnh commented

2017-01-11 12:20:36 +01:00

(Migrated from gitlab.com)

I think that reveal.js should have attribute 'reveal-keyboard-off' and code should also check whether the element has that attribute. If it has, keyboard event handler should not do anything on those events.

marijnh commented

2017-01-11 14:06:46 +01:00

(Migrated from gitlab.com)

Thanks a lot @RopoMen
It looks much better now.

But I'm still having weird issues. For instance, if you put the cursor at the beginning of (map inc [1 2 3]) and press the right arrow 8 times, the cursor will be at the beginning of the c - see screnshot below. And if you press space, a backspace will be added after the c.

In general, if you play a bit with arrows and spaces, you will feel that something is really not working well.

Do you know why it happens and how coud I solve it?

Thanks a lot `@RopoMen` It looks much better [now](http://viebel.github.io/klipse/misc/codemirror-reveal-webcomponent.html?fdfdfdsfsd). But I'm still having weird issues. For instance, if you put the cursor at the beginning of `(map inc [1 2 3])` and press the right arrow 8 times, the cursor will be at the beginning of the `c` - see screnshot below. And if you press `space`, a backspace will be added after the `c`. ![image](https://cloud.githubusercontent.com/assets/955710/21849581/1f35e03c-d80f-11e6-8445-7caf0dffee07.png) In general, if you play a bit with arrows and spaces, you will feel that something is really not working well. Do you know why it happens and how coud I solve it?

marijnh commented

2017-01-11 15:39:43 +01:00

(Migrated from gitlab.com)

I checked and couldn't see any extra characters in DOM after 'c'. That kind of bug sounds like more CodeMirror issue. (Using Chrome)

ps. How did you handled those keyboard bindings? Quickly looked in to your example and couldn't find "obvious" solution :)

I checked and couldn't see any extra characters in DOM after 'c'. That kind of bug sounds like more CodeMirror issue. (Using Chrome) ps. How did you handled those keyboard bindings? Quickly looked in to your example and couldn't find "obvious" solution :)

marijnh commented

2017-01-11 16:26:53 +01:00

(Migrated from gitlab.com)

I have handled the keyboard binding issue by adding contenteditable="true". See github.com/viebel/klipse@67b9abc228

I have handled the keyboard binding issue by adding `contenteditable="true"`. See https://github.com/viebel/klipse/commit/67b9abc2284aafb70057274c3cdc68e33c893968

marijnh commented

2017-01-11 16:28:16 +01:00

(Migrated from gitlab.com)

@marijnh maybe you can help with this part of the problem that I mentioned above: https://github.com/codemirror/CodeMirror/issues/4189#issuecomment-271863685

`@marijnh` maybe you can help with this part of the problem that I mentioned above: https://github.com/codemirror/CodeMirror/issues/4189#issuecomment-271863685

marijnh commented

2017-01-12 08:44:51 +01:00

(Migrated from gitlab.com)

I did see that on Reveal rules but I thought that it would not work because contenteditable would make the element editable, like <div> or <p> but it actually does not work like that with custom elements :) nice.

I have looked in to web components / custom html elements because to major benefit is the style isolation.

I did see that on Reveal rules but I thought that it would not work because `contenteditable` would make the element editable, like `<div> or <p>` but it actually does not work like that with custom elements :) nice. I have looked in to web components / custom html elements because to major benefit is the style isolation.

marijnh commented

2017-01-12 08:52:35 +01:00

(Migrated from gitlab.com)

@RopoMen so why doesn't it work properly yet ?

`@RopoMen` so why doesn't it work properly yet ?

marijnh commented

2017-01-12 12:18:57 +01:00

(Migrated from gitlab.com)

@viebel
this works fine.

<klipse-snippet id="code" contenteditable="true"></klipse-snippet>

What I meant was that if you add contenteditable for example:

<p contenteditable="true">Edit me</p>

Browser is making <p> tag editable and browser is not making <klipse-snippet> editable in a same way. What I thought initially was that if you add contenteditable for the custom element, browser would make it editable in a same way as it was <p> -tag.

`@viebel` this works fine. ``` <klipse-snippet id="code" contenteditable="true"></klipse-snippet> ``` What I meant was that if you add `contenteditable` for example: ``` <p contenteditable="true">Edit me</p> ``` Browser is making `<p>` tag editable and browser is not making `<klipse-snippet>` editable in a same way. What I thought initially was that if you add `contenteditable` for the custom element, browser would make it editable in a same way as it was `<p>` -tag.

marijnh commented

2017-01-12 13:54:20 +01:00

(Migrated from gitlab.com)

I mean why do we still have this issue https://github.com/codemirror/CodeMirror/issues/4189#issuecomment-271863685

I'm so frustrated: we are so close but still not there!

I mean why do we still have this issue https://github.com/codemirror/CodeMirror/issues/4189#issuecomment-271863685 I'm so frustrated: we are so close but still not there!

marijnh commented

2017-03-22 05:23:05 +01:00

(Migrated from gitlab.com)

mentioned in issue #258

marijnh commented

2019-02-04 03:43:30 +01:00

(Migrated from gitlab.com)

@viebel I think I found something!
I get the problem you describe when I have the chrome inspector open.
But when I close the inspector/console... it works perfectly.
I think that CodeMirror calculates cursor/selection related things in a way that is affected by the changed size of the HTML area when the inspector is open????

`@viebel` I think I found something! I get the problem you describe when I have the chrome inspector open. But when I close the inspector/console... it works perfectly. I think that CodeMirror calculates cursor/selection related things in a way that is affected by the changed size of the HTML area when the inspector is open????

marijnh commented

2019-02-04 23:35:02 +01:00

(Migrated from gitlab.com)

Actually, it's a little more complicated than what I described above.
The cursor behavior is affected by the dimensions of the page.
Having the inspector open or closed affects the dimensions of the page... but any kind of resizing does as well. If the page is too narrow, the selection area is smaller than the real text. If the page is too wide, you cannot click on the text. I'll dig a bit deeper.

Actually, it's a little more complicated than what I described above. The cursor behavior is affected by the dimensions of the page. Having the inspector open or closed affects the dimensions of the page... but any kind of resizing does as well. If the page is too narrow, the selection area is smaller than the real text. If the page is too wide, you cannot click on the text. I'll dig a bit deeper.

marijnh commented

2019-02-05 00:58:18 +01:00

(Migrated from gitlab.com)

@viebel O.K. I got it to work...
I set these in the .adoc file
:revealjs_minScale: 1.0
:revealjs_maxScale: 1.0
This prevents the scaling when the screen is narrow or wide. The scaling does not play well with codemirror.

`@viebel` O.K. I got it to work... I set these in the .adoc file :revealjs_minScale: 1.0 :revealjs_maxScale: 1.0 This prevents the scaling when the screen is narrow or wide. The scaling does not play well with codemirror.

marijnh commented

2023-10-24 02:45:50 +02:00

(Migrated from gitlab.com)

mentioned in issue #2443

Rows
Columns

CSS conflict with reveal.js #4189