0

I'm trying to insert basic html (local file) into a parent html. From my previous question I concluded that jquery load might never work in prod so I attempted to use iframe as per Makesh Keshu's suggestion. It sort of does what I want, but now I'm running into some styling issues? Since the local file I'm trying to embed is just text essentially, I want it to just look like the parent html holds the text (aka responsive sizing and all) -- motivation for embedding the html and not just writing it in directly is mainly because the site owner wants to try to make the text entry not "steal-able" from just doing inspect and copying the text away.

My css right now uses an iframe wrapper class that does the usual that everyone else suggests:

.text-wrapper {
    position: relative;
    padding-bottom: 100%;
    padding-top: 100%;
    height: 0;
    overflow: hidden;
}

.text-wrapper iframe {
    position: absolute;
    border: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

However, I suspect due to the aspect ratio from the padding attributes, it looks great when my screen is in split-screen view or on mobile, but when I resize the screen to full screen, there is a lot of white space under all the text to keep the container at roughly the half-screen-view aspect ratio. (Please correct me if this assumption is wrong -- I'm still a beginner with front-end.)

Basically, I want to try to make the aspect ratio of the iframe container the same as the ratio of the tab/window/screen -- which changes as window resizes and whatnot.

I looked through this question because it seems similar, but I'm neither sure I understand the idea behind the answer very well nor am I sure it really answers my question. That question I think is asking to size the iframe-container according to the content size without using a fixed aspect ratio, which would achieve the same thing, but I'm trying to see if I can just make the aspect ratio responsive based on the "screen"(window?) ratio.

jlin
  • 25
  • 4

1 Answers1

0

This article ended up working really well for my specific purposes. I'm not sure I 100% understand the theory behind it yet, but it uses a pseudo-element. It seems to have solved my problem of having extraneous whitespace in the iframe container in full-screen, but I'm not sure if it solves the general issue (for people who want to try the method out).

The css code I ended up using (for the container, css for iframe remains the same):

.aspect-ratio-box {
    background: white;
}

.text-wrapper::before {
    content: "";
    width: 1px;
    margin-left: -1px;
    float: left;
    height: 0;
    padding-top: 52.46%;
}

.text-wrapper::after {
    content: "";
    display: table;
    clear: both;
}
jlin
  • 25
  • 4