我有几张(bootstrap)卡,希望有机会在全屏显示。这些卡片中包含高图图表。问题在于,当您进入全屏模式时,高图的高度无法适应。
不久前,我对引导面板提出了相同的问题,然后“ daniel_s”为面板提出了此示例。直到现在,我在底部添加了许多列,并且已将其从面板转换为卡片。不幸的是,该示例不再起作用。再次以“ daniel_s”为例,但高度仍不是100%。
是否可以自动调整高图的缩放比例,以使比例(底部和标题的列)保持与本示例相同?
另外,我还想知道如何在一行中获得标题文本和图标。因此,文本在左侧,图标在右侧。
的HTML
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-3">
<div class="card with-margin card_shadow card_border rounded">
<div class="container-fluid" id="mainContainer">
<div class="row border-bottom-0 card_border2" style="background: linear-gradient(to right, #eea849, #fa7921); justify-content: space-between">
<h3>Panel 1</h3>
<li class="list-inline-item"><a href="#" id="panel-fullscreen" class="fullscreen-btn" role="button" title="Toggle fullscreen"><i class="fas fa-expand"></i></a></li>
</div>
<div class="row">
<div class="card-body border-top-0 border-bottom-0 card_border2 row-200">
<div id="container"></div>
</div>
</div>
<div class="row bg-white justify-content-center card_border">
<div class="col-sm text-center card_border2">
<br> text 1
</div>
<div class="col-sm text-center card_border2">
<br> text 2
</div>
<div class="col-sm text-center card_border2">
<br> text 3
</div>
<div class="col-sm text-center card_border2">
<br> text 4
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card with-margin card_shadow card_border rounded">
<div class="container-fluid" id="mainContainer">
<div class="row border-bottom-0 card_border2" style="background: linear-gradient(to right, #eea849, #fa7921); justify-content: space-between">
<h3>Panel 2</h3>
<li class="list-inline-item"><a href="#" id="panel-fullscreen2" class="fullscreen-btn" role="button" title="Toggle fullscreen"><i class="fas fa-expand"></i></a></li>
</div>
<div class="row">
<div class="card-body border-top-0 border-bottom-0 card_border2 row-200">
<div id="container2"></div>
</div>
</div>
<div class="row bg-white justify-content-center card_border">
<div class="col-sm text-center card_border2">
<br> text 1
</div>
<div class="col-sm text-center card_border2">
<br> text 2
</div>
<div class="col-sm text-center card_border2">
<br> text 3
</div>
<div class="col-sm text-center card_border2">
<br> text 4
</div>
</div>
</div>
</div>
</div>
</div>
</div>
的CSS
.panel-actions {
margin-bottom: 0;
text-align: right;
}
.panel-actions a {
color: #333;
}
#mainContainer {
height: 50%;
}
.panel-fullscreen {
display: block;
z-index: 9999;
position: fixed !important;
width: 100%;
height: 100%;
top: 0;
right: 0;
left: 0;
bottom: 0;
overflow: auto;
}
.full-height-row {
height: 100%;
width: 100%;
}
#container {
height: 100%;
}
#container2 {
height: 100%;
}
.row-200 {
height: 220px;
}
.card_border {
border: solid 0.75px #fa7921;
}
.card_border2 {
border: solid 2px #fa7921;
}
的JavaScript
$(document).ready(function() {
var charts = [];
var chart1Info = {
containerId: "container",
definition: {
title: {
text: "Chart1 Title"
},
subtitle: {
text: "Source: thesolarfoundation.com"
},
yAxis: {
title: {
text: "Number of Employees"
}
},
legend: {
layout: "vertical",
align: "right",
verticalAlign: "middle"
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: [
{
name: "Installation",
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
},
{
name: "Manufacturing",
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
},
{
name: "Sales & Distribution",
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
},
{
name: "Project Development",
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
},
{
name: "Other",
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}
]
}
};
var chart2Info = {
containerId: "container2",
definition: {
title: {
text: "Chart2 Title"
},
subtitle: {
text: "Source: thesolarfoundation.com"
},
yAxis: {
title: {
text: "Number of Employees"
}
},
legend: {
layout: "vertical",
align: "right",
verticalAlign: "middle"
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: [
{
name: "Installation",
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
},
{
name: "Manufacturing",
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
},
{
name: "Sales & Distribution",
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
},
{
name: "Project Development",
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
},
{
name: "Other",
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}
]
}
};
function drawChart(chartInfo) {
// Properties that vary by chart should be defined in chartInfo
// Any properties that are the same for all charts are added here
chartInfo.responsive = {
rules: [
{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: "horizontal",
align: "center",
verticalAlign: "bottom"
}
}
}
]
};
if (chartInfo == chart1Info) {
charts[0] = Highcharts.chart(chartInfo.containerId, chartInfo.definition);
} else {
charts[1] = Highcharts.chart(chartInfo.containerId, chartInfo.definition);
}
}
//Toggle fullscreen
$(".fullscreen-btn").click(function(e) {
e.preventDefault();
var $this = $(this);
$this
.children("i")
.toggleClass("fa-expand")
.toggleClass("fa-arrows-alt");
$(this)
.closest(".card")
.toggleClass("panel-fullscreen");
$($(this).parents()[3])
.find(".card-body")
.toggleClass("row-200");
var chartInfo =
$this.attr("id") === "panel-fullscreen" ? chart1Info : chart2Info;
drawChart(chartInfo);
});
drawChart(chart1Info);
drawChart(chart2Info);
});
从此example中可以看出,高度不是100%,而在example中,高度是100%。我如何管理第一个示例中的高度始终为100%。
最佳答案
我已经检查了两个示例,并可能找到了解决方案。
在您的工作示例中,所有元素都位于一个容器panel
中,该容器的高度设置为100%,子容器panel-heading
的高度为94%。
在有此问题的示例中,有一个“卡片”,其高度设置为100%,子container-fluid
的内部为rows
,但未设置固定高度。
因此,您可以看到行不知道如何共享屏幕上的空间。要解决此问题,您必须设置CSS样式,以使container-fluid
的高度为100%,例如,上排为10%,中排为80%,底排为10%。然后,所有元素都会正确呈现,如下所示: