cambiando il primefaces stile intestazione del pannello di componente

come posso impostare l’intestazione di stile del p:componente del pannello? voglio impostare l’altezza del panel_header div.

<p:panel id="panel" 
    toggleSpeed="500" toggleable="true">
    <f:facet name="header" >
        <p:outputPanel style="float:left;">
            <p:commandButton process="@this" id="new"
                oncomplete="dialog.show();" icon="ui-icon-plus" />
            <p:spacer width="15px;" />
        </p:outputPanel>
            <h:outputLabel value="Title" />
    </f:facet>
</p:panel>

InformationsquelleAutor ogok | 2012-03-28

3 Replies
  1. 10

    Normalmente utilizzare i CSS per lo stile. Utilizzare il .ui-panel .ui-panel-titlebar di selezione. È possibile trovare i selettori CSS e tutte le sue proprietà in ogni po ‘ decente webbrowser developer kit di strumenti. In Chrome, IE9 e Firebug, pulsante destro del mouse sulla barra del titolo e scegliere Ispeziona Elemento o premere F12.

    Ecco un esempio di come si guarda, come in Chrome:

    cambiando il primefaces stile intestazione del pannello di componente

    Per iniziare, si potrebbe impostare la padding per 0.

    .ui-panel .ui-panel-titlebar {
        padding: 0;
    }

    Mettere questo in un .css file che si carica da <h:outputStylesheet> all’interno <h:body>, in modo che il caricamento del dopo PrimeFaces CSS predefinito.

    Vedere anche:

    Grazie per la risposta. Ma nel mio caso c’è una situazione diversa. Questo pannello è un componente in materiale composito. E non voglio cambiare tutte le intestazioni. Se faccio quello che hai detto; tutte le intestazioni sarà cambiato. Voglio solo cambiare lo stile del componente in materiale composito.
    Poi basta usare un più specifico selettore CSS? E. g. il selettore di ID. Giusto per essere sicuri, hai mai usato i CSS prima? Avete mai veramente imparato a base di HTML/CSS/JS, prima di iniziare con JSF? Quindi posso calcolare meglio che tipo di risposta ti aspetti…
    ovviamente ho usato i css prima. ma il problema è l’id può essere modificabile. so che dovrei usare selettore di id, ma l’id del div è come form_id:composite_componenet_id:panel_id_header. Così composito component id può essere diverso. Io voglio sapere che si ha realmente capito il problema.
    Si potrebbe anche dare una specifica classe di stile, allora si può semplicemente aggiungere il selettore CSS.

    InformationsquelleAutor BalusC

  2. 1

    Racchiudere il p:panel in <h:form prependId="false">.

    Quindi è possibile utilizzare il selettore di ID (come detto nell’altra risposta), come l’id non cambia.

    InformationsquelleAutor AndyTheEntity

Lascia un commento