стиль управления div-тегом, вставленным движком ember

Я хочу, чтобы мое приложение Ember заполнило всю высоту области просмотра. Это не работает должным образом, потому что ember помещает div, который я не могу контролировать между тегом body и моим первым тегом в моем application.hbs.

Мое приложение.hbs:

<div class='page'>
{{outlet}}
</div>

Мой CSS:

body {
  background-color: #ccddee;
  height: 100vh;
  min-height: 100vh;
  margin: 0px;
}
.page {
  width: 780px;
  height: 100%;
  background-color: #F7F7F7;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
}

Но отображаемый html:

<html>
  <body ...>
    <script ....>
    <div id="ember376" class="ember-view">
      <div class=page">
        ......
      </div>
    </div>
  </body>
</html>

Я не могу контролировать стиль первого div после элемента сценария. («ember-view» также используется многими другими тегами, и я предполагаю, что «ember376» может измениться на другой номер без моего контроля.)

Я использую новейшую версию Ember (1.13.5)


css ember.js ember-engines
person Vilhelm H.    schedule 10.08.2015    source источник
comment
document.documentElement.classList.add('full-height'); и .full-height > div.ember-view { height: 100vh; }   -  person Josh Burgess    schedule 10.08.2015

Ответы (3)


arrow_upward
1
arrow_downward

Если вы хотите добавить класс специально для элемента представления приложений, вы можете сделать это:

App.ApplicationView = Ember.View.extend({
  classNames: ['full-height']
});

Затем css:

.full-height {
    height: 100vh;
}

Или вы можете просто выбрать первый .ember-view с помощью селектора прямого потомка в CSS:

body > .ember-view {
    height: 100vh;
}
person Kit Sunde    schedule 10.08.2015
comment
За исключением того, что он, вероятно, не хочет, чтобы это было на каждой странице, иначе он мог бы просто использовать .ember-view. - person Josh Burgess; 10.08.2015
comment
@JoshBurgess .ember-view добавляется ко всем представлениям ember, я почти уверен, что он просто пытается избежать нацеливания на компоненты и вещи. - person Kit Sunde; 10.08.2015
comment
Здесь много хороших предложений. Путь Ember 2.0 устаревает Ember.View, и я планирую перенести свое приложение на Ember 2.0, когда оно будет выпущено. Так что безопаснее всего пока использовать body > .ember-view. Спасибо! - person Vilhelm H.; 11.08.2015

arrow_upward
0
arrow_downward

Минимальный ответ JS. В шаблоне представления или в js-приложении добавьте следующий код JavaScript:

document.documentElement.classList.add('full-height');

А затем определите полноразмерный CSS для этого класса в элементе, на который вы хотите настроить таргетинг, (пример ниже)

.full-height > div.ember-view { 
  height: 100vh; 
}
person Josh Burgess    schedule 10.08.2015

arrow_upward
0
arrow_downward

Если все, что вы хотите сделать, это стилизовать первый div после тега script, тогда вы сможете использовать селектор смежных элементов в CSS.

script + div {
  ...
}

Однако я не уверен, что это будет хорошей идеей, поскольку я не думаю, что вы можете предположить, что div «ember-view» всегда будет первым div после тега script.

person SeanK    schedule 10.08.2015
comment
Это не стилизует первого брата, а всех последующих братьев и сестер. - person Kit Sunde; 11.08.2015
comment
@KitSunde, это неправильно, он выберет только указанный элемент, который следует сразу за предыдущим указанным элементом. См.: developer.mozilla.org/en-US/docs/Web/ CSS/ Я думаю, вы, вероятно, думаете об общем родственном селекторе '~' - person SeanK; 11.08.2015