Question

I have started to use the PrimeFaces p:editor for text input and for the most part I am fairly pleased with how it works. However the documentation notes that the CKEditor on which it is based does not plug into the ThemeRoller framework so the components dimensions do not adjust automatically.

So for example:

<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>

I would like the p:editor to expand to the width of the table that h:panelGrid renders. Yet nothing I have tried works. Any suggestions?

UPDATE:

I should note that the p:editor tag pays no attention to the style attribute. Instead it has a width attribute and a height attribute and they don’t work the same way the CSS parameters would work. For example width=”100%” is an error.

Answer 1

The actual width of the p:editor depends on the size of its inner <div>. You can simply overwrite that default value:

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

also remove the style="width: 700px" of the p:editor and attach it to the h:panelGrid instead.

A more general solution which applies to all p:editor components is to overwrite the default width attribute of the .ui-editor class:

<style type="text/css">
    .ui-editor {
        width: 99.5% !important;
    }
</style>