I applied Overflow:hidden to <body> and <html> tags to stop scrolling of page when popup element is clicked this property working fine for me in almost every browser but not in Safari I googled for this solution but cannot find a solution to this so please someone help me in solving this thanks in advance
Could you try adding the overflow to the Body and the HTML tag?
html,
body {
overflow: hidden;
}
Related
So basically as the title suggests. I have a react-native-webview component in my app and I want it to show a SoundCloud player via the SoundCloud widget. I also want to use the available methods exposed by the widget API (for example getDuration), add listeners to events, etc. I have tried 2 approaches to accomplish this, but each approach ends with a different issue that I haven't been able to resolve.
Option 1:
The source prop that I pass to the WebView is a static HTML string:
<html>
<head>
<script src="https://w.soundcloud.com/player/api.js"></script>
</head>
<body>
<iframe
id="sound-cloud-iframe"
src="${finalUri}"
>
</iframe>
</body>
</html>
That works well with the API and everything, but I can't seem to make it look good on-screen. It looks like this:
The red border marks the WebView component. I want the video to take up that entire space, which I can do with setting the width & height attributes of the iframe to 100%. The problem is, that when I do that, the elements inside the iframe retain their size (e.g the track/artist name, the progress bar at the bottom, etc). See here:
If I could somehow make it all scale by the same proportions, that would be amazing. Injecting JS scripts that scale each and every element individually seems like a bad solution.
Option 2:
The source prop that I pass to the WebView is a SoundCloud link, for example:
source={{uri: https://w.soundcloud.com/player/?visual=true&url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F94546771&show_artwork=true}}
That makes the video player look just right:
But, it won't allow me to use the API exposed by SoundCloud. The reason is that, as mentioned in their API reference, there needs to be some iframe element that I need to to pass into SC.Widget in order to be able to use all the methods and listeners that I need. There is no iframe here! The HTML content that renders inside the WebView is actually the exact inner document that would render inside the iframe if I used the static HTML that I put in Option 1. If I could make the API work like that somehow, that would be amazing.
So, basically, I'm wondering which option presents the more-easily-solved issue, if they're solvable at all. Any help would be much appreciated.
Solved, used this static HTML:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://w.soundcloud.com/player/api.js"></script>
</head>
<body>
<iframe
id="sound-cloud-iframe"
src="${finalUri}"
scrolling="no"
style="width: 100%; height: 100%;"
>
</iframe>
</body>
</html>
The meta tag was the key to success here (https://www.w3schools.com/css/css_rwd_viewport.asp)
On IE11, when there is a modal opened or a fixed element, the PDF's preview on just passed over all the content.
I tried to z-index etc but nothing seems to work, it works well on all other browsers.
Is there a solution only in CSS/HTML ?
Here's a example (only bugs on IE)
I try to check your sample code and find that you are using object tag to display the PDF which is not working in IE 11.
I suggest you to try to use Iframe to display the PDF in IE 11.
You can replace the object tag with code below may help you to solve your issue.
<div id="pdf">
<iframe src="https://www.vousnousils.fr/casden/pdf/id00264.pdf" style="width: 100%; height: 100%;" frameborder="0" scrolling="no">
<p>It appears your web browser doesn't support iframes.</p>
</iframe>
</div>
When using the Split button dropdowns component inside a panel the options is not showing, I tried playing with the z-index but cant get the options to show above the panel edge.
Here is a plunker to demonstrate the problem: http://plnkr.co/edit/3tLsR3?p=preview
I tried setting the overflow: visible; suggested here https://stackoverflow.com/a/11963047/1719181 but the dropdown still not showing.
Is there some other css or javascript I can apply to help?
For future reference, I ran into this issue and solved it by applying the overflow rule on the .panel class instead of .collapse.in:
.panel-group .panel
{
overflow: visible;
}
Working fork here: http://plnkr.co/edit/due3dHqQkeSDtkBqnfuW?p=preview
Delete this div and it works fine:
<div class="panel-group" id="accordion" style="z-index: -1;">
I haven't found an answer yet, but I can suggest going with the "dropup" until a fix is found. I've messed around with both CSS and the bootstrap source and came up with nothing.
Maybe someone out there can fill me in on whether I've encountered an odd edge case Safari bug or there was something that I missed in my CSS.
Basically, the landing page of my site (http://www.seanmichael.me/test/kodiak/) is not showing the set background (it's just showing a white background) only in Safari (6.0.5). I was surprised by this because I have used similar full-page background images with this type of css and never encountered this issue. The code is set on the body element as seen below:
body {
background: url("img/landing-bg.jpg") #2c5277 no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I linted my css and had no errors, so I spent substantial time messing around with the CSS in dev tools to find a solution. Oddly enough, the edit that fixed my issue was setting a background-color property on the html element. I'm happy it works, but am still confused as to why this might happen. Please let me know if you have an explanation.
Thank You,
Sean
After having the same issue occur on another client site, I was able to figure out what the issue is. I'm still not sure if this is a bug in Safari, but the problem is as follows:
When using the _'s (underscores) WordPress starter theme and Modernizr together, the default css in the theme is putting a clearfix on the html element itself (not on purpose). For some reason setting the pseudo elements (before and after) of the html element in Safari to display table causes the html element itself to overlay everything on the page (which is set to white by default). You can check out the ticket here https://github.com/Automattic/_s/issues/212 on the github page for the _'s theme.
ive been working on a page builder and have run into this double quote problem.
div id="set" style="color:black;font-size:12px"
document.getElementById('set').style.backgroundImage="url('editor.png')"
or
document.getElementById('set').style.backgroundImage="url(editor.png)"
This sets in firefox and IE
div id="set" style="url("editor.png");color:black;font-size:12px"
When The page is saved and reloaded the double quotes break up the style.
Does anyone know a work around for this problem?
i think problem is here - url("editor.png")
<div id="set" style="url("editor.png");color:black;font-size:12px">
try this
<div id="set" style="background-image :url('editor.png');color:black;font-size:12px">