I have a page as shown in the photo. When the blue button is clicked, the page is divided into two columns. I am using jquery to split the page into two columns and change the class names(col-md-12, col-md-6). when the page is half, the table on the left overflows. The table works normal when the page is fullscreen. How Can I solve this? Thanks in advance.
My code is here:
$("#toggle-history").click(function () {
if (isPageHalf) {
$(".kredi-limitiniz").attr("class", "col-lg-3 kredi-limitiniz");
$(".kredi-karti-limitiniz").attr("class", "col-lg-3 kredi-karti-limitiniz");
$(".kmh-card-1").attr("class", "col-lg-3 kredi-karti-limitiniz");
$(".borclanma-detay-sol").attr("class", "col-md-6 borclanma-detay-sol");
$(".borclanma-detay-sag").attr("class", "col-md-6 borclanma-detay-sag text-dark");
$(".detail-widget:nth-child(1)").attr("class", "detail-widget col-xl mr-xl-2 mb-xxl-2 text-white d-flex flex-column justify-content-center");
$(".detail-widget:nth-child(2)").attr("class", "detail-widget col-xl mr-xl-2 d-flex flex-column justify-content-center");
$(".detail-widget:nth-child(3)").attr("class", "detail-widget col-xl mr-xl-2 d-flex flex-column justify-content-center");
$(".detail-widget:nth-child(4)").attr("class", "detail-widget col-xl d-flex flex-column justify-content-center");
$(".ozet-sol").attr("class", "col-lg-6 ozet-sol");
$(".ozet-sag").attr("class", "col-lg-6 ozet-sag");
$(".ozet-rapor-container").attr("class", "col-md-12 ozet-rapor-container px-0 d-flex")
$(".report-history").hide();
isPageHalf = false
} else {
$(".report-history").show();
$(".kredi-limitiniz").attr("class", "col-lg-9 mb-4 kredi-limitiniz");
$(".kredi-karti-limitiniz").attr("class", "col-lg-9 mb-4 kredi-karti-limitiniz");
$(".kmh-card-1").attr("class", "col-lg-9 kredi-karti-limitiniz");
$(".borclanma-detay-sol").attr("class", "col-md-12 borclanma-detay-sol ");
$(".borclanma-detay-sag").attr("class", "col-md-12 borclanma-detay-sag text-dark");
$(".detail-widget:nth-child(1)").attr("class", "detail-widget col-xl-12 mr-xl-2 mb-xxl-2 text-white d-flex flex-column justify-content-center mb-2");
$(".detail-widget:nth-child(2)").attr("class", "detail-widget col-xl-12 mr-xl-2 d-flex flex-column justify-content-center mb-2");
$(".detail-widget:nth-child(3)").attr("class", "detail-widget col-xl-12 mr-xl-2 d-flex flex-column justify-content-center mb-2");
$(".detail-widget:nth-child(4)").attr("class", "detail-widget col-xl-12 d-flex flex-column justify-content-center mb-2");
$(".ozet-sol").attr("class", "col-lg-12 ozet-sol");
$(".ozet-sag").attr("class", "col-lg-12 ozet-sag");
$(".ozet-rapor-container").attr("class", "col-md-12 ozet-rapor-container px-0 d-flex flex-column")
isPageHalf = true;
}
if ($(".alt-content").hasClass("col-md-12")) {
const report = $(".alt-content").html();
$(".report-history").html(report);
$("#ozetraporcontainer").attr("class","col-md-12 ozet-rapor-container px-0")
$(".alt-content").attr('class', 'col-md-6 alt-content');
$(".report-history").attr('class', 'col-md-6 report-history');
$(".content-container").css({
"display": "flex",
//"flex-direction": "column"
});
$(".alt-content").css({
"display": "flex",
//"align-self": "flex-end"
})
} else {
$(".alt-content").attr('class', 'col-md-12 alt-content');
$(".report-history").attr('class', 'report-history');
$(".content-container").css({
"display": "flex",
//"flex-direction": "column"
});
$(".alt-content").css({
"display": "block",
})
}
window.areaChartKapali.redraw();
window.areaChart.redraw();
window.donutChart.redraw();
window.donutChartKapali.redraw();
window.urunToplamDonut.redraw();
})<table class="table table-bordered table-responsive-md">
<thead>
<tr>
<th scope="col">Açılış Tarihi</th>
<th scope="col">Referans No</th>
<th scope="col">Borçlu / Kefil</th>
<th scope="col">Güncellenme Tarihi</th>
<th scope="col">Banka</th>
</tr>
</thead>
<tbody>
<tr>
<td>24.03.2017</td>
<td>TIZTWGFOVBPHZ1</td>
<td>Borçlu</td>
<td>15.01.2021</td>
<td><a href="javascript:void(0)">Bu ürün hangi bankada?</a></td>
</tr>
</tbody>
</table>
