At the moment, I am working on a website that works with Wordpress and Elementor (latest versions). I'm trying to implement an iframe using an html widget in the Elementor editor. The iframe works via an external website link (of a client) and I would like the iframe to automatically adjust in height to the content of the iframe. However, I am currently not getting this to work with the code below. In the Elementor editor itself it looks good, but on the website itself it is barely visible (due to the limited height) and it does not work. I have tried the following codes as well: height="auto", height="100%", but they didn't work either.
Does anyone know how I can fix this, please? I did try some solutions on other topics, but these didn't work either (and I'm not that good at coding). That's why I created a new topic.
The code used:
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.2.11/iframeResizer.min.js"></script><script
type="text/javascript">iFrameResize({ inPageLinks: true },
'#externallinkname')</script><iframe id="externallinkname"
src="https:// externallink.com/"
width="100%" scrolling="no"></iframe>
- Note: The names of the following codes are changed, due clients privacy: #externallinkname, id="externallinkname", src="https:// externallink.com/"
UPDATE AT BOTTOM: I discovered a partial solution, but still not a total solution. So, I will leave my question up.
I have made a new webpage, and placed the hamburger menu on the top right of the screen, and hidden it off screen when not selected. The code is too lengthy to copy/paste here, but you can view source of my new page at this URL: https://ContractWithAmerica2.com
My problem is this: When I scroll up and down on my mobile device, and don't scroll "exactly" up/down, the screen slides to the left or right due to the extra content, (content is this: my hamburger menu which I hid to the right of the visible viewport).
Now, my desktop behaves: I was able to insert HTML CSS code that removes the scrollbar; however, on my smartphone, the scroll is not disabled-- and it is annoying to me (and to others).
Now, I found another webpage with HTML and CSS that, like my page, has a hamburger menu on top-right, so I thought I'd be "smart" and copy it. That page is at this URL:
https://www.WesternJournal.com
However, it uses a form of CSS that draws from a stylesheet, and yet even when I tried copying their stylesheet method, I was unable.
My request is for assistance in writing CSS directly into my page's HTML code (which makes my page more stable, as it will not need to send a "call" for a stylesheet), that will do this.
My HTML and CSS are, so far, good in making my page work-- except for this one flaw. Does anyone know the proper code to make my page "lock" and stop the left-right scrolling when my menu is hidden? Like the Western Journal website does? When scrolling on that page, it scrolls up/down ONLY-- and does not allow me to scroll to the left-right, exposing the hidden menu-- as does my page.
P.S.: I looked all over StackOverflow, but no answers prior given have fixed this problem for me, so I must ask de novo.
Thanks!
Gordon, new StackOverflow member!
UPDATE: Remember, when I said I discovered a partial solution at top? Here is my update:
Initially, I had this code:
<meta name="viewport" content="width=device-width,initial-scale=1.0">
But just earlier today saw some post some place with newer info, and I updated that section to this:
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
In other words, the newer code I found online had the "user-scalable=no" attribute, plus some code specific to Apple devices.
Plus, prior versions had this code:
<style>body{overflow-x: hidden;}</style>
But my newer version added a few more bells and whistles:
<style>body{overflow-x: hidden; position: relative; width: 100%;}</style>
When I ran the tests, however, it worked ok only on CHROME (both desktop and mobile device), where both the scrollbar disappeared, and the touch screen attempts to scroll "left-to-right" were finally stopped. (I.e., my menu, hidden off-screen, stayed hidden until clicked.)
My "desktop" OPERA browser worked ok, but, while my desktop MOZILLA FIREFOX hid the scroll bar (good), it still let me manually scroll (with the arrow keys). My mobile experience was even worse:
Both the SAMSUNG INTERNET BROWSER and my OPERA BROWSER on my smartphone (mobile device) allowed the page to scroll left-to-right, meaning users who scrolled "down," when reading would scroll to the left, exposing the hidden menu if they didn't scroll "exactly" top-to-bottom.
In other words, only GOOGLE'S CHROME worked ok on my mobile device.
Can anyone else weigh in?
URL: https://ContractWithAmerica2.com And: Mirror pages are https://GordonWatts.com/m.index.html and https://GordonWayneWatts.com/m.index.html
Call me old fashioned, but I like a "spare tire" (redundancy) on the Internet Highway, and so I cross-post to several mirrors.
Thank you if anyone can help me get it to work in ALL browsers!
Gordon Wayne Watts, FLORIDA
Screenshot of problem
I tried all possible viewport meta tags but nothing seems to be working.
Can anyone help me on this?
<meta name="viewport" content="width=device-width,initial-scale = 1.0">
Site is http://sival.dk/ . You can run on chrome iphone simulator. When you load the page you feel that the page is fit, but try scrolling through x position, you could see that the page is not fitted entirely in iphone
UPDATE: Thanks to Cory's answer. I finally found that the problem was not with meta tag, seems the problem was with the title involved in the page. See Marked answer for reference.
In cases like this, I usually use the chrome developer tools to look for any element whose padding or margin is making the page wider than the device width. In this case, it was your <h1 class="site-title">sival</h1>. See the screenshot below. Adding margin: 0 to the styles for that element (or fixing the element in another way) should solve your problem.
This image is not set to device-width cause the problem within your media queries.
<img src="http://sival.dk/wp-content/uploads/2015/09/Logo.png" width="450" height="168">
and this heading tag margin needed to be set.
<h1 class="site-title">sival</h1>
i have a problem with bootstrap 2.2.1 and have a big problems with my modals in IE10.
When the modal opens it appears in the right top corner and the most of it is cutted of.
See Screenshot.
This appears only in IE10.
Do you know why and can you help me?
I can't show you the site and link, because it's on a site where you need a account to use it.
EDIT - SOLUTION:
I found the solution! The modal loaded a php file and in this php file I loaded the header of the site again (the area). And that was the mistake. After deleting the inculde line every thing worked.
IE 10 seems to behave this way when allowed to render in "quirks" or "compatibility mode"; use this meta tag to prevent it:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
I have a fairly long page with the Facebook comments widget at the bottom. With this widget in place the page jumps to the bottom on loading in IE7 and IE8. Whenever I remove the widget the page loads normally. This doesn't happen on any other browser. Can anyone suggest any way to prevent this? I've tried appending the .fb-comments div and calling FB.XFBML.parse() on it on document ready, but the behaviour in this case is the same.
This is a Facebook bug. I think they are working on it. If you go to the developers area on FB is a thread discussing it.
Also occurs in IE9, no updates in the last weeks for my web applications, should be a facebook bug or IE bug