Визуализации Google и высота сетки CSS - PullRequest
Новая
       8

Визуализации Google и высота сетки CSS

1 голос
/ 20 мая 2019

Мне бы хотелось иметь сетку CSS, которая использует высоту и ширину в процентах, чтобы она подходила для браузера любого размера.Проблема состоит в том, что две из моих ячеек содержат визуализации Google.

Визуализации Google могут принимать значения высоты и ширины их контейнера, если вы предоставляете им параметры 

var options = {width: '100%', height: '100%'}
var chart = new google.visualization.Table(document.getElementById('source_table_div'));
chart.draw(data, options)

.проблема в том, что если я сделаю это без минимального размера, то визуализация вообще не отрисовывается, и то же самое происходит и с 

min-height: 100%;

.Если я жестко закодирую минимальную высоту, используя пиксели, я могу увидеть что-то: 

min-height: 500px;

Но он никогда не изменяется до максимального размера ячейки, только до минимального, то есть я не могу изменитьвысота, чтобы соответствовать размеру страницы.

Я знаю, что могу выполнять запросы @media, но мне нужно было бы сделать тысячи таких запросов на любой случай.

Как я могу сделать это без 1000 @медиазапросы?

Добавление моей таблицы стилей и страницы для WhiteHat.

Стиль: 

<style>

#full_page_grid_container {
  width: 95%;
  height: 95%;
  display: grid;
  grid-template-columns: 45% 10% 45%;
  grid-template-rows:    10% 10% 40% 40%;
  grid-template-areas:   "header        header       header" 
                         "source_search .            target_search" 
                         "source_table  right_button target_table" 
                         "source_table  left_button  target_table";
}

#full_page_grid_container div {
  border-style: solid;
}

h1 {
  color: green;
  text-align: center;
}

#source_table_div {
  grid-area: source_table;
  min-height: 700px;
  max-height: 100%;
}

#target_table_div {
  grid-area: target_table;
}

.title {
  grid-area: header;
}

.link_home {
  grid-area: header;
}


</style>

и страница: 

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= include('AddCrewStylesheet'); ?>
    <?var url = getScriptUrl();?>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['table']});
      google.charts.setOnLoadCallback(drawTable);
      function drawTable() {
        var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1I3N5DtdXGWFootaOCQM201K_ao2ZPWSWyw9_l7QcwQg/gviz/tq?sheet=Crew_Basics');
        query.send(handleQueryResponse);
      }

      function handleQueryResponse(response) {
        if (response.isError()) {
          alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
          return;
        }
         var data = response.getDataTable();
        var options = {width: '100%', height: '100%'}

        var chart = new google.visualization.Table(document.getElementById('source_table_div'));
        chart.draw(data, options)
      }
    </script>

  </head>
  <body>
    <div id="full_page_grid_container">
      <div class="title"><h1>Select Your Crew</h1></div>
      <div class="link_home"><a href="<?=url?>">Return Home</a><br /></div>
      <div id="source_table_div" class="google_table"></div>
      <div id="target_table_div" class="google_table"></div>
    </div>
  </body>
</html>
...