Lit Aiy Lit Aiy - 7 months ago 16
HTML Question

How to make this picture fall below the menu bar?

I am using angular material to create a navigation bar. A chart is created using angular-google chart.

The navigation bar and chart looks like this;

enter image description here

Part of the google chart is hidden by the navigation bar.

Here is the relevant html code.

<md-toolbar layout="row" class="md-whiteframe-z3" style="padding:0px;margin:0px;position:fixed;">
<h2>Sample navbar</h2>
</md-toolbar>

<div ng-controller="GoogleChartCtrl">
<div google-chart chart="presence_detector_Chart" style="height:300px; width:100%;float: left;"></div>
</div>


I would like to make the chart fall below the navigation bar so that no part of it is hidden by the bar.

What is wrong with the html code?

Answer

Simply add the following line in to your GoogleChartCtrl div, like so:

<div ng-controller="GoogleChartCtrl" style="padding-top: 80px;">

This adds some space to the top of your GoogleChartCtrl div. Alternatively, you can change padding to margin.

Comments