PDA

View Full Version : ComboBox display bugs (IE6, FF)



SteveEisner
13 Mar 2007, 2:38 AM
I've been having a lot of trouble with the combobox's rendering under IE6 - rather than appearing inline(well, "relative"), it acts as if it is position:fixed, and stays on the screen even as the rest of the content scrolls.

The combo is inside a table in a borderlayout (actually, inside a nestedlayout inside a borderlayout.) Normally, within that region it'd also be inside a floated div, but I've tested without any personal stylesheets and it's still happening.

When I do use my stylesheet, the float around the combo combined with some other CSS causes the trigger button to wrap to the line below the text entry box.

I realize the combo is a new control, and just hope that it'll get some attention in the next alpha!

Thanks,
Steve

SteveEisner
13 Mar 2007, 2:40 AM
Oops - should mention that this also happens with the Date control...

jack.slocum
13 Mar 2007, 3:25 AM
Hi Steve,

I will need some kind of link to try to debug the css conflicts taking place. Off hand, I can't guess what is going on and I will need to look at it in Ext debugger to look at css properties getting set.

The combo and date picker are both block elements. Applying display:inline will cause issues. I'm not sure of a cross-browser way to get around it.

davidascher
23 Mar 2007, 4:34 PM
I'm almost embarassed to ask, but what's the best way to wrap a combo box so that it gets treated as an inline element?

martin
24 Mar 2007, 5:03 PM
This will do it partially:

Add to your style sheet: .x-form-field-wrap {display:inline}

The problem is that in Safari the combo box that appears, is about 80 px too far to the right and I can't figure out how to tackle that. In FF it looks correct.

So if anybody has an idea how to tackle the offset problem please let us know...martin

martin
24 Mar 2007, 5:37 PM
A little more info.
Safari appears to offset the drop down by the space before the text field or drop down.

So if the inline positioned text field is approx 200 px from the left edge of the window the drop down will be 200 px too far to the right.

Perhaps this helps track it down...martin

davidascher
24 Mar 2007, 6:06 PM
Thanks Martin, but I find that with that kind of tweak the dropdown ends up too far to the right, and the positioning of elements to the right of the combo box end up overlapping with the dropdown. I think that's what Jack meant by "issues". I was hoping for some container trick where the container could be inlined but the combo box could think it was a block element. Still wrapping my head around these issues...

SteveEisner
26 Mar 2007, 9:34 AM
I'm having a lot of trouble with the use of these components (combos, dates), which are critical to my client's application.

1. In IE6 they don't scroll with the page, rather they behave as if they were "position: fixed". Here's a followup from the Help forum:
http://www.yui-ext.com/forum/viewtopic.php?t=3804

2. In both IE6 and FF2, the trigger image is collapsing and ending up on the left of the box, rather than the far right, in other words, as if it is "position:absolute; left:0;"

3. There is a display glitch on IE6 which causes the display of the trigger image to be garbled (possibly because border or some other attribute is resulting in a few pixels being drawn right on top of the image... hard to tell.) I believe that if #1 and #2 are fixed #3 will probably go away by itself.

As mentioned above, these elements are inside several elements that may be relevant:
borderlayout > nestedlayout > tabpanel of that layout > nestedlayout in that > floated div > input
the input is replaced with whateverField.applyTo()

I will work on a minimal repro for the 2nd case. Repro for the 1st case is inside that link.

aruggles
1 May 2007, 7:31 AM
This will do it partially:

Add to your style sheet: .x-form-field-wrap {display:inline}

The problem is that in Safari the combo box that appears, is about 80 px too far to the right and I can't figure out how to tackle that. In FF it looks correct.

So if anybody has an idea how to tackle the offset problem please let us know...martin

Has anyone figured out a solution/work around for this issue?

SteveEisner
9 May 2007, 7:46 AM
It seems to be due to an IE6 positioning bug. One simple fix is to change your DOCTYPE element - but I wasn't able to do that because I need to remain XHTML.

Here is some more information:

http://extjs.com/forum/showthread.php?t=4621&highlight=relative+scrolling

aruggles
9 May 2007, 12:22 PM
It seems to be due to an IE6 positioning bug. One simple fix is to change your DOCTYPE element - but I wasn't able to do that because I need to remain XHTML.

Here is some more information:

http://extjs.com/forum/showthread.php?t=4621&highlight=relative+scrolling

I ended up solving it. At least in safari by using a float: left. For the IE6/7 related issue I just hacked a negative left pad for those browsers. I am using XHTML strict.

NightAvatar
12 Nov 2008, 5:38 AM
This will do it partially:

Add to your style sheet: .x-form-field-wrap {display:inline}

Instead of display:inline, I used float:left, and added margin-left: 1em to fix the issue for me.

Tested in Safari (Windows), Firefox 2 & 3, Opera 9 & 9.5, IE 6 & 7. All on Windows (Sorry, not Safari Mac).

Using display:inline causes a lot of rendering issues, such as offseting the button placement and the dropdown, etc.

mnop948
14 Apr 2009, 5:06 PM
We are Beijing Torch S&T CO.,LTD which is professional manufacture for SMT and PCB machines. our website is http://en.torch.cc/, please go on it to get more information.There is digital spin coater TJ800, the interlinkage website is http://en.torch.cc/en/product/TJ1200.html,if you are interested in it, please contact us freely. our e-mail is market@tonzh.com.