Roundedcornersextender padding and margin problem

Well, using RoundCornerExtender became a headache for me when i had to use it all over the page on different sections using a Panel (Div). Each Panel had to have padding to keep a distance between the content and the border of the Panel and margin to keep reasonable distance between two Panels.

Anyway, giving padding or margin really ruined the idea and the entire Panel was distorted. I am not sure if there is a quicker method to fix it but there is a work around and that is buy using 3 Panels.

There should be one outer panel and two panels inside that outer one. Give margin to the most outer Panel and padding to the inner most Panel. but here is the catch, Roundedcornersextender has to be associated with the middle Panel and give middle panel 0 padding and 0 margin so that it doesn’t inherit any styling from its parent panel (margin).

Outer and inner most Panels can be replaced with the client side div (easy to handle with javascript due to static Ids)

Its a small workaround, i hope it helps 🙂

HTML:

<div id=”divOuter” class=”round_outer_panel”>

     

  <asp:Panel ID=”divRound” runat=”server” CssClass=”round_middle_panel”>

 

        <div id=”divContent” class=”round_inner_panel”>

                content goes here..

        </div>

 

  </asp:Panel>

 

  <cc1:RoundedCornersExtender ID=”RoundedCornersExtender2″ runat=”server” Radius=”4″ TargetControlID=”divRound”></cc1:RoundedCornersExtender>

</div>

CSS:

.round_outer_panel

{   

    margin: 5px 5px 5px 0px;   

    width: 100%;

}

 

.round_middle_panel

{   

    padding: 0px;   

    margin: 0px;

    width: 98%;

}

 

.round_inner_panel

{   

    padding: 10px 20px 10px 20px;            

    width: 90%;

}

Cheers –

 

---

2 Steps Solutions 
Re-engineering your business