CODEWITHSUNDEEP
jquerycssjsfprimefaces
Kawu
Kawu

Reputation: 14003

PrimeFaces p:inputText and p:inputTextarea rendering too wide in a p:panelGrid form

I have noticed that on our forms the input fields p:inputText and p:inputTextarea are rendered too wide compared to other widgets, e.g. p:select* or p:commandButton. Our forms are enclosed by a p:panelGrid.

Here's a test page:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <h:head>
        <title>
            D E B U G
        </title>
    </h:head>

    <h:body>

        <h:form>

            <p:panelGrid columns="2">

                <p:outputLabel value="ID:" />
                <p:inputText style="width: 100%;" />

                <h:outputText />
                <p:commandButton value="all = width: 100%" style="width: 100%;" />

                <p:outputLabel value="Status:" />
                <p:selectOneMenu style="width: 100%;">
                    <f:selectItem itemLabel="Status A" itemValue="1" />
                    <f:selectItem itemLabel="Status B" itemValue="2" />
                    <f:selectItem itemLabel="Status C" itemValue="3" />
                </p:selectOneMenu>

                <p:outputLabel value="Remarks:" />
                <p:inputTextarea rows="6" style="width: 100%;" />

            </p:panelGrid>

            <br />

            <p:panelGrid columns="2">

                <p:outputLabel value="ID:" />
                <p:inputText style="width: 300px;" />

                <h:outputText />
                <p:commandButton value="all = width: 300px" style="width: 300px;" />

                <p:outputLabel value="Status:" />
                <p:selectOneMenu style="width: 300px;">
                    <f:selectItem itemLabel="Status A" itemValue="1" />
                    <f:selectItem itemLabel="Status B" itemValue="2" />
                    <f:selectItem itemLabel="Status C" itemValue="3" />
                </p:selectOneMenu>

                <p:outputLabel value="Remarks:" />
                <p:inputTextarea rows="6" style="width: 300px;" />

            </p:panelGrid>
        </h:form>        

    </h:body>

</html>

It looks like this on Firefox:

enter image description here

It looks like this on IE 9 (IE 8 mode):

enter image description here

For the percentage widths <p:inputText style="width: 100%;" /> , the components are rendered slightly too wide. The same seems to apply for the absolute widths <p:inputText style="width: 300px;" />.

I found out, that the PrimeFaces CSS comes with

.ui-inputfield {
    font-weight: normal;
    margin: 0;
    outline: medium none;
    padding: 4px;
}

, where removing the padding results in the correct width. However, the padding is meant for the text inset of the inputs. Overriding the CSS selector doesn't really work.

Qs:

How do you fix the p:inputText and p:inputText? How do you best adjust for this? Using a custom PrimeFaces renderer?

Addendum:

I looked into the sources, but I couldn't find the place where this could be changed (InputRenderer class?). Any tips on where to look are appreciated (in a comment!).

Note that the p:calendar component seems to show the correct size (only for percentage widths however). PrimeFaces seems to have issues here.

Upvotes: 3

Views: 21013

Answers (2)

Tires
Tires

Reputation: 1602

You can override padding and other styles after primefaces stylesheet. Usually this means inline / include stylesheet directly after <h:body>:

.ui-inputfield {
    padding: 0;
}

Upvotes: 0

Cjxcz Odjcayrwl
Cjxcz Odjcayrwl

Reputation: 22847

It's a normal behaviour, you've found out already why. Because of padding in the theme you've choosen.

So you can:

  • adapt the width of your components properly. Use 296px for inputText or 304px for selectOneMenu or anything that fits your needs
  • override the css style for given section. Just find out how to override the style for given class in given context.
  • the best solution, because you have specific needs: Write your own theme based on current theme (PrimeFaces docu section 7).

Upvotes: 1

Related Questions