2017-12-16 3 views
0

ich nur Trix implementiert Editor in meiner Rails-Anwendung und es funktioniert perfekt auf localhost aber dieses hässliche Geschäft auf Heroku zieht:Trix Editor on Rails: Text fließt außerhalb Box auf Heroku (nicht localhost)

enter image description here

Ich kann mir nur vorstellen, dass dies mit der Asset-Pipeline zu tun ist, also die Grundlagen sind, dass ich den Edelstein (gem 'Trix') installiert habe und bundle install, fügte ich //= require trix in meinem application.js und *= require trix in meinem application.css.scss. Mein Vermögen wurde vorkompiliert, nachdem ich Dinge an Heroku weitergegeben hatte.

Hier ist die gesamte application.css.scss Struktur:

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

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

Anders als diese Grundlagen, kann man herausfinden, was Schritt fehlt mir das Styling bekommen auf Heroku werben?

+0

Können Sie Ihre Asset-/Stylesheet-Ordnerstruktur in Ihrem Beitrag hinzufügen? –

+0

Versuchen Sie, indem Sie '* = require_self' und' * = require_tree' aus Ihrer Datei application.css.scss entfernen. –

+0

@ChetanDatta, fügte meine Assets hinzu, wie gewünscht. – Liz

Antwort

1

Es gibt einen Stil, der auf eine Klasse .form-control angewendet wird, die die Höhe für dieses Feld unter 34px einstellt. Aus diesem Grund wächst es nicht mit dem Text

Wenn ich die Höhe Eigenschaft entfernen, die die Box bekommt, dann die Box erweitert sich um den Text wieder. Dies kann etwas schwer zu finden und zu beheben von meinem Ende, aber es befindet sich in einer Datei application.css Datei in einem Block mit den gleichen Stilen, die diese umgeben ist, wahrscheinlich nicht Zeile 5, wahrscheinlich eine spätere Zeile, aber hängt von der Dateigröße ab , suche nach height: 34px oder einfach 34px nochmal oder sowas und suche nach einem Block von Stilen wie dem hier im Bild und entferne diese Zeile (beachte jetzt, wenn diese Zeile irgendwo anders als ein Stil verwendet wird, dann wird das kaputt gehen).

enter image description here

, die das Problem beheben sollte.

Wenn Sie nicht vertraut sind mit Chrome (oder irgendwelchen Browsern) dev tools würde ich empfehlen, eine Referenz zu finden und sich damit vertraut zu machen, sie sind perfekt für das Debuggen dieser Art von Sache.

+0

Sie sind ein Lebensretter, Sir! Vielen Dank. Ich hatte vergessen, das '.form-Steuerelement 'zu entfernen, wenn Trix hinzugefügt wurde! – Liz

Verwandte Themen