не появится полимер с водопадной высотой ядра-заголовка

Я понимаю, что проблема, вероятно, связана с тем, что родительская панель core-header-panel не имеет высоты.

Важно: основная панель заголовка не будет отображаться, если ее родитель не имеет высоты.

Это отлично работает:

<style shim-shadowdom>
    html, body {
        height: 100%;
        margin: 0;
    }

    core-header-panel {
        height: 100%;
    }       
</style>    

<body unresolved>
   <core-header-panel>
      <div class="core-header">standard</div>
      <div class="content"></div>
   </core-header-panel>
</body>

Однако, когда я пытаюсь изменить основную панель заголовка в режим «высокий водопад», панель заголовка не отображается.

<style shim-shadowdom>
    html, body {
        height: 100%;
        margin: 0;
    }

    core-header-panel.tall{
        height: 100%;
    }       
</style>    

<core-header-panel mode = "waterfall-tall">
   <div class="core-header">waterfall-tall</div>
   <div class="content"></div>
</core-header-panel>

В ходе моих «экспериментов» я ссылался на оба https://www.polymer-project.org/docs/elements/core-elements.html#core-header-panel и https://www.polymer-project.org/components/core-header-panel/demo.html

После просмотра различных вопросов StackOverflow я думаю, что каким-то образом body теперь закрывает header-pannel, потому что я больше не устанавливаю высоту явно. К вашему сведению, я совершенно новичок в HTML и веб-разработке. Мы ценим любые предложения.

Чтобы было ясно, мои вопросы:

  • Родительский элемент core-header-panel является правильным body?
  • Правильно ли я ссылаюсь на свой <core-header-panel mode = "waterfall-tall"> в разделе <style>?
  • Как я могу заставить эту чертову панель заголовка появиться?

обновить редактирование:

Хорошо, я нашел решение, экспериментируя с demo.html core-header-panel. Он отлично работает на моем локальном хосте, т. е. заголовок сворачивается и расширяется, как я и ожидал. Однако, когда я вставляю в jsbin, я не получаю желаемого эффекта свертывания.

http://jsbin.com/cufefi/1/edit

Я думаю, это связано с использованием px в разделе <style>, но я не уверен.

Другой вопрос: мой импорт является относительным, так как же jsbin разрешить импорт?

второе обновление:

Поведение одинаково с импортом или без него, что для меня означает, что импорт не разрешается, и поэтому поведение отличается от поведения на моем локальном хосте.


html css web-component polymer
person slmyers    schedule 26.12.2014    source источник
comment
Вам необходимо указать абсолютные пути в jsbin, так как полимер еще не доступен в виде библиотеки. Просто замените <link rel="import" href="bower_components/core-header-panel/core-header-panel.html"> на <link rel="import" href="http://www.polymer-project.org/components/core-header-panel/core-header-panel.html">, и все готово.   -  person zunder    schedule 26.12.2014

Ответы (1)


arrow_upward
0
arrow_downward

Здесь вы потеряли тег ‹ body > непосредственно перед тегом core-header-panel. Может в этом ошибка?

<style shim-shadowdom>
    html, body {
        height: 100%;
        margin: 0;
    }

    core-header-panel.tall{
        height: 100%;
    }       
</style>    

<core-header-panel mode = "waterfall-tall">
   <div class="core-header">waterfall-tall</div>
   <div class="content"></div>
</core-header-panel>
person Dade    schedule 22.02.2015