ändern Sie die Hintergrundfarbe des Layout - Vaadin

in einer meiner apps habe ich eine Fußzeile :

public Footer(){
        hl.setHeight("120px");
        hl.setWidth("100%");
        hl.setMargin(true);
        hl.setSpacing(true);

    VerticalLayout contact = new VerticalLayout();
    Label contact_title = new Label("Contact");
    Label mail = new Label("<a href='mailto:[email protected]'>Par email</a>",ContentMode.HTML);

    contact.addComponents(contact_title,mail);


    hl.addComponent(contact);               
}

wo hl = new HorizontalLayout();

Diese Fußzeile ist in meiner Hauptseite (absoluteLayout). Aber das problem ist, ich sehe keinen Unterschied zwischen meinem Haupt-content und der footer, vor allem, weil es die gleiche Hintergrundfarbe. ALSO ich wollte das ändern der Fußzeile Hintergrundfarbe, hier ist, wie ich versucht :

hinzufügen hl.addStyleName("backColorGrey"); im code und .backColorGrey{background-color:#ACACAC} in mein Thema .scss, versuchte ich das gleiche mit .v-horizontallayout-backColorGrey als Klassennamen in der css.

Ich habe auch versucht mit JavaScript.getCurrent().execute("$('.backColorGrey').css('background-color', 'grey')");

aber nichts zu tun, die Farbe bleibt die gleiche, es wurde nie geändert.

versuchen, javascript, ich habe versucht zu tun, eine Warnung : JavaScript.getCurrent().execute("alert('Hi SO!')"); aber es hat nicht funktioniert, und ich Frage mich, warum.

Also jetzt, wie kann ich tun, um mein hl hintergrund Farbe?

  • überprüfen Sie mit einem tool wie firebug (oder was auch immer browser Sie verwenden, es wahrscheinlich ist etwas ähnliches), dass die Farbe nicht überschrieben werden durch eine genauere CSS-Regel. Ein Erster Indikator für diese wäre die Erklärung Ihrer Hintergrundfarbe in der css -!important. wenn dies nicht hilft, überprüfen Sie mit diesem tool, was dort passiert. ohne ein vollständiges Beispiel, es gibt kaum eine Hilfe zur Verfügung zu stellen. Sie css-es sieht ok aus auf den ersten Blick (dem ersten. die zweite bezieht sich auf eine horlayout (die-zumindest im code ist nicht vorhanden)
  • vielleicht unnötig zu sagen, aber Sie brauchen, um zu kompilieren Ihrem Thema um .scss-Datei, änderungen werden in Ihrem client-Seite. Auch die Warnung funktionieren sollte, finden Sie auch einen Anhaltspunkt für das mit Firefox ist Firebug oder IE oder Chrome die Entwickler-tools, wie suggesred von @cfrick
  • Hat meine Antwort dir zu helfen?
  • Versuch es atm, aber wie es scheint, ist die gute Antwort 🙂
  • Lassen Sie mich wissen, wenn es hilft!
InformationsquelleAutor Supamiu | 2015-01-17
  1. 4

    Klingt wie Sie sind auf dem richtigen Weg. Ich habe in der css, die Sie nicht am Ende die hintergrund-Farbe mit einem Semikolon. (Nur ein Tippfehler).

    Könnte es sein, dass dein theme ist nicht korrekt kompilieren. Prüfen Sie, ob Sie eine mixin-definition in Ihrem Thema.

    Vaadin...

    Footer footer = new Footer();
footer.addStyleName("backColorGrey");

    Scss....

    @import "../reindeer/reindeer.scss";

@mixin mytheme{

    @include reindeer;

      .backColorGrey{
           background-color:#ACACAC;
      }

}

    Sind Sie mit maven/gradle/ivy?
    Möglicherweise müssen Sie fügen Sie ein sass-compiler in Ihrem pom.xml sehen VAADIN kann nicht finden die Themen, wenn in productionMode

    Überprüfen Sie auch, dass Sie nicht im Produktions-Modus...

    Wenn eine Vaadin-Anwendung im development mode, es hat die SCSS -> CSS-Zusammenstellung automatisch auf, wenn die Stile.die css beantragt wird, und die Datei nicht vorhanden ist. Im Produktions-Modus geschieht dies nicht. Wenn Stile.css vorhanden ist, unabhängig vom Modus, die Datei wird verwendet und es gibt keine SCSS -> CSS-Zusammenstellung

    InformationsquelleAutor Kevvvvyp
Schreibe einen Kommentar