Monday, August 29, 2011

Adding Animation to the AutoCompleteExtender

.Net Framework LogoImage via WikipediaAfter reading numerous articles relating to the AutoCompleteExtender, I was able to use CSS to set the overflow property of the ul that comprises the drop-down selector to get the browser to render a vertical scroll bar, making it easier to look through a long list.
My struggle was to get the list to shrink backup up after the item was selected and not sit on top of other elements below.
I tried using javascript on the OnClientItemSelected event of the extender to set the ul to a low zIndex, but this only partially succeeded since the ul would never produce an event I could find to bring it back to the top of all elements on subsequent picks.
I also tried setting the height on the fly, but only ended up with the same thing as before, no event to expand it back out again.
Then I found a couple of clues on the internet that pointed to using the Animations XML beyond what I was using it for, which was simply to add 'glitz' to the picker.
What I needed was the following, commenting out the height property in my CSS:
                       
                          
                          
                              
                              
                              
                              
                              
                              
                              
                              
                          
                          
                              
                                  
                                  
                              
                          
                          
                  

Enhanced by Zemanta

No comments: