Trix Editor on Rails: Text flows outside box on Heroku (not localhost)

Question

I just implemented Trix editor in my rails app and it works perfectly on localhost but is pulling this ugly business on Heroku:

I can only imagine this is to do with the asset pipeline, so the basics are that I did install the gem ( gem 'Trix' ) and did bundle install , I added //= require trix in my application.js and *= require trix in my application.css.scss . My assets precompiled upon pushing things to Heroku.

Here's the entire application.css.scss structure:

*= require magnific-popup
 *= require trix
 *= require_tree .
 *= require_self
 */

@import "bootstrap-sprockets";
@import "bootstrap";
@import 'ionicons';

Other than these basics, can anyone figure out what step I'm missing to get the styling to appear on Heroku?

Answer 1

There is a style being applied to a class .form-control that is setting height on that box at 34px . Which is why it does not grow with the text

When I remove the height property that the box gets then the box expands out around the text again. This can be kind of hard to find and fix from my end but it is located in a file application.css file inside a block with the same styles that this is surrounded by, probably not line 5 though, probably a later line but depends on file size, search for height: 34px or just 34px again or something and look for a block of styles like the one in the image here and remove that line (now keep in mind if this line is used as a style somewhere else then that will break).

That should fix the issue.

If you are not familiar with using chrome (or any browsers) dev tools I would recommend finding any reference and getting comfortable with using them, they are perfect for debugging this kind of thing.