Wie man PrimeFaces-editor zu erweitern, um den verfügbaren Raum?

Habe ich angefangen, die PrimeFaces p:editor für die Texteingabe und zum größten Teil bin ich Recht zufrieden, wie es funktioniert. Aber die Dokumentation stellt fest, dass der CKEditor auf denen Sie beruht, nicht Stecker in die ThemeRoller Rahmen, so dass die Komponenten Abmessungen passen sich nicht automatisch.

So zum Beispiel:

<h:panelGrid columns="2">

    (stuff)

    <h:outputLabel value="Content:" />
    <p:editor id="editDoc" widgetVar="editorDoc"
                 value="#{editDocument.text}"
                 style="width: 700px"
                                  />

    (more stuff)
</h:panelGrid>

Möchte ich die p:editor zu erweitern, um die Breite der Tabelle, die h:panelGrid macht. Noch nichts, was ich versucht habe funktioniert. Irgendwelche Vorschläge?

UPDATE:

Sollte ich beachten Sie, dass die p:editor tag zahlt keine Aufmerksamkeit auf die Stil Attribut. Stattdessen hat er eine Breite Attribut und ein Höhe - Attribut, und Sie funktionieren nicht auf die gleiche Weise die CSS-Parameter funktionieren würde. Zum Beispiel width="100%" ist ein Fehler.

InformationsquelleAutor AlanObject | 2012-10-23
  1. 5

    Wird die tatsächliche Breite des p:editor hängt von der Größe seiner inneren <div>. Können Sie einfach überschreiben das default-Wert:

    <style type="text/css">
    #editDoc > div {
        width: 99.5% !important;
    }
</style>

    entfernen Sie auch die style="width: 700px" des p:editor und befestigen Sie es an der h:panelGrid statt.

    Einer Allgemeinen Lösung, die für alle p:editor Komponenten zum überschreiben der Standard - width Attribut des .ui-editor Klasse:

    <style type="text/css">
    .ui-editor {
        width: 99.5% !important;
    }
</style>
    • danke für den Hinweis @AlanObject, bearbeitet ich meine Antwort.
    • Ich von Ihnen positiv bewertet werden, aber nach einem längeren test, die Lösung, die Sie geben nur die Größe der Symbolleiste. Das innere iframe (wo der Benutzer eingibt) hat immer eine Breite 600px. Gibt es eine Lösung?
    • bitte beachten Sie, dass diese Lösung können veraltet sein. Ich weiß nicht, wie verhält sich diese mit der aktuellen PrimeFaces version.
    InformationsquelleAutor Akos K
  2. 1

    Für Primefaces 4, müssen wir die Breite des inneren iframe:

    <style type="text/css">
    .ui-editor iframe {
        width:100% !important;
    }
</style>
    InformationsquelleAutor Grégoire C
Schreibe einen Kommentar