Question
IE: Text area appears with horizontal scroll bar
Hi,
My application was upgraded from PRPC 62sp2 to Pega72.
We are using text area control which on entering data wrap next line with veritcal scroll bar in Firebox. however in IE it gives horizontal scroll and makes data entry annoying.
Script:
<pega:choose>
<pega:when test="$mode-input">
<SPAN nowrap>
<pega:include name="Messages"/>
<TEXTAREA SPELLCHECKENABLED="true" <pega:include name="ClientValidation"/> id="<pega:reference name="$THIS-DEFINITION(pyPropertyName)<%=indx%>" />"
name="<pega:reference name="$this-name" />"
style="border:1px solid #666666; height:60px;width:<pega:reference name="$save(strWidth)" />px; color: #333333; font-family: Arial; overflow:auto; " onpaste="return maxLengthPasteSingle(this,'<p:r n="Param.MaxLimit"/>','<%= indx %>')"
onkeyup="MaxLengthSingle(this,'<p:r n="Param.MaxLimit"/>','<%= indx %>')" oncut="checkCut(this,'<p:r n="Param.MaxLimit"/>','<%= indx %>')" onmousedown="checkMouseDown()" ><pega:reference name="$this-value" mode="normal" /></TEXTAREA>
</SPAN>
</pega:when>
<pega:otherwise>
<TEXTAREA SPELLCHECKENABLED="true" <pega:include name="ClientValidation"/> id="<pega:reference name="$THIS-DEFINITION(pyPropertyName)" />"
name="<pega:reference name="$this-name" />"
style="border:1px solid #666666; height:60px;width:<pega:reference name="$save(strWidth)" />px; background:#E8E8E8; color: #333333; font-family: Arial; overflow:auto; "
<pega:reference name="$save(overflowStyle)" />" readonly ><pega:reference name="$this-value" mode="text" /></TEXTAREA>
</pega:otherwise>
</pega:choose>
In IE:
In Firefox
What i have tried?
max-width:100%;
overflow-x: hidden;overflow-y: scroll;
Please share your thoughts.
***Moderator Edit: Vidyaranjan | Updated Categories***
Hello Abdul,
Thanks for posting queries in PDN.
Try giving the property "overflow:hidden" and check whether style is being applied for the specific class or not.
If not , then the horizontal scroll bar might be of some other div 's.
Try inspect the element and please attach the screen shots along with the developer tool on . This may help us to identify the exact element for which horizontal bar is getting populated and due to which width its occupying the more horizontal space.
Thanks & Regards,
Durga