title: PrimeFaces p:inputText and p:inputTextarea rendering too wide in a p:panelGrid form
body: <p>I have noticed that on our forms the input fields <code>p:inputText</code> and <code>p:inputTextarea</code> are rendered too wide compared to other widgets, e.g. <code>p:select*</code> or <code>p:commandButton</code>. Our forms are enclosed by a p:panelGrid.</p>
  
  <p>Here's a test page:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;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"&gt;
  
      &lt;h:head&gt;
          &lt;title&gt;
              D E B U G
          &lt;/title&gt;
      &lt;/h:head&gt;
  
      &lt;h:body&gt;
  
          &lt;h:form&gt;
  
              &lt;p:panelGrid columns="2"&gt;
  
                  &lt;p:outputLabel value="ID:" /&gt;
                  &lt;p:inputText style="width: 100%;" /&gt;
  
                  &lt;h:outputText /&gt;
                  &lt;p:commandButton value="all = width: 100%" style="width: 100%;" /&gt;
  
                  &lt;p:outputLabel value="Status:" /&gt;
                  &lt;p:selectOneMenu style="width: 100%;"&gt;
                      &lt;f:selectItem itemLabel="Status A" itemValue="1" /&gt;
                      &lt;f:selectItem itemLabel="Status B" itemValue="2" /&gt;
                      &lt;f:selectItem itemLabel="Status C" itemValue="3" /&gt;
                  &lt;/p:selectOneMenu&gt;
  
                  &lt;p:outputLabel value="Remarks:" /&gt;
                  &lt;p:inputTextarea rows="6" style="width: 100%;" /&gt;
  
              &lt;/p:panelGrid&gt;
  
              &lt;br /&gt;
  
              &lt;p:panelGrid columns="2"&gt;
  
                  &lt;p:outputLabel value="ID:" /&gt;
                  &lt;p:inputText style="width: 300px;" /&gt;
  
                  &lt;h:outputText /&gt;
                  &lt;p:commandButton value="all = width: 300px" style="width: 300px;" /&gt;
  
                  &lt;p:outputLabel value="Status:" /&gt;
                  &lt;p:selectOneMenu style="width: 300px;"&gt;
                      &lt;f:selectItem itemLabel="Status A" itemValue="1" /&gt;
                      &lt;f:selectItem itemLabel="Status B" itemValue="2" /&gt;
                      &lt;f:selectItem itemLabel="Status C" itemValue="3" /&gt;
                  &lt;/p:selectOneMenu&gt;
  
                  &lt;p:outputLabel value="Remarks:" /&gt;
                  &lt;p:inputTextarea rows="6" style="width: 300px;" /&gt;
  
              &lt;/p:panelGrid&gt;
          &lt;/h:form&gt;        
  
      &lt;/h:body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>It looks like this on Firefox:</p>
  
  <p><img src="https://i.stack.imgur.com/iefua.jpg" alt="enter image description here"></p>
  
  <p>It looks like this on IE 9 (IE 8 mode):</p>
  
  <p><img src="https://i.stack.imgur.com/pRaxK.jpg" alt="enter image description here"></p>
  
  <p>For the percentage widths <code>&lt;p:inputText style="width: 100%;" /&gt;
  </code>, the components are rendered slightly too wide. The same seems to apply for the absolute widths <code>&lt;p:inputText style="width: 300px;" /&gt;</code>.</p>
  
  <p>I found out, that the PrimeFaces CSS comes with</p>
  
  <pre><code>.ui-inputfield {
      font-weight: normal;
      margin: 0;
      outline: medium none;
      padding: 4px;
  }
  </code></pre>
  
  <p>, 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.</p>
  
  <p><strong>Qs</strong>:</p>
  
  <p>How do you fix the <code>p:inputText</code> and <code>p:inputText</code>? How do you best adjust for this? Using a custom PrimeFaces renderer?</p>
  
  <p>Addendum:</p>
  
  <p>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!).</p>
  
  <p>Note that the <code>p:calendar</code> component seems to show the correct size (only for percentage widths however). PrimeFaces seems to have issues here.</p>