I worked out how to fix this issue, it seems the only way is for a change to be made in the Umbraco core as the issue is related to a z-indexing bug in IE7 which can be fixed by adding position:relative and appropriate z-index values to the datatype div's.
If you come across this error, feel free to vote for it on Codeplex:
I agree that is possible a good work around for the problem and worth investigating, the z-index values need to start high and decrement for each data type down the page, this should allow for multiple image pickers to work correctly.
I do think that this is also something that needs addressing in the core product as it would be an issue for any datatype that had some kind of additional div that is shown outside of the bounds of the data type div.
I think I have a bit of a crazy day ahead, but if I get any time I'll try and look at the JQuery idea this afternoon / evening.
@Rajeev: As you know, the images displayed in the dropdown are the originals - they display the same size. You'd need to prepare your images to whatever dimensions you need before you upload them. (Maybe not ideal, but that's the way it currently works). The saved value is the associated text, not the image path/src. The data-type wasn't intended to pull that through ... but do feel free to raise a ticket on our CodePlex, we could add that functionality in future?
@Fuji: Wish it was that simple too! :-) Problem is that IE7 has issues with elements that are absolute positioned and z-indexes: read more about it here. The solution is to set the CSS for all parent elements to position:relative and have a lower z-index ... but that either requires an Umbraco core change, or some jQuery hacking!
@Chris: Had a look at the icon dropdowns on the Document Type editor... this has the same problem in IE7. Looks like the workaround (fudge) here was to set the visible height of the dropdown so that it didn't overlap/underlap with the next property item panel. So this is very much an issue in the core.
Just to let you know, I have updated the fix from Lee and changed it slightly so it should fix both the Image Dropdown and any other component that was suffering from this issue, as long as you have the latest build of uComponents from SVN it will now and a z-index to each of the property div's starting at 1000 and counting down, this means that any control like the image dropdown that was dropping behind the following div will now behave correctly and you should be able to have multiple drop downs on the same page and they should all work fine.
Thanks to Lee for helping try to solve this problem and ultimately point me in the right direction to solve it, great community effort :)
Image Dropdown does not work correctly in IE7
Hi All,
One of our clients is ( unfortunately ) using IE7 and they have raised the following bug with the uComponents image drop down control:
As you can see the drop down goes behind the following properties, I guess it might be a z-index issue, any ideas?
Cheers,
Chris
Hi Chris,
I'll take a look... hopefully it's a quick fix.
Cheers, Lee.
Hi Chris,
I can reproduce the issue in IE7 (well, IE9 in IE7-compat mode) ... tried to hack around with a fix, but couldn't find an easy/quick solution.
Coule you raise a ticket on CodePlex please? Then I'll assign it to the original dev (think it's Ronnie, but need to check).
http://ucomponents.codeplex.com/WorkItem/Create
Thanks, Lee.
Ref: http://ucomponents.codeplex.com/workitem/13907
Thanks for submitting the ticket Lee, I am going to see if I can fixes it today.
Cheers, Chris
Hi All,
I worked out how to fix this issue, it seems the only way is for a change to be made in the Umbraco core as the issue is related to a z-indexing bug in IE7 which can be fixed by adding position:relative and appropriate z-index values to the datatype div's.
If you come across this error, feel free to vote for it on Codeplex:
http://umbraco.codeplex.com/workitem/30363
Cheers,
Chris
Tweeted you about it on Friday, but quick follow up on here.
We could add some jQuery to the ImageDropdown JS that will dynamincally set the "position:relative" and "z-index" of the required <div>s?
This would isolate the issue for uComponents - and provide backwards compatibility (down to v4.5.2).
Cheers, Lee.
Hi Lee,
I agree that is possible a good work around for the problem and worth investigating, the z-index values need to start high and decrement for each data type down the page, this should allow for multiple image pickers to work correctly.
I do think that this is also something that needs addressing in the core product as it would be an issue for any datatype that had some kind of additional div that is shown outside of the bounds of the data type div.
I think I have a bit of a crazy day ahead, but if I get any time I'll try and look at the JQuery idea this afternoon / evening.
Best regards,
Chris
Guys, I too face problem as display distorted for the images in the image dropdown in IE9.
What is the ideal height and width of the images to be used for using in this control?
While adding images if the control can automatically resize the image that will help.
From my understanding this control is used for showing the dropdown with images.
We can only use the selected value(I mean the text from the image dropdown).
We cannot access the image used for display for in code.
Could you please correct me if I am wrong with my understanding of this control.?
Thanks
-Rajeev
Hi Lee,
How about just adding a conditional Css for IE 7 so that it renders the drop down correctly only for users under IE7?
//fuji
@Rajeev: As you know, the images displayed in the dropdown are the originals - they display the same size. You'd need to prepare your images to whatever dimensions you need before you upload them. (Maybe not ideal, but that's the way it currently works). The saved value is the associated text, not the image path/src. The data-type wasn't intended to pull that through ... but do feel free to raise a ticket on our CodePlex, we could add that functionality in future?
@Fuji: Wish it was that simple too! :-) Problem is that IE7 has issues with elements that are absolute positioned and z-indexes: read more about it here. The solution is to set the CSS for all parent elements to position:relative and have a lower z-index ... but that either requires an Umbraco core change, or some jQuery hacking!
So you cant actually hack it with css for only this bit by using?
Its possible to do that... but gets a little messy with the uComponents architecture. Hopefully, we'll have a fix for this soon. ;-)
Thanks again, Lee.
@Chris: Had a look at the icon dropdowns on the Document Type editor... this has the same problem in IE7. Looks like the workaround (fudge) here was to set the visible height of the dropdown so that it didn't overlap/underlap with the next property item panel. So this is very much an issue in the core.
Cheers, Lee.
@Chris: I wanted to get this issue nailed, so we can release v2.2 (very) soon. Added a fix in [changeset:80963], would you be able to test it please?
Thanks, Lee.
Guys, one more issue with the Image dropdown.
By default it is not selecting any value, but shows the first row in the dropdown.
Even if we specify this as a mandatory field, it does not throw any error while publishing.
Actually no value is selected and gives empty at runtime.
Thanks,
Rajeev
Hi Rajeev,
Would you be able to raise a ticket for these issues on our CodePlex, please?
http://ucomponents.codeplex.com/WorkItem/Create
It helps us keep track of the bugs/issues/features, etc.
Thanks, Lee.
http://ucomponents.codeplex.com/workitem/13968
Added but not specified the component. Please do that.
Thanks,
Rajeev
Thanks Rajeev, much appreciated - I'll fill in the gaps and assign it.
Cheers, Lee.
Hi All,
Just to let you know, I have updated the fix from Lee and changed it slightly so it should fix both the Image Dropdown and any other component that was suffering from this issue, as long as you have the latest build of uComponents from SVN it will now and a z-index to each of the property div's starting at 1000 and counting down, this means that any control like the image dropdown that was dropping behind the following div will now behave correctly and you should be able to have multiple drop downs on the same page and they should all work fine.
Thanks to Lee for helping try to solve this problem and ultimately point me in the right direction to solve it, great community effort :)
Cheers,
Chris
is working on a reply...