The following image illustrate the state of a form:
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 disabledtrix-editor
with a correct idHowever 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.
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?
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;
}