Resize divs with default size risizing window

Question

Resize divs with default size risizing window

46 Views Asked by Krooxe At 28 March 2024 at 10:58

I have seen similar topic with answers about size in % or vh, but its a bit different. I have a set of different plots with sizes 900x600 by default using this CSS:

.chartbox {
    display: flex;
    flex-wrap: wrap;
    background-color: DodgerBlue;
    justify-content: space-around;
}
.chart {
    background-color: #f1f1f1;
    width: 900px;
    height: 600px;
    margin: 10px;
    position: center;
}

how it looks

And I want them to resize automaticly when the window is resizing (or there is a small screen) Im using charts from ECharts, with js code smth like:

var myChart = echarts.init(document.getElementById('main'));

var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true
    }
    ]
};

myChart.setOption(option)

My HTML:

<DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8" />
        <h1>ECharts</h1>
        <link rel="stylesheet" type="text/css" href="mycss.css">
        <!-- Include The ECharts file you just downloaded -->
        <script src = "echarts.js"></script>
    </head>
    <body>
        <br>
        <!-- Prepare a DOM with a defined width and height for ECharts -->
        <div class="chartbox">
            <div class="chart" id= "main"></div>
            <div class="chart" id= "main1"></div>
            <div class="chart" id= "main2"></div>
            <div class="chart" id= "main3"></div>
            <div class="chart" id= "main4"></div>
            <div class="chart" id= "main5"></div>
            
        </div>
        
        <script src = "myjs.js"></script>
        <script src = "myjs1.js"></script>
        <script src = "myjs2.js"></script>
        <script src = "myjs3.js"></script>
        <script src = "myjs4.js"></script>
        <script src = "myjs5.js"></script>
    </body>
</html>

I tried to use % and vh to .chart height and width, but they conflict with default size. I tried to use max-width and max-height without width and height, but charts do not appear (mb its a ECharts feature). I expect the following:

if 3 charts 900x600 can fit the screen then place them
else if 3 charts 600x400 can fit the screen then place them
else if 2 charts 900x600 can fit the screen then place them
else if 2 charts 600x400 can fit the screen then place them
else if 1 charts 900x600 can fit the screen then place it
else if 1 charts 600x400 can fit the screen then place it
else resize as it possible

Original Q&A

There are 2 best solutions below

Ilya Ilya On 28 March 2024 at 11:39

Perhaps there is a more elegant way, but I see that it can be done with media queries
You can decide which minimal gap should be between plots, add it for their overall width and make this value as max-width of a query.
Example:

if 3 charts 900x600 can fit the screen then place them

We need to have 3 charts with 900 width, so their overall width is 900px * 3 = 2700px.
And minimal gap should be something like 10px (it can be any value that you want). You want have 3 items so it will be 2 gaps between them. And you have justify-content: space-around; so you need 2 halfs of the gap that is 5px each to make gaps minimal value 10px. Therefore 2 gaps and 2 half gaps at the borders of a line and it is (10px * 2) + (5px * 2) = 30px.
We got whole minimal width for your line: 2700px + 30px = 2730px

@media (max-width: 2730px){
 .chart {
  width: 600px;
  height: 400px;
 }
}

And you need to create such queries for all your cases.
Each query will handle the case when the minimal possible width was overcome and we need to show smaller charts

**Ji aSH** · Accepted Answer · 2024-03-28T11:33:03.197000

I think this snippet does something similar to your question.

It leverages flex layout and clamp size computation to achieve what you wanted.

Note that the values are not the one you specified (my screen is too small for 3*900px :D)

.container {
  display: flex;
  background: lightgrey;
  padding: 2rem;
  justify-content: center;
}
.chart-container {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  width: clamp(200px, 100%, 1000px);
}
.chart {
  display: block;
  width: clamp(200px, 33%, 300px);
  aspect-ratio: 3/2; 
  flex-grow: 1;
}
.red {
  background: red;
}
.green {
  background: green;
}
.blue {
  background: blue;
}
.yellow {
  background: yellow;
}
.orange {
  background: orange;
}
.purple {
  background: purple;
}

<div class='container'>
  <div class='chart-container'>
    <div class='chart red'></div>
    <div class='chart green'></div>
    <div class='chart blue'></div>
    <div class='chart yellow'></div>
    <div class='chart orange'></div>
    <div class='chart purple'></div>
  </div>
</div>

Resize divs with default size risizing window

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in CSS

Related Questions in FLEXBOX

Trending Questions

Popular # Hahtags

Popular Questions