Remove Scroll bar from Iframe tag - html

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

Website elements reposition viewed through safari, works on other browsers

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;
}

Override a specific css class only for Safari browser

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
}
}

Hide Scrollbar IFRAME 100%

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;
}

"scrollbar-width: none;" not working in Firefox 71 to hide scrollbars while allowing scrolling

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;
}

HTML5 Video Controls hiding in Chrome and Safari but not in Firefox

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>