Hello,
This is a common issue on our forum. The native mobile context menu and selection is make complicate to use the editor button bar. So I made some hacky changes (need more work) but I think this is good, for an idea…
I show an example.
Context menu covers the editor button bar.
Selection and contextmenu covers the options popup menu
I moved the editor button bar section to the bottom of the editor on mobile and also changed the options popup menu position.
Desktop
Mobile
This way the native selection and contextmenu elements won’t cover this part.
Common > CSS
.d-editor-textarea-wrapper {
.d-editor-button-bar {
display: flex;
overflow-x: auto;
background: var(--primary-very-low);
.btn,
.select-kit {
flex: 1;
color: var(--primary-high);
}
// Popup menu
.select-kit.dropdown-select-box.toolbar-popup-menu-options {
.select-kit-row {
.d-icon {
color: var(--primary-high);
}
.texts {
.name {
color: var(--primary-high);
}
}
}
}
}
}
Mobile > CSS
#reply-control {
.submit-panel {
margin-top: 1em;
}
}
.d-editor-textarea-wrapper {
flex-direction: column-reverse;
.d-editor-input {
// Bigger padding on bottom to prevent the last line selection covers the buttons bar
padding-bottom: 1.75em;
}
.d-editor-button-bar {
border-top: 1px solid var(--primary-low);
border-bottom: none;
// Popup menu
.select-kit.dropdown-select-box.toolbar-popup-menu-options {
position: static;
.select-kit-filter {
display: none;
}
.select-kit-body {
transform: none !important;
top: auto !important;
bottom: 0 !important;
flex-direction: row;
justify-content: flex-start;
max-width: 100%;
width: 100% !important;
overflow-x: auto;
background: var(--primary-very-low);
border: none;
}
.select-kit-row {
padding: 0.5em 0.65em;
border: 1px solid transparent;
border-top: none;
}
.select-kit-collection {
display: contents;
}
}
}
}