PDA

View Full Version : Radio and checkbox rendering error in IE



alastairD
11 Jul 2007, 2:36 AM
I was just wondering if there was a slight issue with checkboxes in Internet Explorer 6. For all the beta versions and now the release candidate for 1.1, in the Dynamic Forms example, at the end where an Options panel shows 4 checkboxes - the text always starts over the checkbox and only aligns itself correctly when the checkbox is first selected (whether checking or unchecking). In Firefox it seems to be ok.

Alastair.

glauff
11 Jul 2007, 3:02 AM
Perhaps this is a known issue, but I couldn't find any threads covering this.
When I open the form examples inside the ext documentation in IE I first get what the first attached image shows. The labels of the checkbox overlap the checkbox. When I click on one of the checkboxes the label moves to the appropriate position. (image2).
In my own test app the behaviour is opposite.
When the form gets rendered everything seems okay. When I click on a radiobutton or a checkbox the element is moving closer to the label. (image3).
Everything okay in FF.
I remember that this worked in older versions of the framework.

glauff
2 Aug 2007, 12:55 AM
This issue is still in the release of ext 1.1.
The radiobutton or checkbox changes its position after a click in IE 6
In ext 1.0.1a everything is okay.

jack.slocum
2 Aug 2007, 9:19 AM
http://extjs.com/deploy/ext/examples/form/dynamic.html

I am looking there and the checkboxes are fine in IE6?

Make sure you give your browser a hard refresh and/or clear the cache.

tryanDLS
2 Aug 2007, 1:54 PM
Just verified after clearing files and hard refresh. Clicking on the label causes the checkbox to shift right, removing the space between checkbox and label.

glauff
9 Aug 2007, 1:01 AM
Just a quick info.
I noticed when playing with my form that when I use

form.findField('ID_OF_CHECKBOX').hide();

and then show the checkbox again with show(), the space between the field an the label is there again.

Also when I use the split bars in a border layout, the fields and labels are rearranged.
Hope that this might help you find the origin of this issue.

trbot
9 Aug 2007, 11:05 AM
Thought I'd mention that I'm experiencing this as well...

They start in the correct position (check / radio boxes) and after a click, overlap the text. Even on the dynamic.html page you posted Jack..

marco.braga
13 Aug 2007, 1:43 PM
I have the same problem.. Any updates? Thanks.

jack.slocum
13 Aug 2007, 3:38 PM
This is fixed in SVN and will be in 1.1.1.

marco.braga
13 Aug 2007, 11:04 PM
Thanks Jack!

sacarro
21 Aug 2007, 5:41 AM
Is there anyway you could post the solution to include in our files immediately? I need to prevent my radio buttons from rendering into different positions. Thanks.

sacarro
21 Aug 2007, 6:16 AM
I discovered a fix for this problem:

myRadio.getEl().alignTo(myRadio.getEl(),'lc');

After you have rendered the form. So until 1.1.1 comes out this will have to do unless someone has a better solution?

Troy Wolf
10 Sep 2007, 8:21 AM
FYI: In addition to the space between the box and the label disappearing onclick, I was having another issue that appears to have been fixed in 1.1.1. In my form, my checkboxes and radio buttons that were set to be checked by default were not checked in IE. The problem was not consistent--that is, I could create another form and not see this problem, yet could not pinpoint anything about the one that would cause the issue. 1.1.1 has made this problem go away.

Thanks for the fix. ~o)

liberte
11 Mar 2008, 9:41 AM
I discovered a fix for this problem:

myRadio.getEl().alignTo(myRadio.getEl(),'lc');

After you have rendered the form. So until 1.1.1 comes out this will have to do unless someone has a better solution?

I am having this same problem in 2.0.1. This workaorund fixes the problem for me.

Here is the xtype contructor for the fieldset containing these radio buttons, which is contained within a form, inside a scrolling modal window that has bodyStyle: 'position:relative', if any of that matters.


{
xtype:"fieldset",
title:"Select Ad Type",
autoHeight:true, // necessary to expand to contents.
collapsible: true,
collapsed: false,
layout: 'form',

items:
[
{
xtype:"radio",
boxLabel:"<B>Text + Image</B>: input headline and/or description, upload image below",
hideLabel: true,
name:"adType",
id: "adType_textAndImage",
inputValue:"textAndImage",
checked: true
},
{
xtype:"radio",
boxLabel:"<B>Text only</B>: input headline and/or description below",
hideLabel: true,
name:"adType",
id: "adType_textOnly",
inputValue:"textOnly"
},
{
xtype:"radio",
boxLabel:"<B>Image only</B>: upload image below",
hideLabel: true,
name:"adType",
id: "adType_imageOnly",
inputValue:"imageOnly"
}

]
};