I am using HS 3.0 rc6 to to enable my users to make state and city selections. I have arranged the list of categories in a hierarchy with cities under their respective states. I have pre-populated the list of states (all fifty in the US) but since I can not predict all the cities which my users will need, I have allowed them to add to the list of cities under the states. This configuration works perfectly with Firefox but with Internet Explorer 7, when users select "create new city", the form opens up with the text area to enter the city name and only the "Cancel" button i.e. the "Create" button is missing and so are unable to create new categories. This problem does not show up under Firefox.
My configuration is
Drupal 5.10
HS 3.0 RC6
jQuery Update 5.x 2.0
See attached pictures for more details of my HS configuration and
| Comment | File | Size | Author |
|---|---|---|---|
| #4 | HS Create New - IE 6 view.jpg | 58.82 KB | takinola |
| #2 | HS Demo Page in IE 7.jpg | 302.78 KB | takinola |
| #2 | HS Selection Expanded - IE 7 view.jpg | 10.61 KB | takinola |
| #2 | HS Create New - IE 7 view.jpg | 9.91 KB | takinola |
| HS Settings Part 3.jpg | 62.13 KB | takinola |
Comments
Comment #1
wim leersI personally cannot test in IE7, so I've been waiting for a long time for bug reports like these to pop up. You're the first. After about 6 months now…
It seems IE7 cannot handle the floating properly. The resize handle isn't sized properly either.
Just to be sure, could you please go to http://wimleers.com/demo/hierarchical-select/taxonomy and make screenshots of each of the situations there as well while playing around with each of the Hierarchical Selects there, to show how each situation is being rendered? Thanks.
Comment #2
takinola commentedWim,
Thanks for the quick reply. Here are a couple screenshots taken from your web page with Internet Explorer 7.
The result is pretty much the same as I noticed on my site. The "create new" function does not work because the Create button is missing. Also, the grab bar to expand the selection box works but is appears only with a very small width on the left hand side.
Hope this helps in your troubleshooting.
thanks,
Tolu
Comment #3
wim leersBah. It works in *every* browser: Firefox 2 & 3, Opera 9, Safari 2 & 3, Webkit nightly, even IE6 except for the resize grip.
But it doesn't work in IE7 according to your screenshots. Why is it that IE7 appears to be working worse than IE6? :S
Don't expect a quick solution, because I don't have the time to work on this right now, and not in the next (one or two) month(s). If you want a quick solution, you'll have to write work-arounds for the CSS yourself… (I would of course commit your code in that case)
Comment #4
takinola commentedIt actually does not work in IE6 either. Look at the screenshot I took of your website from my other computer
Comment #5
wim leersI've tested it in IE6 and I swear it worked. Maybe a relatively recent change in the CSS broke it.
Any chance you can work on this?
Comment #6
takinola commentedI would be happy to help look at it but I'm a bit of a newbie when it comes to CSS. I'd need some guidance and a little hand holding along the way. For instance, where would you suggest to start the troubleshooting process?
Comment #7
takinola commentedI found a solution to the bug. It's not pretty but it works.
As you suspected, the problem is with how IE 6 & 7 handle the CSS. What is happening is that the "Cancel" button is superimposed directly on top of the "Create" button so it no longer appears and can not be accessed. The solution is to modify line 61 (the section that defines classes .create-new-item-create and .create-new-item-cancel) in hierarchical_select.css from
clear: right
to
clear:both
This forces the "Cancel" button to appear below the "Create" button and works perfectly well in Firefox 3 and IE6. However, in IE 7, both buttons appear but are placed slightly outside the border around the form. Functionally, it works in all browsers I tested only problem now is the aesthetics are sub par in IE7. When I get a chance, I'll look into fixing that problem but at least this fix makes the bug less critical.
Thanks for the help.
Comment #8
wim leersThat's something I'm not willing to do. Unless I'd do it for IE only. The cancel and create buttons are supposed to be placed next to each other. Not above each other.
However, as I said, it's fine with me if I have to do something special just for IE. I don't think it'll ever work if I don't give IE special treatment…
So, if you can get it to work properly in IE6 *and* IE7, I'll commit it :)
Comment #9
wim leersComment #10
wim leersAfter some searching, I found that simply removing the
clear: leftfor.hierarchical-select-wrapper .hierarchical-select selectdid the trick. It's not the same as in other browsers (where the "Cancel" button sits to the left of the "Create" button), but it's close enough and usable.While I was at it, I worked on fixing the resize grip in IE. It turned out to be impossible. So I just added a hack:
min-width: 70px. This makes HS actually usable in IE7.