如何使谷歌電子表格圖響應

<iframe height=468 width=1584 src="//docs.google.com/spreadsheets/d/1hUgiZqpgjqqtpnYY6Q1IeoUYlpXlCRUeARpN3cWX87g/gviz/chartiframe?oid=2131305794" seamless frameborder=0 scrolling=no></iframe>

即使在將寬度更改爲100％後，它不會使其響應。我在WordPress網站上嵌入這個圖表。如何使谷歌電子表格圖響應

來源

2014-07-09 chiragvora

請給我們您的wordpress網站地址，以便我們可以在實際行動中看到問題。 –

您可以同時放置'width =「100％」'和'style =「max-width：100％」'。在你的代碼中，有一個固定的寬度... – designtocode

@msbodetti URL - http://www.getcsr.com/index.php/256-2/ – chiragvora

我已經做了一些在網絡上尋找你，並有幾個解決方案。最流行的一種似乎是使用JQuery來正確調整iFrame的大小。

到腳本的鏈接在這裏找到：jQuery Responsive iFrame's

<!-- Activate responsiveness in the "child" page --> 
<script src="/js/jquery.responsiveiframe.js"></script> 
<script> 
    var ri = responsiveIframe(); 
    ri.allowResponsiveEmbedding(); 
</script> 

<!-- Corresponding code in the "parent" page --> 
<script src="/js/jquery.js"></script> 
<script src="/js/jquery.responsiveiframe.js"></script> 
<script> 
    ;(function($){   
     $(function(){ 
     $('#myIframeID').responsiveIframe({ xdomain: '*'}); 
     });   
    })(jQuery); 
</script>

從那裏剛剛做出的iFrame有myIframeID ID或簡單地改變腳本上面的文字，以適應這一點。

如果這不是爲你工作，我會建議使用我的谷歌搜索字符串來尋找其他可能的解決方案：responsive iframe width

祝您好運！

來源

2014-07-09 09:50:14 AaronHatton

嘿，你能告訴我如何把這個在WordPress網站上。我對此沒有任何想法。至於你的第二個選擇，我嘗試了很多，甚至在谷歌搜索後也沒有任何解決方案。 – chiragvora

我得到了一個解決方案，但問題在於它的值不是動態的，他們手動添加了這些值。無論如何改變它，並使用我的谷歌電子表格中的值，因爲在谷歌電子表格中，我的值會不斷變化。 http://codepen.io/shoogledesigns/pen/BfLkA – chiragvora

將div放在該iframe（作爲父元素），並將CSS「transform：scale（0.5）」設置爲該div。

<div style="transform: scale(0.5, 0.5);"> 
<iframe ...> 
</div>

它會調整整個幀的大小，包括其內容。

來源

2015-02-12 12:41:05

如何使谷歌電子表格圖響應

回答

相關問題