PDA

View Full Version : Toolbar disappears in HtmlEditor


Snape
4 Aug 2007, 1:59 PM
It seems that HtmlArea looses toolbar when rendered inside certain markup. This happens only in MSIE 6/7 (FireFox is not affected).

I have the following layout:

<table>
<tr><td colspan="2">
Post reply
</td></tr>
<tr><td>
Abrakadabra
</td><td>
<div id="msg-form">
</div>
</td></tr>
</table>

I create a form:

Ext.onReady(function() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';

myform = new Ext.form.Form({
labelAlign: 'top',
buttonAlign: 'left',
method: 'post',
url: 'ExtStart.php',
errorReader: new Ext.form.XmlErrorReader()
});

myform.add(
new Ext.form.HtmlEditor({
id: 'messageText',
fieldLabel: getLabel('messageLabel'),
height: 75,
enableAlignments: false,
enableColors: false,
enableFont: false,
enableFontSize: false,
enableSourceEdit: false
}),
new Ext.form.HiddenField({
id: 'parentId'
})
);

myform.addButton({
text: getLabel('submitLabel'),
handler: function() {
myform.submit({
url: 'ExtStart.php',
waitMsg: getLabel('postingLabel')
})
}
});

myform.addButton({
text: getLabel('resetLabel'),
handler: function() {
myform.reset()
}
});

myform.setValues([
{ id : 'parentId', value : 123 }
]);
myform.render('msg-form');
});

The only thing that helps, is moving form out of table. If I make tabeless layout with floating DIVs, it does not work either. Setting width to HtmlEditor does not help.

I am fighting with it for several hours already without success and I am out of ideas.
Snape
4 Aug 2007, 2:03 PM
Sorry, forgot to say how to reproduce.

Click in the htmleditor. Move mouse over any of two buttons (submit or reset). Toolbar is gone.

Ext 1.1, ext native adapter
stever
9 Aug 2007, 10:39 PM
My suggestion (and i did not try) is to change the tag that the form uses to create itself (autoCreate?) to a div. new Ext.form.Form({autoCreate: {tag:'div', ....}}). And put the form start and end tags outside the table. Just a guess though..
Snape
12 Aug 2007, 11:56 PM
Thanks. Unfortunately it does not work. So far I could only find that disappearing element has "x-toolbar" and "x-small-editor" styles.

Possibly it is related to one of floating bugs in IE (because EXT uses floats to position editor on the right of the label). I tried all solutions and tricks that I could find on the Internet but none worked so far. Bug is still there...

[Update #1]
I just used MSIE developer toolbar. It appears that div with class attribute set to "x-toolbar x-small-editor" is rendered outside of its container. See screenshot. Blue frame is that element (highlighted by developer toolbar). But this element has no float, no negative margins or padding, left and top set to 0. How can it be so misaligned?

[Update #2]
And I found a solution. The problem was "position: relative" set for "x-toolbar" class. I set "position: static" in my CSS and it works just fine: layout is the same and toolbar does not disappear in MSIE. May be EXT developer can consider removing that bit from EXT's CSS?

I am not setting this bug as [SOLVED] because I hope for solution to appear in EXT ;)
jack.slocum
13 Aug 2007, 5:22 AM
position:relative is required for other issues. What doc type are you using?
Snape
13 Aug 2007, 11:06 PM
I use this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
but problem happens even if I remove it. File validates fine.

If "other issues" are not related strictly to this case, may be you can add yet another class definition to the htmleditor toolbar and define class as "position: static"? That will keep "other issues" working and fix htmleditor toolbar.

If you wish and it is more convinient to you, I can make a standalone html and css files, zip them and upload here. This way you will be able to reproduce the problem easily.
jack.slocum
14 Aug 2007, 4:33 AM
Please tell me if adding this CSS fixes it:


.x-html-editor-tb .x-toolbar {
position:static;
}
Snape
14 Aug 2007, 4:59 AM
Yes, it does!