PDA

View Full Version : Firefox Font Resizing Bug



ngdeveloper
1 May 2009, 8:18 AM
Hi! I've created a window with 2 panels and within those panels are text and a couple text boxes. When I use the Firefox font resize (by hitting Ctrl and the plus key), on the second zoom the text in the top panel enlarges and is no longer completely visible in the panel. The lower panel enlarges with the text which is the desireable effect. Is there a way to make the top panel resize as it zooms in like the bottom panel does? Both of these panels have the same config.

tryanDLS
1 May 2009, 8:21 AM
http://extjs.com/learn/Ext_Forum_Help#Posting_a_working_showcase

ngdeveloper
1 May 2009, 10:03 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Code Sample</title>
<script>


Ext.onReady(function(){
var panel1 = new Ext.Panel ({
id: 'panel1',
height: 150,
width: 500,
autoScroll:false,
scroll: false,
html: '<form name = "form1">' +
'<span style="padding: 0px 0px 0px 7px;">' +
'<b>Header</b></span><br><br>' +
'<div style="width:95%;padding:0px 0px 0px 35px">' +
'<div style="float:left;width:30%;" class="preferences-text">' +
'<b>Rate: </b>' +
'<input type = "text" size = "1" class="name-text-box" ' +
'maxlength = "3" value = "' + 20+
'" name = "Rate" id = "Rate"> seconds<br>'+
'</div></div></form>',
collapsible: false,
floating: true,
shadow: false,
x: 3,
y: 2
});

// Panel for Folder manager preferences that only apply only the MUA
var panel2 = new Ext.Panel ({
id: 'panel2',
height: 300,
width: 500,
autoScroll:false,
scroll: false,
html: '<form name = "form">' +
'<span style="padding: 0px 0px 0px 7px;">' +
'<b>Title</b></span>' +
'<div style="width:95%;padding:2px 0px 0px 35px">' +
'<div style="float:left; width:60%;" class="preferences-text"><br>' +
'<b>Visibility</b><br>'+
'<input type ="radio" name = "visibility" id ="visibility" value="on" ' +
' /> On<br>' +
'<input type ="radio" name = "visibility" value="off" ' + ' /> Off</div>' +
'<div style="float:left; width:30%;" class="preferences-text">' +
'<br><b>Display</b><br>' +
'<input type ="radio" name = "display" id = "display" value="expand" ' +' /> Expand<br>' +
'<input type ="radio" id = "display" name = "display" value="minimize" ' +
' /> Minimize<br><br><br></div>' +
'<div style="width:95%;">' +
'<div id="foldertree-parent" ' +
'name="foldertree-parent" style="float:left; width:50%;" ' +
'class="preferences-text">' +
'</div></form>',
collapsible:false,
floating: true,
shadow: false,
x: 3,
y:63
});

// Folder Manager Preferences Panel
var mainPanel = new Ext.Panel ({
animCollapse: false,
id: 'mainPanel',
height: 900,
width: 700,
autoScroll: false,
scroll: false,
title:'Preferences',
collapsible:true,
floating: true,
shadow: false,
x: 3,
y: 0
items: [panel1, panel2],
renderTo: 'samplediv'

});
})



</script>
</head>
<body>
<div id="samplediv"></div>
</body>
</html>