Read only text box size increased size automatically - html

Question

I have the two text box(Using JSJ).
I have given txt box size as 50. It is working fine. Based on logic I have make one of the text to readonly disabled = true or disable = disabled. The read only text width is increasing its size.
When I inspect through f12,the size are showing 50 only,In inspect mode when i remove the
disable = disabled,it is reducing to actual size
I checked by the sample.
<h:inputText value="test" type="text" size="50">
</h:inputText>
<br/><br/>
<h:inputText value="tes1t" type="text" size="50" disabled="true">
</h:inputText>
I have pass the param to form as below :
Param
<ui:param name="validationMessageOnTheSameLine" value="true" />
<ui:param name="rowWidth" value="650px" />
<ui:param name="helpTextPaddingLeft" value="130px" />
<ui:param name="showAsterik" value="false" />
<ui:param name="showAsterikForUsername" value="false" />
<ui:param name="inputTextSize" value="50" />
<h:panelGrid columns="2" style="width: #{rowWidth}" id="emailValidated"
columnClasses="#{columnClass1}, #{columnClass2}">
<h:outputLabel value="#{uit.emailAddress}:" for="email">
<h:outputLabel styleClass="asterik" value="*"
rendered="#{showAsterik}" />
</h:outputLabel>
<h:panelGrid columns="2" styleClass="tableNoPadding">
<h:inputText value="#{userBean.emailAddress}" id="email"
styleClass="ux-margin-right-1t" size="#{inputTextSize}"
required="true" disabled="#{disableEmailInput}"
requiredMessage="#{uitkem.valueRequired}"
validatorMessage="#{uitkem.emailValidator}">
<f:validator validatorId="emailValidator" />
</h:inputText>
<rich:message for="email" />
</h:panelGrid>
</h:panelGrid>

Answer 1

Check that these <h:inputText> are enclosed in <h:form>.
Also, you don't need to add type="text" in <h:inputText>.
From my test environment (JSF 2.2), both these inputs have the same size when rendered.