amp-layout using layout attribute with forms - html

Question

I'm trying to build an amp page for my site.
I am trying to achieve a responsive form with a number of range inputs.
So that when the screen size changes they stack nicely, much as I would when using bootstrap.
The code I have is (as a single example);
<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>
Now when I add the layout attribute to the div. All elements inside disappear. When I inspect the html it seems to be applying the css;
.i-amphtml-notbuilt, [layout]:not(.i-amphtml-element) {
position: relative;
overflow: hidden!important;
color: transparent!important;
}
Now as far as I can see from reading the docs I am compliant with the amp specification, however I must be doing something wrong here?
Can anyone point me in the right direction as to what I am doing wrong an dhow I Can achieve the layout above?

Answer 1

#Matthew-Flynn
The text was disappearing because of color: transparent!important;. I removed that in the code snippet below. But I'm not sure that answers your positioning question: could you build out this snippet a little more and I'll take a look?
.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>