当滚动条出现在Google Chrome浏览器中时，我很难尝试让Google图表根据页面宽度的变化进行调整。我将在Google工作表侧边栏中显示此数据（我相信有一个300px的宽度）。图表总是去到父div的外面，忽略右边的内边距。当滚动条由于较长的页面而出现时，图像也应该调整以保持适当的右边距。2我希望右边距和左边距一样。3对于文本这似乎工作得很好，但不是像图表这样的图像。
此图像是当前输出。图片的右边距应与左边距相同。如果图像太宽，最好调整其宽度以保持在容器内。
我已经创建了下面的问题使用一个图像，而不是谷歌图表更简单的代码。
Code.gs
function onOpen() {
SpreadsheetApp.getUi().createMenu("My Menu")
.addItem("My Item", "showForm")
.addToUi();
}
function include (filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
function showForm() {
var htmlWidget = HtmlService.createTemplateFromFile('Form');
SpreadsheetApp.getUi().showSidebar(htmlWidget.evaluate().setTitle("My Form"));
}Form.html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('Form-CSS'); ?>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
var options = {'title':'How Much Pizza I Ate Last Night', 'width':'100%'};
var chart = new google.visualization.PieChart(document.getElementById('mychart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div class="wrap-collapsible">
<input id="collapsible1" class="toggle" type="checkbox">
<label for="collapsible1" class="lbl-toggle">Button 1</label>
<div class="collapsible-content">
<div class="content-inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id sem urna. Donec nec elit eu turpis maximus aliquam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed non libero laoreet, interdum lacus eu, egestas augue. Donec at semper velit. Cras ante turpis, ultricies non ante at, dapibus suscipit leo. Morbi quis ex quam. Sed feugiat nibh ac tempus facilisis. Praesent ullamcorper placerat libero, tempus gravida eros scelerisque vel. Pellentesque quis luctus velit, nec consequat est. Sed ac arcu a nisl viverra rutrum ut id ex. Vestibulum vel semper massa, sit amet accumsan mauris. Donec gravida augue magna, id laoreet dui rutrum ac. Sed et porta magna.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id sem urna. Donec nec elit eu turpis maximus aliquam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed non libero laoreet, interdum lacus eu, egestas augue. Donec at semper velit. Cras ante turpis, ultricies non ante at, dapibus suscipit leo. Morbi quis ex quam. Sed feugiat nibh ac tempus facilisis. Praesent ullamcorper placerat libero, tempus gravida eros scelerisque vel. Pellentesque quis luctus velit, nec consequat est. Sed ac arcu a nisl viverra rutrum ut id ex. Vestibulum vel semper massa, sit amet accumsan mauris. Donec gravida augue magna, id laoreet dui rutrum ac. Sed et porta magna.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id sem urna. Donec nec elit eu turpis maximus aliquam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed non libero laoreet, interdum lacus eu, egestas augue. Donec at semper velit. Cras ante turpis, ultricies non ante at, dapibus suscipit leo. Morbi quis ex quam. Sed feugiat nibh ac tempus facilisis. Praesent ullamcorper placerat libero, tempus gravida eros scelerisque vel. Pellentesque quis luctus velit, nec consequat est. Sed ac arcu a nisl viverra rutrum ut id ex. Vestibulum vel semper massa, sit amet accumsan mauris. Donec gravida augue magna, id laoreet dui rutrum ac. Sed et porta magna.</p>
</div>
</div>
</div>
<div class="wrap-collapsible">
<input id="collapsible2" class="toggle" type="checkbox">
<label for="collapsible2" class="lbl-toggle">Button 2</label>
<div class="collapsible-content">
<div class="content-inner">
<div id="mychart" style="width: auto; max-width: 100%;"></div>
</div>
</div>
</div>
</body>
</html>表单CSS：
<style>
@import url('https://fonts.googleapis.com/css2?family='Roboto'&display=swap');
body {
background-color: white;
font-family: 'Roboto', sans-serif;
font-size: 14px;
}
.wrap-collapsible {
margin-bottom: 8px;
}
input[type='checkbox'] {
display: none;
}
.lbl-toggle {
display: block;
font-weight: bold;
font-family: 'Roboto', sans-serif;
font-size: 18px;
text-align: left;
padding: 5px 10px 5px;
color: black;
background: coral;
cursor: pointer;
border: 1px solid black;
transition: 0.2s ease-out;
}
.lbl-toggle::before {
content: '\25B6';
color: black;
font-weight: bold;
font-size: 12px;
float: right;
margin-top: 7px;
margin-left: 0px;
transition: transform 0.2s ease-out;
}
.toggle:checked+.lbl-toggle::before {
transform: rotate(90deg);
}
.collapsible-content {
max-height: 0px;
overflow: hidden;
transition: max-height 0.2s ease-in-out;
}
.toggle:checked+.lbl-toggle+.collapsible-content {
max-height: 300vh;
}
.collapsible-content .content-inner {
background: bisque;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
padding: 5px;
}
</style>
2条答案
按热度按时间bmp9r5qi1#
减少宽度
上面因为侧边栏的宽度是300，所以你要减去边距和填充
yi0zb3m42#
如果您检查元素，它会位于最大长度为272的div内。您有两种方法可以修正这个问题：
您可以手动设置
width="272"，也可以使用下面的代码自动调整图片的宽度。试试看：
结果：
注：我已经更新了代码，我添加了
overflow: hidden;有关更多信息：CSS: Overflow