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

handle overflow gracefully #256

Open
FlorianPix opened this issue Aug 2, 2024 · 2 comments
Open

handle overflow gracefully #256

FlorianPix opened this issue Aug 2, 2024 · 2 comments

Comments

@FlorianPix
Copy link

When I edit a md text that is wider than the editor window, then this text is not shown/cut off in the preview.
Also when I have a md text that is very long than it takes up the whole page.

Current:
grafik
grafik

I propose to make the following changes to martor.bootstrap.min.css:

.main-martor {
    margin: 1em 0;
    position: relative;
    overflow: hidden;
    width: 100%
}

div.martor-preview {
    padding: 1rem;
    overflow: scroll;
    background: #fdfdfd;
    max-height: 50vh
}

This does the following:

  • max-height: 50vh limit the preview height to 50vh (to avoid occupying the whole page - one can still use the full screen mode if needed
  • overflow: scroll and overflow: hidden make the preview scrollable if it is too long
  • width: 100%: let martor occupy the whole column instead of floating in the middle

Proposed solution:
grafik
grafik

@agusmakmun
Copy link
Owner

Hello @FlorianPix thank you for catching this issue, we will adjust your following codes.

@agusmakmun
Copy link
Owner

But seems after implementing, will be broken in the django admin form, so we hold this first

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

No branches or pull requests

2 participants