Reply editor toolbox is misaligned

[jenschelkopf]

The reply editor toolbox is misaligned - it's floating to the right of the top form elements, instead of below them.

This is what I see:

This is on a new installation of Brimir, with barely any configuration or data seeded.

Here's what the HTML structure looks like:

The grid layout looks a bit off to me, which I've annotated in the screenshot. I see columns on the same level as a paragraph element which is intended to be on a new row.

Conceptually, here's what my HTML looks like:

<row>
  <column/>
  <column/>
  <p/>
</row>

While I would expect it to look like:

<row>
  <column/>
  <column/>
</row>
<p/>

I tried changing the view to render the expected HTML, and it looked better:

In my test, I changed this file to wrap rows 7-29 in a new <div class="row" element.

It does appear that a few other elements aren't rendering correctly, so I think a few more tweaks are needed.

Unfortunately, my employer doesn't allow me to contribute code to open source projects without a long approval process. Otherwise I would totally submit a PR!

[CyberLeo]

For some inexplicable reason, I was able to correct this by adding this bit to app/assets/stylesheets/application.scss : trix-toolbar .button_row { border: 1px solid white; } This was a quick workaround until I could go digging through the trix gem. I'm not sure why it works; probably something to do with collapsing divs.

[frenkel]

Thanks for your extensive report. There was a duplicate close div. Most of the time this can be detected viewed when using view-source, instead of the inspector.

[jenschelkopf]

Thanks!