Forums
View unanswered posts | View active topics It is currently Fri May 24, 2013 11:18 am



Reply to topic  [ 8 posts ] 
 CSS3 Pie in ASP.NET - rounded corners lost on postback 
Author Message

Joined: Mon Aug 01, 2011 7:12 am
Posts: 1
Post CSS3 Pie in ASP.NET - rounded corners lost on postback
Hi all,

First of all, I'd like to say a big thanks to the developers of CSS3 pie - it has made my development so much easier!

I do have an issue however. I use an UpdatePanel in ASP.NET, which can be viewed as a cheap way to have asynchronous postbacks in a webpage - not very elegant as it essentially is a full post back, but it works. My CSS class is like the following:

Code:
border: 1px solid #122541;
   border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    behaviour: url('../Content/Scripts/PIE.htc');


The problem is, when the page is postback the rounded corners are lost on the older browsers, so I'm assuming the .htc is not being fired on postback.

Has anyone come across a similar issue, and how did you resolve/work around it?


Mon Aug 01, 2011 7:25 am
Profile

Joined: Fri Apr 08, 2011 11:08 am
Posts: 6
Post Re: CSS3 Pie in ASP.NET - rounded corners lost on postback
I'm having a similar problem, and have not been able to solve it, unfortunately.

I have a grid with buttons in the first column of every row. My stylesheet attaches the PIE.htc behavior directly to the <input type="submit">, <input type="button"> and <button> elements, and all buttons on my pages render correctly, except for the ones on the grid (which is empty when the page is first opened, and populated after the user clicks on a button, which triggers the UpdatePanel's asynchronous postback). If I remove the UpdatePanel and let the full postback occur, then the buttons are rendered as they should, but with the UpdatePanel they are not.

Looking at the page using the IE Developer Toolbar, I can see the <css3-container> element that contains the actual background and borders as I've set them on my stylesheet -- in fact, if I manually change the <css3-container>'s z-index attribute from -1 to 1 after the UpdatePanel inserts the grid into the page, it then renders the button frame as it should, but on top of the button's text. It looks like the dynamic elements are being successfully hooked by PIE, but there is something that's preventing the <css3-container> from being shown.

Does anyone have any idea why this could be happening?

Thanks,
Cobra.


Wed Oct 19, 2011 1:49 pm
Profile

Joined: Tue Oct 25, 2011 3:53 pm
Posts: 1
Post Re: CSS3 Pie in ASP.NET - rounded corners lost on postback
I ran into this same problem and figured out a solution, it's not elegant but it works. I'm not 100% why this happens with IE but when the postback happens it seems to forget some CSS elements (why I have no idea). I used javascript to detect a postback and if there is one then reapply the CSS to the page and that should fix it.

Code:
function pageLoad(sender, args) {
       if (args.get_isPartialLoad()) {
       
        //Set your CSS
        $('#css').attr("href", "styles/your.css");

       }
}


Then in the .aspx page I would have in the <head>

Code:
<link id="css" rel="stylesheet" type="text/css" href="#" />


Like I said it's not elegant or ideal but it gets the job done. Hopefully this works for you!


Tue Oct 25, 2011 4:01 pm
Profile

Joined: Fri Apr 08, 2011 11:08 am
Posts: 6
Post Re: CSS3 Pie in ASP.NET - rounded corners lost on postback
Thanks for the tip, Corbisblue, but it didn't work, unfortunately.

I was able to reference the stylesheet tag by ID and "reload" the CSS file, but it didn't solve the problem. The PIE-specific style attributes (in my case, rounded borders and gradient background) were still not being shown.

Jason, do you have any insights into this matter?

Thanks again,
Cobra.


Wed Oct 26, 2011 12:26 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1396
Post Re: CSS3 Pie in ASP.NET - rounded corners lost on postback
Sorry, I'm not familiar with ASP.NET works or how it puts contents in the page. If you can provide a standalone testcase demonstrating the problem then I'll be happy to take a look.


Wed Oct 26, 2011 3:56 pm
Profile

Joined: Fri Apr 08, 2011 11:08 am
Posts: 6
Post Re: CSS3 Pie in ASP.NET - rounded corners lost on postback
Hi, Jason.

The test case for this issue, as requested: http://207.61.175.213/PIETest/UpdatePanelTC.aspx. There is a somewhat-detailed explanation of the issue on the page itself.

Also, while you're at it, I have another test case ready for a related (albeit different) issue I ran into while working with PIE and AJAX (more specifically, with the AjaxControlToolkit library, although I'm not entirely sure the issue in this case relates to AJAX at all). Here's the address to this one: http://207.61.175.213/PIETest/AccordionTC.aspx. As with the previous one, further details on the issue are provided on the test case page itself.

FYI, I'm using the PIE 1.0beta5, and all my tests were run on Internet Explorer 8 (have not tested against IE6, 7 or 9).

Thanks in advance for your time!

Cheers,
Cobra.


Thu Oct 27, 2011 11:14 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1396
Post Re: CSS3 Pie in ASP.NET - rounded corners lost on postback
Thanks Cobra, I've opened tickets https://github.com/lojjic/PIE/issues/173 and https://github.com/lojjic/PIE/issues/174 for your testcases.

FYI the second and third issues described in the UpdatePanel testcase appear to be simple z-index issues. Give the buttons position:relative, and give the tabs a z-index that will bring them above the panel border. http://css3pie.com/documentation/known-issues/#z-index


Fri Oct 28, 2011 11:15 am
Profile

Joined: Fri Apr 08, 2011 11:08 am
Posts: 6
Post Re: CSS3 Pie in ASP.NET - rounded corners lost on postback
Thanks for the quick response, Jason.

Sorry for completely forgetting about the position: relative / z-index fix -- I had seen it on the FAQ, and it actually helped me with some other issues I ran into, but for some reason it never occurred to me to try it for the buttons and tabs as well. I tried it on my local copy of the Test Cases, and it fixed both problems. Let me know if you'd like me to update the published Test Cases, to make sure they focus on the actual issues only.

Thanks again,
Cobra.


Fri Oct 28, 2011 3:33 pm
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 8 posts ] 

Who is online

Users browsing this forum: Bing [Bot] and 1 guest


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.