csstrix

Rails Trix editor throwing unexpected input field but not rendering expected (and rendered) field


The following image illustrate the state of a form: console image of trix dialogs

  1. a first div with the trix-toolbar is injected, including a tag with name href that was automagically interpreted (nice to know) as having the requirement to be a URL, given it a placeholder and whatnot. Headscratcher: the field is rendered and disabled
  2. the desired text area has its tag for trix-editor with a correct id

However that field is rendered as the tiny square seen at the top-left of the URL dialog div, with a 21x32 pixel dimension

the actiontext.css file is the gem generated one:

.trix-content .attachment-gallery > action-text-attachment,
.trix-content .attachment-gallery > .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

.trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--2 > .attachment, .trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

.trix-content action-text-attachment .attachment {
  padding: 0 !important;
  max-width: 100% !important;
}

Also note that the bases of the css are taken from zurb foundation implementing the XY grid, although that should not be of consequence as all the content is generated within a single div.

Adding:

.trix-content {
  display: block;
}
trix-toolbar{
  display: block;
}
trix-toolbar .trix-dialog--link {
  display: block;
}

does render the input block thoroughly, but still behind the url dialog box.

input box full width but behind dialog box

The display: block; instruction appears to be ignored. css for trix-dialog--link

still have not investigated what the impact of inputting a raw url does, so am uncertain as to whether this dialog is pertinent

What should be done to ensure the trix-editor tag follows the trix-toolbar tag?


Solution

  • Many sources of possible inheritance. The resolution of above matter was to edit stylesheets/actiontext.css as follows, given the trix-dialog is set as a block display and adjust the editor based on its position relative to the URL dialog's height

    trix-toolbar .trix-dialog {
      padding: 7px 5px;
      display: block;
    }
    trix-editor {
      margin-top: 60px;
    }