"Encountering issues with ModalPopupExtender in Internet Explorer, while it functions properly in

Currently, I am encountering a critical issue while implementing ajaxmodalpopupextender on my webpage. The functionality operates smoothly in Firefox with an appealing appearance, however, it encounters display problems in IE where it appears to the side and the background does not align as intended.

I have attempted numerous solutions such as:

  1. Utilizing CSS
  2. Placing the panel within a div and configuring

    div style="position:absolute;left:140;top:100;"
    
  3. Adjusting the page's Doctype to xhtml

Unfortunately, none of these strategies have resolved the issue. Any assistance would be greatly appreciated.

The current Doctype in use is as follows: -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

I am presently stuck and seeking help.

Please helpppppppppp.

This modification will only be visible to you until peer reviewed.

May I inquire about the version of Internet Explorer you are testing this on? It would also be helpful if you could share your code snippet.

Below is the GridView section: -

<GridView id= "Grd" runat="server" AutoGenerateColumns="false" CssClass="GridStyle"    
           HeaderStyle-Font-Size="Small" Width="960" Visible="false">   
          <Columns>             

          'Columns goes here             
          <asp:TemplateField HeaderText="Action" HeaderStyle-Width="310px" ItemStyle-HorizontalAlign="Left">   
          <ItemTemplate>   
              <asp:Button ID="btnDelete" runat="server" Text="Delete" OnClick="btnDelete_Click"    
              CommandArgument='<%#Eval("intHireEnquiryID") %>' />   
              <asp:Button ID="btnPlace" runat="server" Text="Place" OnClick="btnPlace_Click"     
              CommandArgument='<%#Eval("intHireEnquiryID") %>' />   

          </ItemTemplate>   
          </asp:TemplateField>   
          </Columns>             
          </GridView>           

Here is the ModalPopup content: -

<asp:UpdatePanel ID="upPopupPnl" runat="server" UpdateMode="Conditional">  
            <ContentTemplate>              
            <asp:Panel runat="server" ID="pnlPopup" Width="300px" Height="300px" BackColor="Azure"   
            style="overflow:auto;border-color:Black;border-style:solid;border-width:2px;">  
            <table><tr><td colspan="2" style="width:300px;">  
            <asp:RadioButtonList ID="rbl1" runat="server">  
            </asp:RadioButtonList>            
            </td></tr>  
            <tr><td style="text-align:center;">  
            <asp:Button ID="btnPlacePopup" runat="server" Text="Place" Width="100" Height="35" Font-Bold="true"   
            OnClick="btnPlacePopup_Click" />  
            </td>  
            <td style="text-align:center;">  
            <asp:Button ID="btnCancel" runat="server" Text="Cancel" Width="100" Height="35" Font-Bold="true" />  
            </td></tr>  
            </table>  
            </asp:Panel>  
            <asp:Button ID="btnDummy" runat="server" Text="Not Display" style="display:none;"/>  
            <ajaxtk:ModalPopupExtender ID="actPopup1" runat="server" TargetControlID="btnDummy" BackgroundCssClass="modalBackground"    
            PopupControlID="pnlPopup" CancelControlID="btnCancel">  
            </ajaxtk:ModalPopupExtender>   
            </ContentTemplate>  
            </asp:UpdatePanel>  

Referencing the Css class: -

.modalBackground   
{   
  background-color:#B3B3CC;   
  opacity:0.5;  
} 

Code behind: -

dim intHireEnquiryIDas integer   
Protected Sub btnPlace_Click(ByVal sender As Object, ByVal e As System.EventArgs)  
        intHireEnquiryID = CType(sender, Button).CommandArgument  
        Dim EXP As New Exception  
        Dim params(0) As SqlParameter  
        params(0) = New SqlParameter("@intHireEnquiryID", intHireEnquiryID)  
        Dim DS As New DataSet  
        DS = execQuery("spAgent_Get_Assigned_Workers", executionType.SPExecuteForDS, EXP, params)  
        If DS.Tables(0).Rows.Count > 0 Then  
            rbl1.DataSource = DS  
            rbl1.DataTextField = "WorkerDetail"  
            rbl1.DataValueField = "intWorkerID"  
            rbl1.DataBind()              
        End If  
        upPopupPnl.Update()  
        actPopup1.Show()  
    End Sub  

While the functionality works flawlessly in FireFox, the popup fails to render at the center in IE. Additionally, the background does not align correctly as specified. At this point, I am completely stuck and would appreciate any assistance. Thank you in advance.

Answer №1

I successfully resolved the issue by removing unnecessary comments on the page, such as:

<!--headersonly


Page Directives. Please dont go away with DW templates


headersonly//-->

<!--<%@ Register Src="~/uc/uc_pager.ascx" TagName="pager" TagPrefix="uc1" %> -->

After removing those comments, the page began functioning properly in Internet Explorer as well.

Does anyone have insights into why these comments were causing issues?

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

Manually update the DOM rather than depending on React's reconciliation process

Creating a React component that wraps a complex rendering API is my current goal. This specific API has the ability to render a plot into HTML+SVG and also offers functionality to update the plot with new data efficiently. I am keen on utilizing this updat ...

What is the best way to bind the value of total when working with forms and the bind method?

I am working on a form where I need to pass the value of total. Regarding the total: I have successfully passed the value of the cart, which is an array. const [total, setTotal] = useState<number | undefined>(undefined); const calculateTotal = () ...

The request to upload an image to Cloudinary using AngularJS is being blocked due to the origin http://localhost.com:8000 not being allowed by Access-Control-Allow-Origin

I've been attempting to upload images to Cloudinary through my Angular controller without using any libraries. The POST requests are unsigned, and interestingly, I was successful when I tested it with jQuery on a static HTML page. Here is the code sn ...

The variable __dirname has not been defined

Can anyone explain why my Google Cloud Run instance is unable to recognize the __dirname variable? My expressjs server contains the following code: import path from 'path'; const App = express() .get('/*', (_req, res) => { ...

Protractor - I am looking to optimize my IF ELSE statement for better dryness, if it is feasible

How can I optimize this code to follow the D.R.Y principle? If the id invite-user tag is visible in the user's profile, the user can request to play a game by clicking on it. Otherwise, a new random user will be selected until the id invite-user is di ...

Ways to move the cursor to the search field after the placeholder text

I'm working on a Vue project with a small app featuring an input type search. The issue I'm facing is that the cursor appears at the beginning of the input, whereas I want it to appear after the placeholder text. How can I make this adjustment? ...

IE seeks to acquire the retrieved JSON data through Django download

I am facing an issue on my Django site where a specific page handles AJAX-based file uploads. The file uploader being used is Valum's file uploader and it returns JSON information as the response. However, the way Django returns this JSON is causing s ...

Using jQuery to retrieve the text content of child elements

Struggling to extract the text of child elements using jQuery. I've been at this for a couple of days and can't seem to make it work. If anyone could spare a moment to review, I would greatly appreciate it! SCRIPT: function generateRemoveSect ...

Attempting to assign parameters in $routeChangeError testing is unsuccessful

Currently, I am in the process of testing the code snippet below: $rootScope.$on('$routeChangeError', function(event, current, previous, rejection) { if(rejection === 'Unauthenticated') { $location.path('/'); ...

The application unexpectedly closes upon receiving a notification while using @react-native-firebase/messaging

I'm currently working on setting up notifications using @react-native-firebase/messaging in a React Native app. I'm able to retrieve the FCM token, but the app crashes when a notification is received. Here's the error I found in Crashlytics ...

Retrieving data from a dynamic array using jQuery

Within my code, I am working with an array that contains IDs of div elements (specifically, the IDs of all child div elements within a parent div with the ID of #area): jQuery.fn.getIdArray = function () { var ret = []; $('[id]', this).each(fu ...

Tips for incorporating jQuery UI into Angular 6

No matter how many methods I have tried from StackOverflow, I cannot seem to get jquery-ui to work in my angular 6 component. Here's what I've attempted: I went ahead and ran npm install jquery jquery-ui to install both jquery and jquery-ui. ...

Is it possible for me to include &x&y&z in my Sass code?

When working with Sass, I have the following code: asdf{ &-b&-c {font-size: 16px;} } And I want the generated CSS to look like this: asdf.asdf-b.asdf-c{ font-size: 16px; } Is it possible to achieve this in Sass without having to repeat th ...

Issue with Material UI: Style overrides for nested components are not being applied

Having recently delved into CSS in JS techniques, I've hit a roadblock when it comes to styling components in Material UI, particularly with overriding styles of nested elements. Although I have been referring to the official documentation, I still fi ...

Issues with logging functionality in my React Native application

I am currently facing an issue with my React Native app running on the Android Studio emulator. The logging does not appear in my terminal or in the active remote debugger in Chrome when debugging is enabled. When I attempt to log a simple text in one of m ...

What is the process for assigning a value to the body in a div element?

Within a div, there is a body element structured like this: <div id = "TextBox1"> <iframe id = "TextBox1_1"> #document <html> <head></head> <body></body> </html> </iframe> </div> I have attempte ...

Getting started with React Native project

Just dipping my toes into the world of React Native and looking for recommendations on the best starter kit/generator to kickstart my projects. Tried out "create-react-native-app" already, but curious if there are any other generators or kits out there tha ...

The CSS isn't functioning correctly in the HTML file as it is in the CSS file

When I added this code directly to my html file, it worked perfectly: <style type="text/css" media="screen"> #headerimg { display: block; background-image: url('/Content/images/epp/ebweblogo1.gif'); background- ...

Tips for placing a div within a flex item

Struggling to get it right, here's my query: This is how my DOM looks: <div id="content"> <div class="listitem"> <img class="thumbnail"/> <div class="option_icon"></div> ...

I seem to be facing a challenge with retrieving results in my app when using mongoose - what could be causing this issue

mongoose.connect('mongodb://localhost:27017/codealong'); When I attempt to connect to MongoDB and post data, the process is successful but I do not receive any results in my browser. Instead, all I see is an empty square bracket [ ]. These are ...