chmln / vue-wysiwyg

A lightweight WYSIWYG HTML editor for Vue.js
https://chmln.github.io/vue-wysiwyg/
MIT License
555 stars 134 forks source link

Toolbar runs off screen on small screen sizes. #46

Closed MichaelARoberts closed 6 years ago

MichaelARoberts commented 6 years ago

I've had issues with the component running out of the container it's in on small screen sizes (Nexus 5, Iphone 6s). wysiwyg

Current solution is setting the .editr--toolbar to have a height of auto, and a flex-wrap value.

.editr--toolbar {
    background: #f6f6f6;
    border-bottom: 1px solid #e4e4e4;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: auto;
    flex-wrap: wrap;
}

However the separators between buttons break. I've disabled them with following rule as well.

.editr--toolbar a.vw-btn-separator {
    width: 1px;
    margin: 0 10px;
    display: none;
}

wysiwyg

Not sure if there is a better fix.

ZalgirisKaunas commented 6 years ago

I'm using the latest version and it's still not responsive to smaller screens.