When viewing content in the IFrame in Internet Explorer 7 or with IE set to EmulateIE7 in Sharepoint, the display

I am encountering an issue when trying to embed my web application inside Sharepoint as a web part. Everything works smoothly on IE8, IE9, and Firefox. However, when I try to access the page using IE7, all I see is a blank (white) IFrame even though the inner content has loaded. Strangely, the same webapp functions perfectly when opened without the Iframe - even in IE7.

The problem persists with IE8/IE9 when using the META tag:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Additionally, I have noticed that clicking with the right mouse button on the white area allows me to view the source code of the page embedded in the IFrame.

This is how my IFrame is embedded:

<iframe title="WebApp" frameBorder="0" id="MSOPageViewerWebPart_WebPartWPQ2" style="z-index: 1000" name="MSOPageViewerWebPart_WebPartWPQ2" width="1200px" 
height="1200px" src="http://webapps/app1/beta.webapp.aspx?ContentAreaHeight=669px" ddf_src="http://webapps/app1/beta.webapp.aspx?ContentAreaHeight=669px"
<div class="UserGeneric">No IFRames supported.</div></iframe>

It doesn't seem to make a difference whether I manually embed the IFrame using the Content Editor web part or the Page Viewer webpart in Sharepoint.

If anyone has any insights or solutions, please help me out!

htmlcsssharepoint

Answer №1

Modified the CSS style on the IFrame page:

body {
  width: 100%; <= deleted this line
}

After making this change, everything was functioning properly once more.

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

Vanishing Tooltip following an implementation of the backdrop-filter

I'm having an issue with the blur effect on my background image. Although it works well, my tooltips also end up being blurred behind the divs: https://i.stack.imgur.com/BMdh4.png Is there a way to ensure that my tooltips stay on top of the subseque ...

javascripthtmlcss

Semantic HTML and unambiguous: both

We are making an effort to enhance the semantics of our HTML, and one element that stands out in our code related to presentation is <div class="clear"></div> For instance, if we consider the following semantic HTML structure: <div class= ...

htmlcsssemanticssemantic-markup

The outcome is not displayed in the appropriate section of the text

There seems to be an issue as the console is not displaying the response to the input, such as "the answer is correct" or "the answer is either empty or incorrect". <!DOCTYPE html> <html lang="en"> <head> <title>Hello!</ ...

javascripthtml

When using NVDA, the close button is being read multiple times, whereas in JAWS it is being read correctly

Here is the code for a close button within a modal pop-up: <h2 class="sc-ejdXBC byjYiM MuiTypography-root MuiTypography-h6 sc-EoWXQ kOYWJk MuiDialogTitle-root" id="popupTitle"> Default Pop-UP Title <button class="sc-dm ...

htmlmaterial-uiaccessibilityjaws-screen-readernvda

Extracting information from JSON and presenting it in a structured table format

I've hit a wall with this JavaScript issue on my website. I'm trying to convert API JSON data into a table, and it's working fine when the data is on separate lines. However, when I introduce nested arrays in the JSON data, everything ends u ...

javascripthtmlarraysjsonknockout.js

Adjusting the width of images using jQuery Mobile or jqTouch

I am looking to incorporate a static footer image with 5 navigation buttons into my mobile website. You can view the image here. The default color for the icons should be blue, but I want the yellow icon to appear only when hovered over or in an active sta ...

iphonecssmobile-websitejqtouchjquery-mobile

Enhance the appearance of a tree node by applying style to the "li" element

Here is a tree structure that I am working with - http://jsfiddle.net/anirbankundu/wzEBW/ This tree may contain any number of nodes. The requirement is that when a user hovers over a single node, the background color of the node should change. This can be ...

jquerycss

Tips on Eliminating the Gap Between Input Fields in JQuery Mobile

Currently utilizing Cordova and JQuery Mobile for my project. I am in the process of creating a settings page with multiple input fields. My goal is to eliminate the spacing between the rows, but I have been unsuccessful in finding a solution. https://i. ...

javascripthtmlcsscordovajquery-mobile

What's the name of the auto-triggered dropdown menu feature?

Visit Amazon's official website Description: Within the 'Shop by Department' section- A drop-down menu that remains visible without requiring you to hover over it. However, when the browser is in a non-full-screen mode, the menu disappears ...

jquerycssmenu

bootstrap 4.5 navbar spanning the entire width of the screen

I'm facing an issue with creating a basic navbar. It's not extending the full width of my page and not responding to color classes either. Here's the code for my header: <body> <div class="container-fluid"> <header> ...

htmlbootstrap-4responsive

Add navigation bar to every page - using HTML and CSS

Is there a way to smoothly insert HTML codes into all website pages without compromising the CSS design? I've attempted using but found it messy. Is there a simpler method to insert the HTML file into other files? The HTML file I'm trying to lo ...

htmlcss

Access the website by logging in with idhttp

I'm attempting to log in to a website using Delphi / Indy. Currently, I only have a button (used to send a password / username) that calls this procedure. procedure TForm5.Login(name: string; Pass: string); var UserID :string; Password :string; res : ...

htmldelphidelphi-xe2indyindy10

Incorporating an image into the <option> element in Django

Hey there, I have a question for you all. Is it possible to add a specific image to each option in Django? <select id="sTypes2" name="current_tier" class="form-control input-lg c-square"> <option value="Silver I">Silver I</opt ...

pythondjangohtml

Using CSS to target specific attributes on standalone elements

Ever since I stumbled upon AMCSS, I have been utilizing standalone attribute selectors. Recently, I made the switch from Compass to cssnext, only to discover that syntax highlighting appears to be malfunctioning in Atom and other platforms where I tested i ...

htmlcsssyntax-highlightingatom-editor

The rating and comment section is failing to adapt to smaller screens, creating a terrible user experience

I am a beginner with Sass and CSS. I wanted to create a rating and comment section which looks fine on a laptop screen, but appears off on smaller screens. It seems like the layout might be incorrect or maybe I didn't follow grid layout guidelines pro ...

cssbootstrap-4sass

Get the download link for myFileName.myFileType from the UIWebView

I need my UIwebview to initiate a download of a file when its link is clicked. Currently, it just displays the content of the file, which is in JSON format. Despite registering the mimetype and trying to add download="target.myfiletype" to the anchor t ...

htmliosobjective-cuiwebviewmime-types

Modify the CSS preferences using an object that has been obtained

After the user selects options from a form, I am trying to update my CSS using the settings received from an object. However, I am unsure of how to implement this layout change. Here is a glimpse of my template: div class="btn btn-primary" ng-click= ...

javascriptcssangularjsbackground

Why isn't the Full Calendar loading automatically within a Bootstrap Tab?

I have been working on a travel website and incorporated a bootstrap tab feature. In the first tab, I have some content, while in the second tab, I've added a full calendar with JavaScript. Everything seems to be functioning correctly when the full ca ...

javascriptjqueryhtmlcssfullcalendar

The functionality of the jQuery .click method appears to be malfunctioning within the Bootstrap

It seems like my JQuery.click event is not functioning as expected when paired with the corresponding button. Any ideas on what might be causing this issue? Here's the HTML CODE snippet: <button id="jan7" type="button" class="btn btn-dark btn-sm"& ...

javascriptjqueryhtmlcssbootstrap-4

Issue with input type="number" functionality in firefox

I have encountered an issue with the input type "number" in HTML. It appears perfectly fine in Chrome version 66, but not in Firefox version 60. The differences are visible below: Display in Google Chrome: https://i.sstatic.net/Ew5Uu.png Display in Mozi ...

htmlcssformsfirefoxnumbers