Forums
View unanswered posts | View active topics It is currently Wed Oct 01, 2014 10:24 pm



Reply to topic  [ 10 posts ] 
 Rounded corners on drop-down list 
Author Message

Joined: Thu Mar 10, 2011 2:28 pm
Posts: 1
Post Rounded corners on drop-down list
I'm having a problem using PIE to round the corners of the drop-down lists (html select tags) on my site in IE8. It actually rounds the corners like it is supposed to, but when I try to select an item from the list the list quickly disappears. When I click on the down arrow the list appears and stays until I move the cursor over any item in the list, then it disappears before I can actually click the item I want.

Has anyone encountered this before? Is there some kind of workaround?

Sample HTML:
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

Sample CSS:
select
{
position: relative;
background-color: #FBFFE5;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
behavior: url(PIE.htc);
}

select > option
{
background-color: #FBFFE5;
}


Thu Mar 10, 2011 2:57 pm
Profile

Joined: Mon Apr 04, 2011 11:47 am
Posts: 2
Post Re: Rounded corners on drop-down list
We are prepping for a release and trying to support ie9 and have found the exact same problem.

We're using Google Web Toolkit (GWT) which is not ie9 compatible, so we are rolling back to ie8 via:

Code:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />


No idea why this is happening but it is definitely caused by pie.htc as removing the library solves the problem.

One unexplicable thing we found in testing is that if you go to the location bar and enter

Code:
javascript:alert("hi");


...it fixes the problem.

In fact, running *any* javascript via the location bar fixes the problem.

Frustratingly, doing the same from the console or directly via js in the page does *not* work. :-(

If anyone has a solution to this, our listbox dropdown select would thank you infinito.

Note: For a live link showing this issue, see: https://perm-qa.reztrip.com/rt/paradise ... =b&node=ss


Mon Apr 04, 2011 11:52 am
Profile

Joined: Thu May 05, 2011 2:02 pm
Posts: 2
Post Re: Rounded corners on drop-down list
We are having the same problem, and it looks like the link you posted works now. If you figured something out set us know. Thanks.


Fri Jun 10, 2011 1:32 pm
Profile

Joined: Mon Apr 04, 2011 11:47 am
Posts: 2
Post Re: Rounded corners on drop-down list
So the reason the posted link is working now is because it is a more recent rev of our code.... which includes an upgrade to GWT 2.3, which does finally support ie9.... This means that we are able to re-include the css3 pie library and have it load *only* for ie8.

Sorry, not really a solution. Just an evolution. :-/


Mon Jun 13, 2011 7:32 am
Profile

Joined: Mon Jul 25, 2011 7:19 pm
Posts: 1
Post Re: Rounded corners on drop-down list
I've encountered the same problem with the latest version. The droplist disappears either immediately it displays, or when the mouse pointer first hovers over it.

I'm using IE9 and it looks like it only happens when Compatibility View is active. Maybe that's why it hasn't been widely noticed? Needs fixing though.

The best workaround I've found is to not style the <select> element at all with the behavior but instead to wrap it with a div or span that takes on these attributes. Then the droplist itself works as expected in with or without compatibility mode.


Tue Jul 26, 2011 12:59 am
Profile

Joined: Mon Sep 19, 2011 12:05 pm
Posts: 1
Post Re: Rounded corners on drop-down list
I was setting a background color on the select for a validation error and had the disappearing dropdown problem

I used this and it sems to work.
select.valErr
{
-pie-background: #FAE7EC
}


Mon Sep 19, 2011 12:08 pm
Profile

Joined: Thu Feb 09, 2012 7:39 am
Posts: 1
Post Re: Rounded corners on drop-down list
Can I add a me too on this topic? Any news or workarounds?

Cheers,

Steve


Thu Feb 09, 2012 7:40 am
Profile

Joined: Sun Apr 22, 2012 9:27 pm
Posts: 1
Post Re: Rounded corners on drop-down list
Small necro, but...

I am having this exact same issue and am wondering if anyone knows of a way to resolve it?
I am using PIE version 1.0 beta 5.

The curved borders looks great in IE8, but when you click on the <SELECT> element the drop down list quickly vanishes before you are able to choose an option.
I tried the compatibility mode, but it still produces the same behavior.

I've gone as far as commenting out anything related to mouse clicks and focus/blur in the PIE_uncompressed.htc file and tried that one instead of the compressed; and while it still looks fine the drop down list vanishes right after clicking on it.

Any thoughts as to what causes that behavior, or something else to try?

Thanks!


Sun Apr 22, 2012 9:49 pm
Profile

Joined: Mon Jun 04, 2012 10:55 am
Posts: 1
Post Re: Rounded corners on drop-down list
I am having this problem as well.

Jason, is there a solution to this by any chance? I love the library but this is VERY frustrating.


Mon Jun 04, 2012 11:01 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1443
Post Re: Rounded corners on drop-down list
I haven't tried this yet, but it's possible that the new -pie-track-active:false or -pie-track-hover:false properties might help with this. Sounds event-related.


Mon Jun 04, 2012 11:16 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 10 posts ] 

Who is online

Users browsing this forum: No registered users and 4 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.