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

Can the returned XML data be alerted from an AJAX call?

Is there a way to alert the data returned as xml from this ajax request? The data is being pulled from a URL and converted to XML. Any suggestions on how to achieve this? Also, can I specify a node to alert once I am able to retrieve the data? function ...

jqueryajax

Occasional TypeError when receiving JSONP response using jQuery .ajax()

Occasionally, I encounter an error message stating Uncaught TypeError: undefined is not a function when processing the JSONP response from my jQuery .ajax() call. The JSON is returned successfully, but sometimes this error occurs during the reading process ...

javascriptjqueryajaxjson

Putting a Pause on CSS Transition using jQuery

I am attempting to delay a CSS transition for an element by using a delay function, with an additional 0.2s applied to make it slide 0.2s later than the initial delay of the main wrapper. I am applying a class to give it a transition effect to slide from r ...

javascriptjqueryhtmlcss

Guide to inserting text into an html element upon clicking an ASP:Button

In my code, there is a DIV that holds some text. Accompanying the text is an asp:Button. When this button is clicked, I aim to access and save this particular text. Nonetheless, it seems that once the button is clicked, the content of the DIV resets - lik ...

c#javascriptjqueryasp.nethtml

Tips for Implementing Multi-Level/Nested in Ajax Requests

I am currently developing a user-friendly web application with intuitive multi-level options that loads new content without the need to refresh the entire page. This is how my structure looks: /index.php /schools.html /colleges.html Within schools.html, ...

jquerycssajax

Steps to load data using ajax-php with specific parameters

I have a situation where I need to trigger a JavaScript function when a link is clicked. <input type='hidden' id='name'> <a href='#' onclick='getUsers(1)'>Click here</a> function getUsers(id){ $( ...

javascriptphpjqueryajax

Navigating through the website has become quite challenging due to the malfunctioning navigation bar. Instead

I recently completed a website and designed an awesome navigation bar in a separate file. However, when I combined them together, the navigation bar disappeared. The background of my "list" div should be filled in and larger, but it's not working as e ...

htmlcssuinavigationbar

Does GIF animation operate on the same thread as JavaScript in all popular web browsers?

When my AJAX request is in progress, an animated GIF is displayed to show activity. However, I have noticed that the animation freezes while the response from the request is being processed by a script that heavily updates the DOM. After researching this ...

javascriptajaxanimated-gif

What is the best way to loop through an array and apply classes to each element separately?

I'm currently working on a unique jQuery plugin that is designed to create dynamic lists based on any data provided. The first 6 items in the list will always remain constant, regardless of the input data. When I say constant, I mean that although th ...

jquerycss

Mixing elements from the entire webpage

My goal is to create a cohesive look for the entire page by applying a background gradient to all layers. #myDIV { width: 400px; height: 400px; background-image: linear-gradient(-45deg, rgba(251, 234, 188, 1) 0%, rgba(0, 114, 136, 1) 100%); } .bl ...

htmlcss

Is there a way to position an image to the left of the container in Jinja templating while floating it?

I am currently working on a project using Flask that utilizes Jinja templates. In my layout.html file, there is a grey colored container that extends to all child pages. I have a specific page that extends the layout.html where I want to place an image flo ...

htmlcssflaskjinja2

Ways to direct to a specific div upon clicking an anchor tag following a page reload?

<a href="#goto">Link 1</a> <div id="goto">DIV</div> Whenever I click on the anchor tag, my webpage reloads and displays a new div with the ID of goto. This div was previously hidden but is now visible at the bottom of the page. I ...

javascriptjqueryhtmlcss

Iframe not functioning properly on Internet Explorer versions 8-11 when using WordPress

I'm having trouble getting my WordPress video to display when using an iframe. When I try to view it in Internet Explorer, the video automatically loads in Windows Media Player instead of playing through the iframe. The video files are local mp4s and ...

htmlcsswordpressiframe

Focus on styling a single theader element within a jQuery Data Table with CSS

Struggling to work with a dynamic Jquery Data Table that has 10 table headers. I am having difficulty adding a class or an Id in the code to the specific th element with the title 'Unused'. In my .css file, I attempted: [title~= Unused] { ba ...

jquerycssdatatablecss-selectors

Is there a way for me to remove an uploaded image from the system

Here is an example of my HTML code: <input type='file' multiple/> <?php for($i=0;$i<5; $i++) { ?> <div class="img-container" id="box<?php echo $i ?>"> <button style="display: none;" type="submit" cl ...

javascriptphpjqueryhtmlcss

Improving user experience with CodeIgniter's form validation powered by AJAX and jQuery

I am currently attempting to validate certain fields using AJAX in CodeIgniter, but I'm having some difficulty getting it to work correctly. This is the AJAX code snippet that I have: var timeout = null; $(document).ready(function(){ $('. ...

phpjqueryajaxcodeigniter

The ajax call cannot be processed because the request method 'POST' is not supported

I am currently encountering an issue with making an ajax call to my spring controller for creating some data in the database. The code for the ajax call looks like this: function sendDataToController(param1, param2, index1, index2, dataType) { $.ajax( ...

jqueryajaxspring-mvc

Unable to invoke the Spring controller while using ajax

I am facing an issue while using Ajax with Spring. My requirement is to filter a list of results based on the region selected from a drop-down or the store name entered on the screen. To achieve this, I thought of using Ajax. However, I am unable to call ...

ajaxspringurlmodel-view-controllercontroller

The checkbox is displayed as selected after being clicked in conjunction with another checkbox

In the tree structure, there are checkboxes that behave strangely when clicked. I have already read a similar discussion here. The problem I am encountering is that when I click on an item, it gets checked but the console does not show it as checked immed ...

javascriptjqueryhtmlcsscheckbox

Create a dynamic image positioned alongside text specifically designed for mobile devices

One of my challenges involves implementing a responsive image in Bootstrap (3.3.7): <div class="col-sm-2 text-center"> <img class="img-responsive center-block " src="img/1.png" style="max-width: <p>I would like to include some gua ...

csstwitter-bootstraplayout