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

In this post, we will see how to resolve Rails Trix editor throwing unexpected input field but not rendering expected (and rendered) field

Question:

The following image illustrate the state of a form:

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
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 21×32 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.

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?

Best Answer:

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;
}

If you have better answer, please add a comment about this, thank you!

Source: Stackoverflow.com

Question:

Best Answer:

Related