Как заставить эту картинку упасть ниже строки меню?

0

Я использую угловой материал для создания навигационной панели. Диаграмма создается с использованием диаграммы углового google.

Навигационная панель и диаграмма выглядят так:

Изображение 174551

Часть диаграммы google скрыта на панели навигации.

Вот соответствующий html- код.

<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>

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

Что не так с кодом html?

  • 1
    Вы пробовали установить отступы в вашем 'div'?
  • 0
    Извините, я не знаком с HTML. Позвольте мне проверить, что такое прокладки.
Теги:
angular-material

2 ответа

1
Лучший ответ

Просто добавьте следующую строку в свой div GoogleChartCtrl, например:

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

Это добавляет некоторое пространство в верхнюю часть вашего DivX GoogleChartCtrl. В качестве альтернативы вы можете изменить padding к margin.

Поделиться
  • 0
    Спасибо! Это ответ. Интересно, как можно сделать код достаточно умным, чтобы автоматически отображаться в нужном месте, не пытаясь определить, сколько отступов поместить в верхнюю часть.
  • 1
    Хах! Это из-за position: fixed вас на панели навигации. Фиксированные элементы являются плавающими, и поэтому они не сталкиваются с элементами, которые являются статическими, относительными или такими. :)
Показать ещё 4 комментария
0

Положение навигационной панели было исправлено. Если вы сделали его плавающим, диаграмма автоматически будет помещена под панелью. Решение состоит в том, чтобы заменить фиксированное положение поплавком. Вот код html.

<md-toolbar layout="row" class="md-whiteframe-z3" style="padding:0px;margin:0px;float:left;">
    <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>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню