JSFiddle - React, Tailwind, and code Playground
by Lazar Mladenovic
HTML
<!-- Content Header (Page header) -->
<script>
$(document).ready(function() {
// Optimalisation: Store the references outside the event handler:
var $window = $(window);
function checkWidth() {
var windowsize = $window.width();
var containtersize = $(".flex-container").width();
$ukupno = $(".flex-item:last-of-type").attr("data-number");
$sirina = containtersize / $ukupno;
$(".flex-item").each(function( index ) {
$(this).css("width",$sirina * $(this).attr("data-number") + "px");
});
}
function checkHeight() {
var heightsize = $(".flex-container").height();
$broj = $(".flex-item").size();
$visina = heightsize / $broj;
// if($broj > 12 && $visina > 10) {
// $visina = 10;
// }
$(".flex-item").each(function( index ) {
$(this).css("height",$visina + "px");
});
}
// Execute on load
checkWidth();
checkHeight();
// Bind event listener
$(window).resize(checkWidth);
});
</script>
<style>
.chart-container{
display: block;
height: 500px;
width: 100%;
}
.table-container{
display: none;
height: 500px;
width: 100%;
}
span.counter{
width: 100%;
text-align: center;
display: block;
margin-top: 5px;
}
.flex-container {
height: 500px;
background: #fff;
width: 90%;
margin: 0 auto;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: flex-end;
-ms-flex-line-pack: end;
align-content: flex-end;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.flex-item {
-webkit-order: 0;
...