locked
Ajax Control Popup control extender's Positioning Problem in Chrome. RRS feed

  • Question

  • User912480169 posted

    Hi everyone,

    I am using an image in a grid's templete field. When I click on the image then I show a popup with position "Bottom" using ajax popup control. In IE and FF it works fine (show at the immediate bottom of image) but in chrome when I click on image it shows popup at the top of the window (not at the immediate bottom of image). How can I show in chrome too? any idea??? Related code is given below;

    <

    td width="6%" align

    ="right">

    <asp:Image ID="imgGear" runat="server" ImageUrl="~/images/Gear.png" onclick="GetSelected(event);" Style="cursor: pointer"

    />

    <cc1:PopupControlExtender ID="pceGear" runat="server" TargetControlID="imgGear" BehaviorID="pceGear" PopupControlID="pnlGear" Position="Bottom" CommitProperty

    ="value">

    </cc1:PopupControlExtender

    >

    <asp:Panel ID="pnlGear" runat="server" CssClass="PopupBackground" Style="display: none" Width

    ="150px">

    <table width="100%" cellpadding="5px" cellspacing

    ="0px">

    <tr

    >

    <td class

    ="sel">

    Select an option:

    </td

    >

    </tr

    >

    <tr

    >

    <td class

    ="sel">

    <asp:HyperLink ID="hlEditPosted" runat="server" Width="100%" Text="Edit This Job" CssClass="black11"></asp:HyperLink><br

    />

    <asp:ImageButton ID="btnEditPosted" runat="server" ImageUrl="~/images/editBlue.png" OnClick="btnEditPosted_Click" Visible="False"

    />

    </td

    >

    </tr

    >

    <tr

    >

    <td class

    ="sel">

    <asp:ImageButton ID="btnCopyJob1" runat="server" ImageUrl="~/images/copyBlue.png" OnClick="btnCopyJob_Click" Visible="false"

    />

    <asp:LinkButton ID="btnCopyJob" runat="server" Width="100%" CssClass="black11" OnClick="btnCopyJob_Click">Create Copy</asp:LinkButton

    >

    </td

    >

    </tr

    >

    <tr

    >

    <td class

    ="sel">

    <asp:HyperLink ID="hlDeletePosted" Width="100%" runat="server" CssClass="black11" Style="cursor: pointer">Delete Job</asp:HyperLink

    >

    <asp:ImageButton ID="btnDeletePosted1" runat="server" ImageUrl="~/images/deleteGray.png" OnClick="btnDeletePosted_Click" Visible="false"

    />

    </td

    >

    </tr

    >

    <tr

    >

    <td class

    ="sel">

    <asp:HyperLink ID="hlRepostJob" runat="server" CssClass="black11" Style="cursor: pointer" Width="100%">Repost Job</asp:HyperLink

    >

    <asp:LinkButton ID="btnRepostJob" CssClass="black11" Text="Repost Job" Style="cursor: pointer; display: none;" runat="server" Width="100%"

    />

    </td

    >

    </tr

    >

    </table

    >

    </asp:Panel

    >

    </td

    >

    Monday, March 5, 2012 8:31 AM

Answers

  • User912480169 posted

    Hi, All this issue is now resolved by making my own custom control by using jQuery and css. Popup control extender does not give me required flexibility. Thanks all :)

    Atiq. 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, March 16, 2012 7:08 AM

All replies

  • User78336405 posted

    Hi,

    Please debug with ctrl+shift+J to debug in Chrome. Any more question, please feel free to reply.

    Wednesday, March 7, 2012 3:20 AM
  • User912480169 posted

    Thanks, Song-Tian, I will debug in chrome and give you response.

    Friday, March 9, 2012 1:23 AM
  • User912480169 posted
    This is shown below; when debug;
    <div id="ctl00_cphMain_PostedJobs1_gvJobDetails_ctl03_pnlGear" class="PopupBackground" style="width: 150px; visibility: visible; ; left: 1079px; top: 665px; z-index: 1000; ">
    </div>
    Change top can get the right position... help...
    Monday, March 12, 2012 9:09 AM
  • User-937439341 posted

     try using following css in popupcontrol and panel ....

    in popupcontrol

    BackgroundCssClass='modalBackground'

    and in panel which should appear CssClass="ModalWindow"

    and modify its size if it doesnt fit what you require in style tag

    <style>
     .modalBackground { background-color:#CCCCFF; filter:alpha(opacity=40); opacity:0.5; }
    .ModalWindow { border: solid1px#c0c0c0; background:#f0f0f0; padding: 0px10px10px10px; ; top:-1000px; }
    </style>

    Monday, March 12, 2012 10:05 AM
  • User912480169 posted

    Sorry Boss, I can not get yet :)  It does not any effect... Thank for reply.

    Thursday, March 15, 2012 10:02 AM
  • User912480169 posted

    Hi, All this issue is now resolved by making my own custom control by using jQuery and css. Popup control extender does not give me required flexibility. Thanks all :)

    Atiq. 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, March 16, 2012 7:08 AM