Google visualization table is not mobile friendly: Error = Clickable elements too close together

45 views

Skip to first unread message

MKDan

unread,

Aug 30, 2018, 11:00:27 AM8/30/18

to Google Visualization API

You can check mobile-friendliness of a webpage here = https://search.google.com/search-console/inspect/mobile-usability

It gives me the error - Clickable elements too close together.

I'm sure that it denotes the 'selection of a row' by clicking it.

So, now I want to disable it.

Here is my code


<!DOCTYPE html>
<html>
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Title goes Here</title>
    <meta name="description" content="Description goes here.">
    <meta name="keywords" content="keyword">
    <link rel="stylesheet" href="//www.example.com/tablechart.css">
  <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 data = new google.visualization.DataTable();
        data.addColumn('number', 'Number ⇕');
        data.addColumn('string', 'Name');
        data.addRows([
          [1, 'Name 1'],
          [2, 'Name 2'],
          [3, 'Name 3'],
        ]);

        var table = new google.visualization.Table(document.getElementById('table_div'));

        table.draw(data, {showRowNumber: false, width: '100%', height: '480'});
      }
      </script>
</head>
<body>

<h1>Heading</h1>
<p>Some text here...</p>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="table_div"></div>
   
</body>
</html>

Reply all

Reply to author

Forward

0 new messages