1

When using the Rails view helper "rich_text_editor:" to render a text input field, a Trix editor toolbar is automatically instantiated above the text field input. However, on mobile devices the Trix toolbar buttons are obscured by the native cut/copy/paste popup menu when text is selected. Has anyone found a way around this issue, for example moving the Trix toolbar to below the text, or forcing the mobile browser to position its buttons below rather than above the selected text? Here's an image of the overlapenter image description here

rossinboulder
  • 110
  • 8

2 Answers2

0

I don't know if this is what you're looking for, but i'll give it a try.

You can take look at Custom styling docs

This is default:

enter image description here

Then in your CSS/SCSS file you can use a media query <480px or any small device media query, add the padding as per your requirements:

trix-toolbar {
  padding-bottom: 3em;
}

Then this makes this:

enter image description here

cdadityang
  • 523
  • 2
  • 10
  • Thanks for this suggestion! It will work but I'm concerned that the big gap might be confusing to the user as well as wasting valuable screen real estate. I've been searching to see if there's some way to detect (in javascript) that the user has selected some text, and then add the padding if necessary. – rossinboulder Jun 27 '20 at 16:19
  • I'm afraid if there is any such event listeners, but there may be any workarounds, If'll link it if I find any, – cdadityang Jun 29 '20 at 15:45
0

A (little bit unsatisfying) javascript solution is as follows:

  1. Catch the trix initialize event
  2. Use media query to detect screensize and infer if mobile
  3. Reorder the toolbar and editor DOM elements if mobile
# app/javascript/src/richtext.js

addEventListener("trix-initialize", function (event) {
  if(browserIsMobile()) {
    putToolbarAfterEditor(event.target)
  }
})

function putToolbarAfterEditor(target) {
  var trix_form = target.toolbarElement.parentElement
  var trix_toolbar = target.toolbarElement
  var trix_editor = target.editor.element
  trix_form.insertBefore(trix_editor, trix_toolbar)
}

function browserIsMobile() {
  return window.matchMedia("only (screen and max-width: 760px), (hover: none)").matches;

}

# app/javascript/packs/application.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("trix")
require("@rails/actiontext")

// Stimulus controllers
import "controllers"

// Javascript sprinkles
import "../src/richtext.js"
rossinboulder
  • 110
  • 8