CODEWITHSUNDEEP
asp.netcssajax
focus
focus

Reputation: 171

Ajax modal popup position on small screens

I have the following modal popup on a Asp.net/C# web application. The modal popup holds multiple placeholders. My problem occurs when I am trying to access the modal popup on small screens or on ipad/iphone/ipod screens. The page display the half of the modal popup so the information in the top are inaccessible. I have used overflow:auto;/ the following solution: Mobile ModalPopupExtender? and many others but doesn’t solved my problem.

.modalBackground { background-color:Gray; filter:alpha(opacity=70); opacity:0.7; } .modalPopup { background-color:#ffffdd; border-width:3px; border-style:solid; border-color:Gray; padding:3px; width:250px; } 

<asp:Panel ID="Panel1" runat="server"></asp:Panel>
    <asp:Button  ID="btnShowPopup" runat="server" style="display:none" /> 

              <asp:ModalPopupExtender ID="ModalPopupExtender1" PopupDragHandleControlID="Panel1" RepositionMode="None" runat="server" PopupControlID="pnlpopup" 
TargetControlID="btnShowPopup" CancelControlID="btnCancel"
    DropShadow="true"   
 BackgroundCssClass="modalBackground">

        </asp:ModalPopupExtender>

        <asp:Panel ID="pnlpopup" runat="server" BackColor="LightGray" style="display:none;"
             CssClass="modalPopup" Width="650px" >
               <asp:UpdatePanel ID="UpdatePanel3" UpdateMode="Conditional" runat="server">
                                <ContentTemplate>
</ContentTemplate>
                                </asp:UpdatePanel>
                      <asp:Button ID="btnCancel" Height="30px" Width="160px" runat="server" Text="Cancel" />
                     </asp:Panel>

Upvotes: 0

Views: 1970

Answers (1)

Jay
Jay

Reputation: 1039

@focus: As I am using Jquery to attach ModalPopup to a button but code I used to check innerheight and then add class to my panel is:

var height = window.innerHeight;
if (height < 1000) {        
    $("#pnlpopup").addClass("PanelWithScroll");       
}

You need to add above code in javascript and this need to be called on ModalPopupExtender click.

PanelWithScroll is a css class:

.PanelWithScroll{
height:250px;
overflow:scroll;
overflow-x:hidden;
}

Similarly, if you have problem with width too, you can check width too (http://responsejs.com/labs/dimensions/) and change class PanelWithScroll

Other thing you can do is check page height on page_load and if its less than what you want, add this class to pnlpopup Div. (This is easy solution IMO)

Update:

Add given javascript in your HTML Code in head section

$(document).ready(function () {
var height = window.innerHeight;
if (height < 1000) {        
    $("#pnlpopup").addClass("PanelWithScroll");       
   }
}

$(document).ready will only run after your page has wholly rendered. This may also help if you need help on how to put script in html (http://javascript.info/tutorial/adding-script-html)

Upvotes: 2

Related Questions