Can an element stick to an Iframe?

user_16796259 0
Viewed 89

I tried to use transform and padding on my element, but it didn't work quite well when you resize your window. It sometimes even goes out of my window. I tried to transform one like 60% to the right and the other one 40%, but that didn't work too. So I want my element to be stuck together with an iframe.

#weertekst{
  font-weight:bold;
}

#test {
    background-color: #0032A1;
    height: 515.5px;
    width: 200px;
    border-top-left-radius:20px ;
    border-bottom-left-radius:20px ;
    margin: 0px;
    padding: 0px;
    justify-content: center;
    align-items: center;
  
    /* Positioning */
    position: static;
    top: auto;
    bottom: auto;
    right: auto;
    left: auto;
    float: none;
    display: flex;
    clear: none;
    z-index: auto;
}

  #intest{
    width: 180px;
    height: 453px;
    text-align: center;
    display: flex;
    flex-direction: column;
  }
<div id="pad">
    <div id="test">
      <div id="intest">
        <div id="dag-datum">
          <div id="dag"><h3>Vandaag</h3></div>
          <div class="datum"><span id="datum">...</span></div>
        </div>
        <div id="weer-logo"><img id="plaatje"></div>
        <div id="weer-tekst"><span id="weertekst">...</span></div>
        <div id="graden"><h3><!---Temp:---> <span id="temperatuur">...</span> ºC</h3></div>
        <div id="directie"><h3 id="nbold">Windrichting:<br></h3> <h3><span id="winddir"></span></h3></div>
        <div id="snelheid"><h3 id="nbold">Windsnelheid:<br></h3> <h3><span id="windspeed"></span></h3></div>
      </div>
    </div>
  </div>

  <div id="kaart">
    <iframe id="radarbeeld" width=503.5 height=515.5>
    </iframe>
  </div>

css html
2 Answers

In this application, a column covering 33.3% and 66.6% of a container was created using Bootstrap 5. The second column, occupying 66.6% of the space inside the container, was divided into two separate 40% and 60% columns. Application test image and developed solution are available below.

enter image description here

#pad {
    float: left;
}

#weertekst {
    font-weight: bold;
}

#test {
    background-color: #0032A1;
    height: 515.5px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    margin: 0px;
    padding: 0px;
    justify-content: center;
    align-items: center;

    /* Positioning */
    position: static;
    top: auto;
    bottom: auto;
    right: auto;
    left: auto;
    float: none;
    display: flex;
    clear: none;
    z-index: auto;
}

#intest {
    width: 180px;
    height: 453px;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.specialColumn {
    float: left;
}

.left {
    width: 40%;
}

.right {
    width: 60%;
}

.specialRow:after {
    content: "";
    display: table;
    clear: both;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <title>Document</title>
</head>

<body>
<div style="margin: 75px;">
    <div class="row">
        <div class="col-md-4" style="margin: 0px !important; padding: 0px !important;">
            <div id="pad" style="width: 100% !important;">
                <div id="test">
                    <div id="intest">
                        <div id="dag-datum">
                            <div id="dag">
                                <h3>Vandaag</h3>
                            </div>
                            <div class="datum"><span id="datum">...</span></div>
                        </div>
                        <div id="weer-logo"><img id="plaatje"></div>
                        <div id="weer-tekst"><span id="weertekst">...</span></div>
                        <div id="graden">
                            <h3>
                                <!---Temp:---> <span id="temperatuur">...</span> ºC</h3>
                        </div>
                        <div id="directie">
                            <h3 id="nbold">Windrichting:<br></h3>
                            <h3><span id="winddir"></span></h3>
                        </div>
                        <div id="snelheid">
                            <h3 id="nbold">Windsnelheid:<br></h3>
                            <h3><span id="windspeed"></span></h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-8" style="margin: 0px !important; padding: 0px !important;">
            <div class="specialRow">
                <div class="specialColumn left" style="background-color:#aaa; height: 515px;">
                    <h1 class="text-center">%40</h1>
                </div>

                <div class="specialColumn right" style="background-color:#bbb; height: 515px;">
                    <h1 class="text-center">%60</h1>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

user_150326880

Nest your code in a wrapper and use position: sticky;. Also, you were using a lot of padding which seemed unnecessary so I removed it. See the CSS changes I made below.

#pad {
  float: left; 
}

#kaart {
  display: block;
transform: translateX(-30px);
  text-align: center;
}

#weertekst{
  font-weight:bold;
}

#test {
    background-color: #0032A1;
    height: 520px;
    width: 200px;
    border-top-left-radius:20px ;
    border-bottom-left-radius:20px ;
    margin: 0px;
    padding: 0px;
    margin-right: 1.8rem;
  
    /* Positioning */
    position: sticky;
    top: auto;
    bottom: auto;
    right: auto;
    left: auto;
    float: none;
    display: flex;
    clear: none;
    z-index: auto;
}

  #intest{
    width: 180px;
    height: 453px;
    text-align: center;
    display: flex;
    flex-direction: column;
  }
  

  
  .wrapper {
    display: flex;
    justify-content: center;
  }
<div class="wrapper">
<div id="pad">
    <div id="test">
      <div id="intest">
        <div id="dag-datum">
          <div id="dag"><h3>Vandaag</h3></div>
          <div class="datum"><span id="datum">...</span></div>
        </div>
        <div id="weer-logo"><img id="plaatje"></div>
        <div id="weer-tekst"><span id="weertekst">...</span></div>
        <div id="graden"><h3><!---Temp:---> <span id="temperatuur">...</span> ºC</h3></div>
        <div id="directie"><h3 id="nbold">Windrichting:<br></h3> <h3><span id="winddir"></span></h3></div>
        <div id="snelheid"><h3 id="nbold">Windsnelheid:<br></h3> <h3><span id="windspeed"></span></h3></div>
      </div>
    </div>
  </div>

  <div id="kaart">
    <iframe id="radarbeeld" width=503.5 height=515.5>
    </iframe>
  </div>
</div>

user_164963570
Related