JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.0.2a/resources/css/ext-all.css">
<html>
<head>
<title>ExtJS4 Test</title>
</head>
<body>
<p id="goodpopup">Good Popup</p>
<p id="badpopup">Bad Popup (zoom in/out on FF/Chrome)</p>
<!-- Used for tooltip HTML -->
<div style="display: none;" id="goodhtml">
<table>
<tr>
<td class="t4e-searchpanel-popup-column-left">ID</td>
<td class="t4e-searchpanel-popup-column-right"></td>
</tr>
<tr>
<td class="t4e-searchpanel-popup-column-left">Username</td>
<td class="t4e-searchpanel-popup-column-right">advtest</td>
</tr>
<tr>
<td class="t4e-searchpanel-popup-column-left">Display Name</td>
<td class="t4e-searchpanel-popup-column-right">Test, Test</td>
</tr>
<tr>
<td class="t4e-searchpanel-popup-column-left">Common Name</td>
<td class="t4e-searchpanel-popup-column-right">Test, Test</td>
</tr>
<tr>
<td class="t4e-searchpanel-popup-column-left">First Name</td>
<td class="t4e-searchpanel-popup-column-right">Test</td>
</tr>
<tr>
<td class="t4e-searchpanel-popup-column-left">LastName</td>
<td class="t4e-searchpanel-popup-column-right">Test</td>
</tr>
<tr>
<td class="t4e-searchpanel-popup-column-left">Initials</td>
<td class="t4e-searchpanel-popup-column-right"></td>
</tr>
<tr>
<td class="t4e-searchpanel-popup-column-left">Description</td>
<td class="t4e-searchpanel-popup-column-right">verylong longlong...
CSS
.fix-tip-height {
}
.t4e-searchpanel-popup td {
padding: 3px;
}
.t4e-searchpanel-popup td {
padding: 3px;
}
.t4e-searchpanel-popup-column-left {
text-align: right;
font-weight: bold;
border-right-color: black;
border-right-width: thin;
border-right-style: solid;
}
.t4e-searchpanel-popup-column-right {
}
JavaScript
// ExtJS 4 Popup Height Bug (FIXED)
//**************************//
Ext.onReady(function(){
Ext.create('Ext.tip.ToolTip', {
target: Ext.get('goodpopup')
, anchor: 'right'
, bodyCls: 't4e-searchpanel-popup'
, maxWidth: 500
, dismissDelay: 0 // disable auto-hiding while mouse still focused
, html: Ext.getDom('goodhtml').innerHTML
}); // eo tooltip
Ext.create('Ext.tip.ToolTip', {
target: Ext.get('badpopup')
, anchor: 'right'
, cls: 'fix-tip-height'
, bodyCls: 't4e-searchpanel-popup'
, maxWidth: 500
, dismissDelay: 0 // disable auto-hiding while mouse still focused
, html: Ext.getDom('badhtml').innerHTML
}); // eo tooltip
});