CODEWITHSUNDEEP
javascripthtmlcssandroid-webview
Houdini
Houdini

Reputation: 3542

Padding-right has no effect, help please?

Here is my HTML and JS. I have tried putting the padding on both bottomWrapper and topList, but for some reason neither seems to work for padding-right. The other styles seem to be fine. Nothing is floated or anything that I know of. Any ideas? This is a WebView for Android, but really shouldn't matter in this case I get the same behavior when I just render this code in a browser.

<html>
<head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawVisualization);

function drawVisualization() {
  // Some raw data (not necessarily accurate)
  var data = google.visualization.arrayToDataTable([
    ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'],
    ['2004/05',  165,      938,         522,             998,           450,      614.6],
    ['2005/06',  135,      1120,        599,             1268,          288,      682],
    ['2006/07',  157,      1167,        587,             807,           397,      623]
  ]);

  var options = {
   // title : 'Top Texters',
    legendTextStyle: { color: 'white' },
  //  titleTextStyle: { color: 'white' },
    vAxis: {
        title: "Points",
        titleTextStyle: { color: 'white' },
        textStyle:
           {color: 'white'},
    },
    hAxis: {
        title: "Month",
        titleTextStyle: { color: 'white' },
        textStyle:
            {color: 'white'},
    },
    seriesType: "bars",
    series: {5: {type: "line"}},
    backgroundColor: { fill:'transparent' }
  };

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

<body style="background-color:#02071D;">

<div id="topWrapper" style="width:100%;">
    <h1 style="color: white; padding-left: 22px; margin-bottom: -28px;">Top Texters</h1>
    <div id="chart_div" style="width: 80%; height: 350px;margin:0 auto;"></div>
</div>
<div id="bottomWrapper" style="width:100%">
    <div id="topList" style="width:100%;height:200px;background-color:#FFFFFF;padding:15px;"></div>
</div>
</body>
</html>

Upvotes: 1

Views: 320

Answers (1)

Shimakuro
Shimakuro

Reputation: 314

The div is droped out of the browserwindow. Just give the div with the padding a box-sizing: border-box; and all is fine!

Upvotes: 3

Related Questions