amp-layout с использованием атрибута layout с формами - PullRequest
Новая
       34

amp-layout с использованием атрибута layout с формами

0 голосов
/ 23 января 2019

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

Я пытаюсь получить отзывчивую форму с несколькими входами диапазона.

mockup of form field

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

Код, который у меня есть (в качестве одного примера); 

    <div class="form-field" layout="container">
        <div class="form-title" layout="responsive">
            <span>How much do you need?</span>
            <span [text]="[amount]">
                £1500000
            </span>
        </div>
        <div layout="responsive" width="auto" height=100>
            <input type="range"
                   name="amountSlider"
                   min="10000"
                   step="10000"
                   value="1500000"
                   max="3000000"
                   on="change:AMP.setState({amount: '£' + event.value})">
        </div>
    </div>

Теперь, когда я добавлю атрибут layout в div. Все элементы внутри исчезают. Когда я проверяю HTML, кажется, что применяется CSS; 

.i-amphtml-notbuilt, [layout]:not(.i-amphtml-element) {
    position: relative;
    overflow: hidden!important;
    color: transparent!important;
}

Теперь, насколько я могу судить по документам, я согласен со спецификацией усилителя, но я, должно быть, здесь что-то не так делаю?

Может ли кто-нибудь указать мне правильное направление относительно того, что я делаю неправильно, и как я могу достичь макета выше?

1 Ответ

0 голосов
/ 23 января 2019

@ Мэтью-Flynn

Текст исчезал из-за color: transparent!important;. Я удалил это в фрагменте кода ниже. Но я не уверен, что это отвечает на ваш вопрос о позиционировании: не могли бы вы создать этот фрагмент еще немного, а я посмотрю? 

.i-amphtml-notbuilt, [layout]:not(.i-amphtml-element) {
    position: relative;
    overflow: hidden!important;
}
<div class="form-field" layout="container">
        <div class="form-title" layout="responsive">
            <span>How much do you need?</span>
            <span [text]="[amount]">
                £1500000
            </span>
        </div>
        <div layout="responsive" width="auto" height=100>
            <input type="range"
                   name="amountSlider"
                   min="10000"
                   step="10000"
                   value="1500000"
                   max="3000000"
                   on="change:AMP.setState({amount: '£' + event.value})">
        </div>
    </div>
...