Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Chris Houston 535 posts 980 karma points MVP admin c-trib
    Jul 08, 2011 @ 13:28
    Chris Houston
    0

    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

  • Lee Kelleher 4020 posts 15802 karma points MVP 13x admin c-trib
    Jul 09, 2011 @ 16:38
    Lee Kelleher
    0

    Hi Chris,

    I'll take a look... hopefully it's a quick fix.

    Cheers, Lee.

  • Lee Kelleher 4020 posts 15802 karma points MVP 13x admin c-trib
    Jul 09, 2011 @ 17:37
    Lee Kelleher
    0

    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.

  • Lee Kelleher 4020 posts 15802 karma points MVP 13x admin c-trib
    Jul 11, 2011 @ 06:32
  • Chris Houston 535 posts 980 karma points MVP admin c-trib
    Jul 15, 2011 @ 13:42
    Chris Houston
    0

    Thanks for submitting the ticket Lee, I am going to see if I can fixes it today.

    Cheers, Chris

  • Chris Houston 535 posts 980 karma points MVP admin c-trib
    Jul 15, 2011 @ 17:15
    Chris Houston
    0

    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

  • Lee Kelleher 4020 posts 15802 karma points MVP 13x admin c-trib
    Jul 18, 2011 @ 11:26
    Lee Kelleher
    0

    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.

  • Chris Houston 535 posts 980 karma points MVP admin c-trib
    Jul 18, 2011 @ 12:35
    Chris Houston
    1

    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

  • Rajeev 126 posts 154 karma points
    Jul 20, 2011 @ 07:37
    Rajeev
    0

    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

  • Fuji Kusaka 2203 posts 4220 karma points
    Jul 20, 2011 @ 07:45
    Fuji Kusaka
    0

    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

  • Lee Kelleher 4020 posts 15802 karma points MVP 13x admin c-trib
    Jul 20, 2011 @ 07:58
    Lee Kelleher
    0

    @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!

  • Fuji Kusaka 2203 posts 4220 karma points
    Jul 20, 2011 @ 08:06
    Fuji Kusaka
    0

    So you cant actually hack it with css for only this bit by using?

    <!--[if gte IE 7]>
        <link rel="stylesheet" type="text/css" href="ie7.css" />
     <![endif]-->

     

  • Lee Kelleher 4020 posts 15802 karma points MVP 13x admin c-trib
    Jul 20, 2011 @ 08:09
    Lee Kelleher
    0

    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.

  • Lee Kelleher 4020 posts 15802 karma points MVP 13x admin c-trib
    Jul 20, 2011 @ 09:34
    Lee Kelleher
    0

    @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.

  • Lee Kelleher 4020 posts 15802 karma points MVP 13x admin c-trib
    Jul 20, 2011 @ 10:38
    Lee Kelleher
    0

    @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.

  • Rajeev 126 posts 154 karma points
    Jul 21, 2011 @ 15:53
    Rajeev
    0

    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

     

  • Lee Kelleher 4020 posts 15802 karma points MVP 13x admin c-trib
    Jul 21, 2011 @ 16:17
    Lee Kelleher
    0

    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.

  • Rajeev 126 posts 154 karma points
    Jul 21, 2011 @ 16:56
    Rajeev
    0

    http://ucomponents.codeplex.com/workitem/13968

    Added but not specified the component. Please do that.

    Thanks,

    Rajeev

  • Lee Kelleher 4020 posts 15802 karma points MVP 13x admin c-trib
    Jul 21, 2011 @ 16:59
    Lee Kelleher
    1

    Thanks Rajeev, much appreciated - I'll fill in the gaps and assign it.

    Cheers, Lee.

  • Chris Houston 535 posts 980 karma points MVP admin c-trib
    Jul 21, 2011 @ 22:08
    Chris Houston
    1

    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

Please Sign in or register to post replies

Write your reply to:

Draft