Positioning of Ajax modal popups on smaller screens

In my Asp.net/C# web application, I have a modal popup that contains multiple placeholders. However, I am facing an issue when trying to access the modal popup on smaller screens like iPads or iPhones. The page only displays half of the modal popup, making the information at the top inaccessible. I have tried using overflow:auto; and various solutions such as Mobile ModalPopupExtender? but none of them have 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>
</asp:UpdatePanel>
<asp:Button ID="btnCancel" Height="30px" Width="160px" runat="server" Text="Cancel" />
</asp:Panel>
asp.netcssajax

Answer №1

@focus: I have implemented Jquery to attach ModalPopup to a button, and the code I used to check innerheight and add a class to my panel is as follows:

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

To implement this functionality, you need to include the above code in your JavaScript file and ensure it is called on ModalPopupExtender click event.

The PanelWithScroll class in CSS looks like this:

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

If you encounter width issues as well, you can check the width using a resource like and adjust the PanelWithScroll class accordingly.

Another approach is to check the page height on page load and if it's less than desired, apply the PanelWithScroll class to the pnlpopup Div. This presents a straightforward solution in my opinion.

Update:

Ensure to include the provided JavaScript in your HTML Code within the head section:

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

The $(document).ready function will execute only after the full rendering of your page, providing assistance on how to embed scripts in HTML (http://javascript.info/tutorial/adding-script-html).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Switch out one picture for another by hovering over it

Looking for a way to replace the holder-01-small.png image with one of the same dimensions on hover without altering the HTML code. Here is the code snippet: <div class="mix category-1"> <a href="img/holder-01-large.png" class="photo"> <i ...

htmlcsshoverpseudo-class

My attempt to incorporate an ajax loading gif into my website has been met with technical difficulties and is currently not functioning as

I am currently developing an uploader feature for my website located at To enhance user experience, I aim to display a loading animation in the form of a .gif image while the select box is being populated with subcategory options via an AJAX request. Bel ...

phphtmlajaxgifloader

Simple CSS and HTML trick for creating a seamless hide and hover effect

Every time I've attempted this task in the past, it has been straightforward. However, this time it's proving to be challenging. The goal is simple - have an image display a description when hovered over by a user. HTML: <div class="descript ...

htmlcssshow-hide

Customizing the appearance of Twitter Bootstrap based on the AngularJS input class $invalid

I'm struggling with getting error messages to display properly in my Bootstrap form when using AngularJS. I followed the instructions on this link: but I still can't figure out what I'm doing wrong. Any advice? Thanks <div class=" ...

javascriptcssangularjstwitter-bootstrap

Exporting a data grid view to an Excel file in ASP.NET

When running the export data grid view to Excel code, all the data is exported into the Excel sheet. However, I only want to export selected columns. How can I solve this issue? protected void btnexcel_Click1(object sender, EventArgs e) { Response.C ...

c#asp.net

The button can only be edited using Internet Explorer

My webpage features a button that displays correctly in Chrome, but the text inside the button gets cut off when viewed in IE (see image). Can you provide guidance on what might be causing this issue and how to resolve it? Bootstrap version 4.0.0 is also b ...

cssinternet-explorercross-browserbootstrap-4

Various settings in JQuery UI Slider

Does anyone know how to customize the steps in a jQuery UI slider? I want to set specific values as steps, like 0, 1200, 2000, 2200, and 3000. Any suggestions on how to achieve this? const rangeSliderInit = () => { const valueArray = [0, 400, 1000, 1 ...

javascriptjquerycssslider

"Utilizing the power of Angular 6's JSON pipe

Looking for a well-structured formatted JSON, but all I get is confusion and this strange image: Does anyone have any insights on what might be causing the issue? HTML <span style="font-weight: 500;">Payload Data: </span> <pre><co ...

htmlcssangulartypescript

Navbar optimization by eliminating unnecessary whitespace at the end

I'm working on a navigation bar that has four links. I need to get rid of the extra space to the left of "Projects" and to the right of "Contact." It seems like this spacing is part of the unordered list structure, rather than padding or margin. Chec ...

cssnavbarnav

What is the best way to use CSS to center two blocks with space in between them?

My goal is to achieve a specific design: I want two text blocks with some space in between them aligned around the midline of the page (refer to the image). I have experimented with the float property, as well as used margin and padding to create the gap ...

htmlcssalignment

Transferring PHP session variables from jQuery and Ajax to the PHP gratitude page

I've been mulling over this puzzle for quite some time now. My approach involves utilizing jQuery AJAX POST method to transmit form data using session variables from home.php to thankyou.php. Subsequently, the user is redirected (window.location.href ...

javascriptphpjqueryajaxsession

When printing a PDF, a div that is set to 100vh only takes up

After setting the div to be 100vh, I realized that when printing it only takes up half of the page. Adding media print did not make a difference, and even trying to set the height to 100% instead didn't work for PDFs. html, body { height: 100%; ...

htmlcsspdf

Can you explain the distinction between submitting a form through the ajax() method versus using <form action="xyz" method="POST"> to communicate with a servlet or PHP script?

Currently, I am exploring jQuery Mobile and implementing a basic form submission to a servlet using a straightforward method. However, after some research on Google, I discovered that most developers are opting for the Ajax method instead. I'm curious ...

ajaxjqueryjquery-mobileservlets

Transmit data including JSON details using AJAX

My ASP.NET c# page is set up to post form information using AJAX in JSON format. This includes data from text Texboxes, values of Dropdownlists, and more. In addition to sending this form data, I also need to include a file. I have successfully implement ...

c#asp.netjsonajax

Adding Space Before Bullet Points in HTML: A Quick Guide

Is there a way to add space before bullet points? My requirements are as follows: This is paragraph 1 The first text line The second text line This is paragraph 2 The first text line The second text line I would greatly appreciate any ...

htmlcss

The enhancement of clickable link padding

I'm having an issue with the padding around the link in my dropdown menu not being clickable. The text itself works fine when I hover over it, but the surrounding padding is inactive. I tried styling it as an inline-block as suggested, but that did no ...

csshyperlinkpadding

What is the best way to store a video file in a database?

Recently, I came across a task where I needed to insert a video in a database and display it using an HTML5 video control. Despite successfully saving the video in the database, I encountered an issue when trying to play the video. Upon investigating, I ...

asp.nethtmlvideo

Is there a way to modify the appearance of a block element and transmit a parameter to a PHP function?

It might seem like I'm overthinking things, but I am trying to achieve two goals with the HTML code provided. First, when a user selects an option, I want to toggle the display style of the leaderTable from hidden to visible if it meets certain criter ...

phpjavascriptajax

Having trouble interpreting the response using jQuery

Upon running my PHP script, I am receiving the following response. PHP: <?php $con = mysqli_connect("localhost","root","pass","products"); if(mysqli_connect_errno()) { echo "Failed to connect database, please check with your administrator. Error ...

phpjqueryajaxjson

Preventing div contents from shrinking with changing screen sizes

I am currently working on creating a portfolio website similar to this one. Check out the Website Here Typically, when the screen size is reduced to less than half of the full width, the content of a website tends to be hidden rather than shrinking. Howe ...

css