0

I inserted an html iframe file in my shiny application, I want this file to be displayed without scrolling in mobile size when user connect the app with cell phone. I used a css file to control the size of div and iframe tags as follows:

iframeCSS.css:

.intrinsic-container {
 overflow: hidden;
  padding-top: 0%;
  position: relative;
  padding-bottom: 100%;
  height: 2300px;
  
}

.intrinsic-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  width: 100%;
  height: 100%;
  
}

As presented in above code I increased height of container to 2300px to displayed the iframe completely while scrolling is off.

iframe code in app:

 tags$link( rel="stylesheet" ,href="iframeCSS.css"),
              
              tags$div(class="intrinsic-container",
                        tags$iframe(src="test.html",scrolling="no" , frameborder="0", "allowfullscreen"),  

              )

My problem is with the white space below the iframe when open the app in PC browser size. How can I remove this white space? But When I decrease the size of browser close to the size of mobile screen there is no white space thus there is no problem with mobile size browser. You can see the screenshots for both mobile and PC size browsers:

PC screenshot: enter image description here

Mobile size screenshot: enter image description here

Thanks in advance for any help.

Ronak Shah
  • 377,200
  • 20
  • 156
  • 213
Mahdi Hadi
  • 373
  • 4
  • 15
  • `iframe` is not easy to resize. Have a look at `` and `` instead – HubertL Mar 22 '21 at 19:46
  • Dear HubertL thanks for your comment, I used both and but they not resolved the issue, the white space there is in both of them. Could you explain more how can I solve the problem with them... thanks – Mahdi Hadi Mar 25 '21 at 09:28
  • I"ts better if you make reprex and I try to fix it : https://stackoverflow.com/questions/5963269/how-to-make-a-great-r-reproducible-example – HubertL Mar 25 '21 at 17:39

0 Answers0