I'm trying to make iFrame adaptive according to window size. I almost done but in phone mode it's breaking, no idea why. I used a lot of examples about how to align iFrame, but no one worked well. Also, a space what you can see on screenshot below doesn't appears in html or css, and it seems like this space is out of body or html, at all. Any ideas what could that be? I'm using asp.net core web application with razor pages. iFrame is inside div tag what's inside main tag
Here's my css code
.AdaptiveIframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-height: 100%;
}
.AdaptiveIframe {
position: relative;
padding-bottom: 100%;
height: 100%;
width: 100%;
}
html
<main role="main">
<div class="AdaptiveIframe">
<iframe frameborder="0">Oops! Your browser does not support iframe.</iframe>
</div>
#RenderBody()
</main>
I've suddenly found an answer. Here's my css code. But I'm welcome any suggestions if there's still anything to fix.
.AdaptiveIframe iframe {
position: absolute;
top: 0;
left: 0;
width: 150%;
height: 150%;
}
.AdaptiveIframe {
position: relative;
padding-bottom: 150%;
}
Related
I am using embed tag to return a pdf document. How can i make the pdf document responsive to screen without using height and width properties for embed tag?
This is what i tried so far but it doesnt display the pdf correctly. Please check the code on codepen link below:
https://codepen.io/Nick1212/pen/LePKWw
HTML:
<div>
<embed src='https://gradcollege.okstate.edu/sites/default/files/PDF_linking' />
</div>
CSS:
.pdf-embed {
position: absolute;
top: 0;
bottom: 0;
display: block;
height: 100%;
width: 100%
padding: 0;
overflow: hidden;
}
I'd also like to know if iframe tag is a better solution for this.
UPDATE: Please check the codepen link. But pdf doesnt change on changing screen size. I could make the pdf bigger but Pdf stays same size.
.responsive {
position: relative;
padding-bottom: 56.2%;
height: 0;
margin: 10px 0;
overflow: hidden;
}
.responsive embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
I'm looking for a HTML & CSS way to display this embed video as a 75vh height hero background.
For now, the iFrame keep his width: 100% and his height: 75vh but the images in itselves aren't covering the whole header width.
Actually, I need it to behave like a background-size: cover property.
Here is a quick attached jsfiddle to illustrate this issue, best way to see it is in a new tab.
https://jsfiddle.net/wollsale/9yrvLy72/
PS : I know there is a loads of articles talking about that kind of problem, but I didn't found a solution that works for me.
body {
background: #aaa;
margin: 0;
padding: 0;
height: 2000px;
}
body {
background: #aaa;
margin: 0;
padding: 0;
height: 2000px;
}
header {
background: #ddd;
height: 75vh;
width: 100%;
}
.video__wrapper {
position: relative; padding-bottom: 53.25%; /* 16:9 */ padding-top: 25px;
}
.video__inner {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
min-height: 100%;
}
<body>
<header>
<iframe src="https://www.youtube.com/embed/w7Ap0k7qp2k?autoplay=1&loop=0&rel=0&showinfo=0&controls=0&autohide=1" frameborder="0" class="video__inner"></iframe>
</header>
<main></main>
</body>
EDIT
This article explain how to use HTML & CSS only to kind of "crop" a video in order to make it covering to whole viewport.
https://fvsch.com/code/video-background/
See it in action with this great codepen
https://codepen.io/cvn/pen/WbXEoX?q=youtube+object+fit&limit=all&type=type-pens
This article explain how to use HTML & CSS only to kind of "crop" a video in order to make it covering to whole viewport.
https://fvsch.com/code/video-background/
See it in action with this great codepen
https://codepen.io/cvn/pen/WbXEoX?q=youtube+object+fit&limit=all&type=type-pens
I have the following setup:
HTML
<div>
<img src="https://placehold.it/300x300" />
</div>
CSS
div
{
position: absolute;
top: 0;
right: 0;
height: 100%;
}
img
{
height: 100%;
}
When I load the page it renders correctly. However, if I adjust the height of the browser, the left side of the image remains in place while the image expands outside (or shrinks inside) of the viewport.
If I refresh the page then it immediately redraws correctly. The issue appears to be present in all browsers.
I found the following question but not sure if the issue is quite the same. The non-JS solutions didn't work; I didn't attempt any of the JS suggestions.
Does anyone why this might be happening and know of a fix (using CSS) to make the div/image redraw when I resize the browser?
Its because the browser doesnt redraw the div as it does not know it suppose to be 100% wide.
Try this setup:
div
{
position: absolute;
top: 0;
right: 0;
height: 100%;
width:100%;
}
img
{
height: 100%;
position: absolute;
top: 0;
right: 0;
}
Check out this fiddle: https://jsfiddle.net/ash06229/z55827t9/
div
{
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: 100%;
}
img
{
max-height: 100%;
max-width: 100%;
}
I am placing divs and iframes using position relative & absolute which is working fine on chrome but its not working in IE. I am using Foxit Reader in IE to show the pdf files.
Chrome (Test 1231 23123 is visible)
IE 11 (Test 1231 23123 is behind the iframe)
Below is my html:
<div class="document-previewer-container">
<div class="document-preview">
<div class="document-container">
<iframe id="pdf-container" ng-attr-src="{{vm.selectedDoc.pdfpath`}}"></iframe>
</div>
<div class="doc-overlay">
<p>Test 1231 23123</p>
</div>
</div>
<div class="documents-carousel-wrapper">
<!-- something -->
</div>
</div>
my .less file:
#import '../../styles/light-theme-definitions.less';
div.document-previewer-container {
//height: 400px;
//width: 300px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
//padding: 5px 2px;
> div.document-preview {
height: 88%;
//width: 100%;
position: relative;
.document-container{
height: 100%;
width: 100%;
position: relative;
}
.doc-overlay {
width: 95%;
height: 95%;
position: absolute;
cursor: pointer;
top: 0;
p {
padding: 2px;
}
}
}
> div.documents-carousel-wrapper {
position: relative;
overflow: hidden;
height: 12%;
min-height: 63px;
img {
width: 100%;
height: 100%;
}
}
Update: 1
Working PLUNKER. Please open it with IE or save it on ur local disk and open it with IE
Update: 2
I implemented the logic but still the div is not coming over pdf iframe. Please try clicking anywhere on Plunker.
Actually, I want the doc-overlay to be clickable in real life project. As u'll observe, the click event (using ng-click) is not working over PDF. Please refer the inspect element screenshot for more clarity. IE & Chrome. checkout the blue area too see the difference
You need to either do a hack where you add another iFrame or use library like PDF.js as described here https://stackoverflow.com/a/12977151/8833279
This should be easy and has been answered 100 times, but for some reason it's not working in my code.
I want to have my footer always be at the bottom of the page, but for cases when the content doesn't fill up the full page, it should still sit at the bottom (eg: not always fixed at bottom:0)
HTML
<div class="home-wrapper">
<div ui-view="nav#home"></div>
<div ui-view="content#{{$state.current.name}}" class="content-div"></div>
<div ui-view="footer#home" class="footer-bar"></div>
</div>
CSS
html
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
body {
width: 100%;
min-height: 100%;
overflow-x: hidden;
margin: 0;
padding: 0;
}
.home-wrapper {
min-height: 100%;
position: relative;
}
.footer-bar {
height: 3em;
width: 100%;
overflow:hidden;
position: absolute;
bottom: 0;
left: 0;
}
I thought by setting the min-height on the home-wrapper we'd have no issues... it works fine when the content area is large, but on elsewise it's shoved right up at the top of the page! I suspect this might be related to the fact that I'm using AngularJS with UI-Router for state routing, and my CSS is loaded on a per-page basis.
You can see a live example up at: http://letsdolunch-web-dev.azurewebsites.net/, click the Legal link at the bottom to see the issue present itself, http://letsdolunch-web-dev.azurewebsites.net/#/legal