PDA

View Full Version : Disappearing Fields in IE



heidtmare
17 Apr 2007, 12:57 PM
Ok, I'm having a reoccurring problem that I've posted about before, but I'm hoping I actually get somewhere this time. :-?

The Problem: Ext extended fields are visually disappearing when the parent container completes an animation. (in IE6)

This problem isn't present in FF


I've got a form.
In this form I've put fields into sections.
The sections collapse.
The content in each section_title, and section_body is the only difference between sections.


The section im having trouble with is this one:
markup:


<div class="section collapsed">
<div class="section_handle" onclick="Form.toggleSection(this.parentNode);">
<div class="section_title">Date Range</div>
</div>
<div class="section_body">
<table width="100%">
<tr>
<td style="text-align:right;">
Start:
</td>
<td>
<input class="datefield" type="text" name="start_date" value="" />
</td>
</tr>
<tr>
<td style="text-align:right;">
End:
</td>
<td>
<input class="datefield" type="text" name="end_date" value="" />
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center; font-weight:bold;">
or
</td>
</tr>
<tr>
<td style="text-align:right;">
Offset:
</td>
<td>
<input type="text" id="date_offset" name="date_offset" value="" />
</td>
</tr>
</table>
<br />
</div>
</div>
i also have code which turns the three inputs in the markup into 2 DateFields and one ComboBox.

when i click on the section_title the section_body collapses using the following function:


this.toggleSection = function( section )
{
var body = Ext.query('.section_body', section);
body = Ext.get(body[0]);
section = Ext.get(section);

if( body.isVisible() )
{
body.slideOut('t', {useDisplay: true, callback: function(){section.addClass('collapsed');}});
}
else
{
body.slideIn('t', {callback: function(){section.removeClass('collapsed');}});
}
}
I have to set useDisplay:true else after a slideOut all that space that was taken up by the content that just slid out pops back in (which is really lame).
the collapsed class is detailed further down.


All the above works great. I get cool fields, and my sections collapse.
But, upon expanding my section, the fields disappear.
They disappear AFTER the animation finishes...meaning i see the fields slide into view and then poof...gone. All other stuff in the section_body is visible....just the extended fields disappear.

At this point I'd like to restate that this doesn't happen in FF...only IE.

now, i know some of you are screaming about whats in the css:


#search form .section {border-top: 1px solid #B2D0F7;}
#search form .section .section_handle {cursor:pointer; background: url('../images/icons/up.gif') no-repeat top right}
#search form .section .section_handle .section_title {color: #6593cf; font-weight: normal;}
#search form .section .section_body {color: #666; text-align: center; padding:3px;}
#search form .section .section_body table {color: #666;}

#search form .section.collapsed {border-top: 1px solid #B2D0F7;}
#search form .section.collapsed .section_handle {cursor:pointer; background: url('../images/icons/down.gif') no-repeat top right}
#search form .section.collapsed .section_body {display:none;}
as you can see i use the .collapsed as a way to indicated what toggle image to use and to set display:none.
The display:none is used to start certain sections in the collapsed state.


Why is IE being so gay! :-/

heidtmare
18 Apr 2007, 4:33 AM
somebody say something...
anything...
please...

heidtmare
19 Apr 2007, 4:47 AM
BUMP!

ChrisR
4 May 2007, 2:39 AM
I'm having issues with the DateField class too. When i apply it to an input element everything works fine but in IE6 when the page scrolls the input field and the icon don't scroll along but seem to have gained position: fixed somehow ... i don't know if this is due to CSS (probably not) but the behaviour only occurs in IE6/Win

dfenwick
4 May 2007, 3:56 AM
In the areas where you're making the section_body visible, in the callback add the following at the end:


if(Ext.isIE)
Ext.get('section_body').repaint();

See if that helps.

rlieving
10 Feb 2009, 5:51 PM
I encountered a similar issue as listed above. I have a form that has certain elements that need to be enabled/disabled based on actions the user takes on the form.

A little background. I am using a window and hiding it between calls. All of the form elements are reused as the form is shown and hidden. (I tried closing the form, but this is a single screen application and I couldn't work around the memory leaks that are caused by opening/closing forms.) We use IE7.0 here at work. I tested in FireFox 3, and this was not an issue.

The way to reproduce the issue is as follows:
Open the form. All controls are enabled. Trigger the event to disable the controls. The controls are disabled as expected. Close the form. Open the form again and trigger the event. This time, the disabled controls disappear.



I read theories about setting the alpha filter, setting new styles, and repainting. None of those worked.

The solution was to call the syncSize() method on the control on the disable event. On control also had to be resized before getting a syncSize(). Once I did that, the issue went away.

Pseudo code:
control.on('disable', function() { this.syncSize(); });

If anyone has any ideas on why this works, I am all ears.

vladok
20 Feb 2009, 12:33 PM
Hi, exactly the same problem in IE, although FF works fine. While my panel slides slowly out I see the form, but when finished, disappears immediatly. The same goes to slideIn(), the form appears in the moment of sliding in. I'v tried the syncSize method mentioned above, but no use. Please assist



var fp = new Ext.FormPanel({
width: 500,
frame: true,
autoHeight: true,
bodyStyle: 'padding: 10px 10px 0 10px;',
labelWidth: 60,
defaults: {
anchor: '95%',
allowBlank: false,
msgTarget: 'side'
},
items: [{
xtype: 'textfield',
name: 'title',
maxLength: 20,
id: 'title',
fieldLabel: '<?=$this->phrase('title')?>'
},{
xtype: 'textarea',
name:'desc',
maxLength: 100,
id:'desc',
fieldLabel: '<?=$this->phrase('describtion')?>'
},{
xtype: 'textfield',
name:'link',
id:'link',
fieldLabel: '<?=$this->phrase('youTubeLink')?>',
vtype: 'url',
vtypeText: '<?=$this->phrase('videoUrlValidation')?>'
}
],
buttons: [{
text: '<?=$this->phrase('save')?>',
handler: function(){
if(fp.getForm().isValid()){
saveVideos();
fp.getForm().reset();

}
}
},{
text: '<?=$this->phrase('reset')?>',
handler: function(){
fp.getForm().reset();
}
}]
});



var panel = new Ext.Panel({
renderTo:'addVideo-div',
id: 'addVideo',
frame: true,
width: 400,
layout: 'fit',
autoHeight: true,
border: false,
items: [fp]
});
panel.hide();

var addVideo = new Ext.Button( {
text : 'AddVideo',
type : 'button',
name : 'AddVideo'
});

var hideVideo = new Ext.Button( {
text : 'hideVideo',
type : 'button',
name : 'hideVideo',
hidden : true
});


addVideo.on('click', function() {
panel.show();
Ext.get('addVideo-div').slideIn('t', { duration: 1.5, callback: function(){Ext.get('addVideo-div').removeClass('collapsed');}} );
fp.syncSize();
addVideo.hide();
hideVideo.show();
});


hideVideo.on('click', function() {
Ext.get('addVideo-div').slideOut('t', { duration: 0.7, useDisplay: true, callback: function(){Ext.get('addVideo-div').addClass('collapsed');}});
addVideo.show();
hideVideo.hide();
});

var taskActions = new Ext.Panel({
renderTo: 'task',
items: [addVideo, hideVideo]
});


});

vladok
23 Feb 2009, 2:51 AM
By the way, Ext ver. 2.2.1

tryanDLS
23 Feb 2009, 8:31 AM
Please start a new thread in the correct forum, rather than resurrecting very old threads from previous versions.

Closed