PDA

View Full Version : TextArea component adds 4px to height



brandon_tran
21 Aug 2015, 11:50 AM
Every instance of where I am using a TextArea component, I find that I have an extra 4px in height. This is a problem because I have a custom plugin to render an error message bubble directly below the TextArea field. With the extra 4px, I see a gap between my textarea field and the error bubble.

When I step through the code, I don't see the extra pixels in afterrender, but something happens between the afterrender event and the boxready event because once I break in the boxready event I find that 4px have been added.

I can of course add code to my plugin that will take account of the 4 extra pixels for all TextArea components. But that is not a real solution to the underlying problem.

Does anyone know why/where the extra 4 pixels is added?


Note: The 4px height is added to the first <div> element within the <td>, which causes the top level <table> element to increase in height.

<table>
<tbody>
<tr>
<td>
<div> <-----------this div for some reason gets an extra 4px
<textarea>
</textarea>
</div>
</td>
</tr>
</tbody>
</table>

Example: I set my textarea's height config property to 80. I launch my app and look at the debugger. Under the "Styles" tab of Chrome debugger I can see that height is being set to 80. I look under the "Computed" tab and it says 84px.


EDIT: This happens only in Chrome.

joel.watson
29 Aug 2015, 9:33 AM
Hi--

Can you share a test case that demonstrates this issue? https://fiddle.sencha.com

I'll be happy to test it along with you.

Thanks!
Joel