Skip to content

handle overflow gracefully #256

@FlorianPix

Description

@FlorianPix

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions