0

I'm trying to display some dynamic HTML in the iframe, iframe size will be fixed in and the size of content should be fit to content in iframe,

if I'm using the transformation i can not able to remove the extra wide space after the i frame.

.scaled-frame { 
    width: 500px; 
      border: 0px;
      bottom: 0px;
}

.scaled-frame {
    /*zoom: 0.51;*/
    -moz-transform: scale(0.55);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.55);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.55);
    -webkit-transform-origin: 0 0;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .scaled-frame  { zoom: 0.55;  }
}


/* Hide scrollbar for Chrome, Safari and Opera */
.scaled-frame::-webkit-scrollbar {
      display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.scaled-frame {
      -ms-overflow-style: none;  /* IE and Edge */
      scrollbar-width: none;  /* Firefox */
}
<template v-if="template_html">
    <iframe id="iFrame1" name="" :srcdoc="template_html" width="100%" style="height: 230em" allowfullscreen="true"/>
</template>

note: template_html is HTML string i got form sever response.

any suggestions/guidance will appreciably

Maestro
  • 865
  • 1
  • 7
  • 24
Amit
  • 51
  • 1
  • 5
  • Possible duplicate? https://stackoverflow.com/questions/819416/adjust-width-and-height-of-iframe-to-fit-with-content-in-it – Baryo Jul 15 '20 at 09:28
  • Heya. a little bit confused by your question. You want the content within the iframe to fit the height and width of the iframe; it should be as simple as setting it's width and height to 100%. You're referencing a css class that you're not using in your html - '.scaled-frame' - I assume this is a wrapper that you're bringing in from template_html? – JCoulam Jul 15 '20 at 09:31
  • yes exactly i use it as wrapper , it scale down the size of the my dynamic html but i have lot of empty space which i have to remove – Amit Jul 17 '20 at 13:52

0 Answers0