Click here to Skip to main content
Click here to Skip to main content

Centering a SliderExtender Control in ASP.NET WebForms

, 23 Apr 2013
Rate this:
Please Sign up or sign in to vote.
Centering a SliderExtender control in ASP.NET WebForms.

I came across this question on the forums from antrea, who had a fairly straight-forward request to center a SliderExtender control within a <div> element. I thought that the answer would be one of the usual go-to answers of using margin: 0 auto; or align=”center” on the parent <div> element and game over.

Nope. In fact the eventual solution felt so strange and hackish that I simply had to post about it.

99 Centered Elements and a Slider Ain’t One

Everything was centered within the <div> with the exception of the Slider. So I dusted off an old WebForms project to test this out myself and threw together a very basic example with basically every method out there to handle centering the <div> and it’s Slider child :

<div style="text-align: center; width: 300px; margin: 0 auto;" align='center'>
    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <asp:TextBox ID="TextBox1" runat="server" ></asp:TextBox>
    <ajaxToolkit:SliderExtender ID="TextBox1_SliderExtender" 
              runat="server" TargetControlID="TextBox1">
    </ajaxToolkit:SliderExtender>
</div>
The slider is not properly centered in this image.

Initial Centering Attempt using CSS margin and alignment properties.

Solution (albeit an unorthodox one)

After tinkering with the element within my browsers Development Tools, I noticed that styles were being dynamically added to it that made altering any of them quite a pain. The primary style in question was :

ajax__slider_h_rail

when I attempted to change the RailCssStyle property of the SliderExtender control to a custom style that I had created to center it :

<style type='text/css'> .center { margin: 0 auto; } </style>
<ajaxToolkit:SliderExtender ID="SliderExtender" runat="server" TargetControlID="Example" RailCssStyle="center" ></ajaxToolkit:SliderExtender>
If you didn't see the first Slider, this one is worse.

This second attempt to use a CSS style to handle the centering ignored the native Slider styles and made things worse.

But that completely removed all of the dynamically generated styles (although it was at least centered). So I figured that the best method to handle this would be to actually use the dynamically generated class name AND the centered class that was created to apply the dynamic styles and to center the slider within it’s container by using :

<ajaxToolkit:SliderExtender ID="SliderExtender1" 
        runat="server" 
        TargetControlID="TextBox1" 
        RailCssClass="ajax__slider_h_rail centered">
</ajaxToolkit:SliderExtender>

Sweet Centered Victory

If you still can't see this, just know it looks correct.

Applying both the generated CSS style from the Slider and the CSS centering style properly centered the control.

Although this is a unorthodox method of handling this issue, it will work to center your slider and possibly get you out of a bind if you find yourself in such as precarious situation. You can find the original question on the ASP.NET Forums here.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Rion Williams
Software Developer (Senior)
United States United States
An experienced Software Developer and Graphic Designer with an extensive knowledge of object-oriented programming, software architecture, design methodologies and database design principles. Specializing in Microsoft Technologies and focused on leveraging a strong technical background and a creative skill-set to create meaningful and successful applications.
 
Well versed in all aspects of the software development life-cycle and passionate about embracing emerging development technologies and standards, building intuitive interfaces and providing clean, maintainable solutions for even the most complex of problems.
Follow on   Twitter

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web03 | 2.8.140709.1 | Last Updated 23 Apr 2013
Article Copyright 2013 by Rion Williams
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid