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

FullScreen CodeView unscrollable when using suneditor option "height: 'auto'" #853

Closed
SystemChanger opened this issue Aug 15, 2021 · 2 comments
Labels
Milestone

Comments

@SystemChanger
Copy link
Contributor

SystemChanger commented Aug 15, 2021

Describe the bug
When using codeView in fullScreen mode and suneditor created with height: 'auto' in SunEditorOptions object scrollbar is totally broken and content can't be scrolled.

To Reproduce
Steps to reproduce the behavior:

  1. Go to http://suneditor.com/sample/html/examples.html#groups
  2. Scroll down to 'Char count, Button groups, toolbar container' sub-title (#anchor to it added in url above)
  3. Click 'Full screen' button
  4. Add lines to text-area so the vertical scrollbar appear
  5. Click 'Code view' button
  6. See the totally broken and unusable vertical scrollbar.

Expected behavior
Totally serviceable and usable vertical scrollbar and scrolling :)

Screenshots
image
image

Desktop (please complete the following information):

  • OS: Windows 10
  • Browser: chrome
  • Version: latest

Additional context
It looks like the problem is in this line:
https://github.com/JiHong88/SunEditor/blob/00b9eff22be0f7385e8588218230c79b2d4c0df1/src/lib/core.js#L4277

It sets the text-area element height to be higher than the parent's.
Looks like we should use some other height there. Why can't we just not change it and leave it at "100%"?

Possible solutions

  1. Use the appropriate height (where can we get it?)
  2. Provide the correct value in context.element.code.scrollHeight (where can we get it?)
  3. Do we really need this line? (lol)
  4. Add !fullscreen condition.
    I tested this way, and it works for this issue, but I am not sure if this is the correct solution in general, so without pull-request right now.
 if (options.height === 'auto' && !options.codeMirrorEditor && !this._variable.isFullScreen) context.element.code.style.height = context.element.code.scrollHeight > 0 ? (context.element.code.scrollHeight + 'px') : 'auto';

P.S. this line is too complicated.

Maybe you should also check other places that use this height.

@JiHong88 JiHong88 added the bug label Aug 18, 2021
@JiHong88 JiHong88 added this to the 2.42.0 milestone Aug 18, 2021
@mvoorberg
Copy link

This issue applies to more than just the full-screen code view. The textarea containing the code view has overflow-hidden style applied to it directly. Removing overflow hidden corrects the behaviour.

Add the following to your page CSS

// Sidestep a bug in the editor code view, where it has no scrollbars!
.sun-editor .se-wrapper .se-wrapper-code {  
  overflow: auto !important;
}

JiHong88 added a commit that referenced this issue Dec 18, 2021
fullScreen codeview unscrollable when height auto
@JiHong88
Copy link
Owner

The 2.42.0 version has been updated.
If this issue has not been resolved, please reopen this issue.
Thank you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants