时间戳

首页 > 解决方案 > amp-layout 使用带有表单的布局属性

html - amp-layout 使用带有表单的布局属性

问题描述

我正在尝试为我的网站构建一个 amp 页面。

我正在尝试使用多个范围输入来实现响应式表单。

表单域模型

因此，当屏幕大小发生变化时，它们可以很好地堆叠，就像我在使用引导程序时一样。

我的代码是（作为一个例子）；

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

现在，从阅读文档中可以看出，我符合 amp 规范，但是我一定在这里做错了什么？

谁能指出我做错了什么以及我可以实现上面的布局的正确方向？

标签： htmlcssamp-html

解决方案

@马修-弗林

文本正在消失，因为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>

推荐阅读