Question 365842 in Html Question posted in
Some basic documentation can be found here.

Html – Resize divs with default size risizing window

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 900×600 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:

  1. if 3 charts 900×600 can fit the screen then place them
  2. else if 3 charts 600×400 can fit the screen then place them
  3. else if 2 charts 900×600 can fit the screen then place them
  4. else if 2 charts 600×400 can fit the screen then place them
  5. else if 1 charts 900×600 can fit the screen then place it
  6. else if 1 charts 600×400 can fit the screen then place it
  7. else resize as it possible
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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 900×600 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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search