Showing posts with label Ajax Control Toolkit. Show all posts
Showing posts with label Ajax Control Toolkit. Show all posts

Thursday, April 28, 2011

Ajax Collapsible Panel / Modal Popup Flicker on pageload fix

The Modal Popup Extender and the Collapsible Panel Extender sometimes cause the screen to flicker on page load. To solve for this do the following.

Modal Popup
Set the style property display to 'none'


Collapsible Panel Extender
Make sure the extender has SuppressPostBack="True", and on the panel itself set the Height="0px" and a style property overflow:hidden;







Ajax Modal Popup Extender

Problem/Challenge:
Call on a Modal Popup represented in the Master Page's code behind from a content page in order to display the Magic 8 Ball project I created using the techniques from week 2 fundamentals of C# at Centriq. To do this I originally just re-created the entire project on the Project page. However I did not like having such a large amount of duplicate code.

Solution:
Using the Master Find Control Method allows full use of any control on the master page on all content pages with full functionality.

protected void magic8BallMPE_Click( object sender, EventArgs e) 
{ 
   ModalPopupExtender mpe8Ball = 
          Master .FindControl("mpe8Ball") as ModalPopupExtender;
   mpe8Ball.Show(); 
}


Ajax Collapsible Panel Right Border

Problem/Challenge:
When using the ajax control toolkit, I first added a ajax collapsible panel for my Social Media/Extra tab at the top of my website I noticed an unusal behavior of the panel's 'border-right' not showing up when expanded.

Solution:
To solve this I was able to wrap the collapsible panel in a 'wrapper div' with the border-right property on this instead. I used this solution again on my Theme Switch collapsible panel when it displayed similar behavior with the 'border-right' property not showing up in any browser.