I want to use an iframe on a website and use this code:
<iframe src="https://dispatchcenter.com/widgets/tall/" width="100%" height="auto" marginheight="0" frameborder="0" border="0" scrolling="no"></iframe>
But the scrolling bar still shows. If I made anything wrong?
Can anyone help me to remove the scroll bar?
First give class to i frame and try this in css,
For Chrome, Safari and Opera:
.example::-webkit-scrollbar {
display: none;
}
For IE and Edge:
.example {
-ms-overflow-style: none;
}
For Firefox:
.example {
scrollbar-width: none;
}
It seems you cannot.
Tested in Chrome and FX.
Chrome hides the body one, but not the iFrame one
body {
background-color: teal;
}
iframe {
height: 2000px;
}
.hidescrollbar {
-ms-overflow-style: none;
/* Internet Explorer 10+ */
scrollbar-width: none;
/* Firefox */
}
.hidescrollbar::-webkit-scrollbar {
display: none;
/* Safari, Chrome Edge */
}
<body class="hidescrollbar"><!-- does not help in firefox in the fiddle -->
<iframe class="hidescrollbar" src="javascript:'<body class=hidescrollbar><div style=height:2500px>Hello</div></body>'"></iframe>
</body>
If the page is from the same server or a server with CORS enabled, use a div instead and insert using AJAX or via the server
Related
Links below are accurate and match up with attached images. Reproduction is possible as described below.
I am developing a website using HTML, CSS, and JavaScript: https://github.com/nkozlo3/PortfolioWebsite.git
Website: https://nkozlo3.github.io/PortfolioWebsite/
The website looks correct on Chrome, Firefox, and Microsoft Edge. Also on laptops of different sizes: Chrome view 1 Microsoft Edge view 1
Firefox view is the same.
But when viewed through Safari, the elements reposition themselves like so:
Safari view 1
To reproduce the problem simply visit the website on Safari through the above link or pull the code from my GitHub (link above) and run it through Safari.
I tried putting this wrapper around the body of my HTML
<div id="wrapper" style="margin-left: auto; margin-right: auto; width: 960px">
and adding this meta tag
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
I was expecting this to force the content to stay in the correct spots across devices and websites, but it did not solve the issue on Safari.
I also tried adding the below reset.css file to my style.css file to normalize across different browsers. This also did not solve the issue on Safari:
/***
The new CSS reset - version 1.8.2 (last updated 23.12.2022)
GitHub page: https://github.com/elad2412/the-new-css-reset
***/
/*
Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
- The "symbol *" part is to solve Firefox SVG sprite bug
*/
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
all: unset;
display: revert;
}
/* Preferred box-sizing value */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Reapply the pointer cursor for anchor tags */
a, button {
cursor: revert;
}
/* Remove list styles (bullets/numbers) */
ol, ul, menu {
list-style: none;
}
/* For images to not be able to exceed their container */
img {
max-inline-size: 100%;
max-block-size: 100%;
}
/* removes spacing between cells in tables */
table {
border-collapse: collapse;
}
/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
input, textarea {
-webkit-user-select: auto;
}
/* revert the 'white-space' property for textarea elements on Safari */
textarea {
white-space: revert;
}
/* minimum style to allow to style meter element */
meter {
-webkit-appearance: revert;
appearance: revert;
}
/* preformatted text - use only for this feature */
pre {
all: revert;
}
/* reset default text opacity of input placeholder */
::placeholder {
color: unset;
}
/* remove default dot (•) sign */
::marker {
content: "";
}
/* fix the feature of 'hidden' attribute.
display:revert; revert to element instead of attribute */
:where([hidden]) {
display: none;
}
/* revert for bug in Chromium browsers
- fix for the content editable attribute will work properly.
- webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
:where([contenteditable]:not([contenteditable="false"])) {
-moz-user-modify: read-write;
-webkit-user-modify: read-write;
overflow-wrap: break-word;
-webkit-line-break: after-white-space;
-webkit-user-select: auto;
}
/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable="true"]) {
-webkit-user-drag: element;
}
/* Revert Modal native behavior */
:where(dialog:modal) {
all: revert;
}
Is there a way to override a css for only Safari browser?
I am using Safari version 15.1 but looking to be able to target any version.
Tried the following via codepen. But it does not override in Safari.
.myClass {
background-color: grey;
color: red;
width: 2000px;
height: 50px;
}
#media not all and (min-resolution:.001dpcm)
{ #supports (-webkit-appearance:none) {
.safari_only {
.myClass {
background-color: yellow;
color: green;
width: 2000px;
height: 50px;
}
}
}}
<html>
<body>
<div class="myClass">
Sample 1
</div>
</body>
</html>
Seen examples such as following explaining safari overrides.
But these are not overriding a css class.
is there a css hack for safari only NOT chrome?
How do I add a css line ONLY for Safari
CSS hack for Safari ONLY
https://solvit.io/bcf61b6
-webkit-appearance is (luckily or not) also supported by Firefox and Edge as mentioned in the mozilla documentation.
Only thing I can imagine to work is to use JavaScript to target the user agent:
function detectBrowser() {
if (navigator.userAgent.includes("Safari")) {
// your code here
}
}
first of all, I have read all the related topics created and none has worked for me.
I have this iframe 100% of the width and height of the screen
<iframe src="https://site.test" frameborder="0" id="iframe" style="display: block; overflow: hidden; border: none; height: 100vh; width: 100vw;"></iframe>
I tried this and it doesn't work for me
iframe { overflow:hidden; }
But it does not work. Be careful, I need to hide them, not disable them, so
scrolling ="no"
It does not serve me.
you can edit your code. remove display:block in inline css.
#iframe{
scrollbar-width: none;
-ms-overflow-style: none;
}
If you have access to the iframe then use these line of codes inside the iframe page CSS:
/* Works for Chrome */
::-webkit-scrollbar{width:0}
And
/* For Firefox and Microsoft Edge or IE */
html{scrollbar-width:none;-ms-overflow-style:none;}
how to?
a {
position: fixed;
overflow-y: hidden;
top: 0;
left: 0;
}
According to all the answers on how to hide scrollbars while allowing scrolling, the standard approach is
.hidescrollbar {
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
}
.hidescrollbar::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
But I tried this in Firefox 71 and the style scrollbar-width: none; (which is meant for Firefox) doesn't work. In FF 71 I see the scrollbars show up when the viewport is exceeded.
Something has changed (since FF66+?) and this poster has also raised this issue. His solution is to make the FF scrollbar transparent. But it still takes up space, whereas I need to hide it completely.
Are there any solutions for the latest versions of FF to replace scrollbar-width: none;?
Adding this snippet to both html and body works on Chrome and Firefox!
html, body {
overflow-y: scroll;
scrollbar-width: none;
}
body::-webkit-scrollbar {
width: 0;
height: 0;
}
Chrome version: 87.0.4280.88
Firefox version: 84.0.1
my solution
/* Works on Chrome Version 91.0.4472.106 (Official Build) snap (64-bit), Edge, and Safari */
*::-webkit-scrollbar {
width: 0px;
}
/* firefox is the end
working in version Version 87.0 (64-bit) */
body {
overflow-y: scroll;
scrollbar-width: none;
}
react
"react": "^17.0.2",
"react-dom": "^17.0.2",
Try the below code by hiding the scrollbar by setting its width and background values:
/* make scrollbar transparent */
::-webkit-scrollbar {
width: 0;
background: transparent;
}
.container {
/* IE 10+ */
-ms-overflow-style: none;
/* Firefox */
scrollbar-width: none;
}
.container::-webkit-scrollbar {
/* Safari and Chrome */
display: none;
}
I'm having an issue with HTML 5 Video controls which can be viewed at:
http://www.filmsbyben.com/projects/beannchor/
In Chrome and Safari it displays correctly with no player controls and a large play button allowing the video to play. Whenever it is viewed in Firefox however the video controls display.
I have the following code added to the CSS which was required for controls to not display but has not worked for Firefox:
video::-webkit-media-controls-panel {
display: none;
-webkit-appearance: none;
}
video::-webkit-media-controls-play-button {
display: none;
-webkit-appearance: none;
}
video::-webkit-media-controls-start-playback-button {
display: none;
-webkit-appearance: none
}
video::-webkit-media-controls {
display: none;
-webkit-appearance: none;
}
I have also have added controls="false" to the video tag with no luck in relation to Firefox.
Any help would be greatly appreciated.
Remove controls attributes for video tag like this:
<video onended="videoEnded(this)" poster="http://www.filmsbyben.com/wp-content/uploads/2016/05/Beannchor-1.jpg" class="full-video video-button-fade" id="video-button-fade">
<source onended="videoEnded(this)" type="video/mp4" poster="http://www.filmsbyben.com/wp-content/uploads/2016/05/Beannchor-1.jpg" src="https://player.vimeo.com/external/133027081.hd.mp4?s=6e831cbf174dc8d972293b3275a3b34711904df8&profile_id=113"></source>
Your browser does not support the video tag.
</video>