Search code examples
c#asp.nethtmlcssajaxcontroltoolkit

DropShadowExtender and RoundedCornersExtender not playing nicely with ModalPopupExtender

I have the following panel

<asp:Panel ID="pnlSessionController" runat="server" style="position: relative; display: block; padding:15px; height: 150px; width: 300px; background-color: white;">
   <div style="position:absolute; top:0; right: 0;">
      <asp:ImageButton ID="btnActiveSessionCancel" runat="server" ImageUrl="~/images/controls/exit.png" />
   </div>
   <div style="margin-left: auto; margin-right: auto; width: 270px; text-align: center;">
     <asp:Image ID="imgStatus" runat="server" ImageUrl="~/images/status/current.png" /><br />
     <asp:Label ID="lblInmateStationName" runat="server"></asp:Label><span><--></span><asp:Label ID="lblVisitorStationName" runat="server"></asp:Label><br />
     <span>Time Remaining: </span><asp:Label ID="lblTimeRemaining" runat="server" ForeColor="Red"></asp:Label>
   </div>
   <div style="padding-left: 20px; padding-top: 15px;">           
          <div style="float: left; padding-right: 10px;">
             <asp:ImageButton ID="imgBtnSessionRestart" runat="server" ImageUrl="~/images/controls/play.png" OnClick="btnRestart_click" />
          </div>
          <div style="float: left; padding-right: 10px;">
             <asp:ImageButton ID="imgBtnSessionPause" runat="server" ImageUrl="~/images/controls/pause.png" OnClick="btnPause_click" />
          </div>          
          <div style="float: left; padding-right: 10px;">
            <asp:ImageButton ID="imgBtnSessionRecord" runat="server" ImageUrl="~/images/controls/record_off.png" />
          </div>
          <div style="float: left; padding-right: 10px;">
            <asp:ImageButton ID="imgBtnSessionStop" runat="server" ImageUrl="~/images/controls/stop.png" OnClick="btnEnd_click" />
          </div>       
          <div style="float: left; padding-right: 10px;">
            <asp:Image ID="imgBtnSessionMonitor" runat="server" Height="27px" Width="27px" ImageUrl="images/controls/monitor.png" onclick="monitorSesion()"/>
          </div>
          <div style="float: left;">
            <asp:ImageButton ID="imgBtnMessage" runat="server" ImageUrl="~/images/controls/message.png"  OnClick="btnMessage_click"/>
          </div>           
   </div>       
 </asp:Panel>

Because this information is going to be bound server side depending on which control in a datalist is selected I have:

 <cc1:ModalPopupExtender ID="mpeActiveSession" runat="server" TargetControlID="hackForPopup" DropShadow="false" PopupControlID="pnlSessionController" 
                 CancelControlID="btnActiveSessionCancel" OnCancelScript="ActiveSessionPopupCanceled()"></cc1:ModalPopupExtender>

I then call mpeActiveSession.Show() in the code-behind after I bind the data.

OK, I had a drop shadow specified in the control but that is where the story begins. I finish this guy up and it is working beautifully, and the damn customer complains that the pop-ups don't look suave enough. What they really meant was that the pop-ups don't look enough like Mac Windows. Anyways, they requested rounded corners and for the drop shadow to be less opaque and rounded. So, I say ok, hopefully I can just add the following.

 <cc1:RoundedCornersExtender ID="rceSessionController" TargetControlID="pnlSessionController" Radius="10" runat="server" Corners="All" BorderColor="Gray"></cc1:RoundedCornersExtender>
 <cc1:DropShadowExtender ID="dsSessionController" runat="server" Opacity=".7" TrackPosition="true" TargetControlID="pnlSessionController"></cc1:DropShadowExtender>

Now it doesn't render correctly. One of the divs gets the rounded corner, the position on the page is wrong, and all of the controls and text are missing. Any ideas? I am also open to a better approach to styling the popup.

Solution

  • Ok the RoundedCornersExtender and the DropShadowExtender are obsolesced by CSS3. All you need is border-radius and box-shadow.

    Anyhow, the problem with the extenders was that my parent div used relative positioning. It doesn't matter now however, because the CSS3 stuff looks much better and is easier to implement anyways.