UI not rendering as intended #14225
Description
Bug,
What is the expected behavior?
I would want all user input and labels to be clearly displayed and not overlapping. The user input for "perishable?" should also allow the user to select true or false.The user input for "Applicable shops" and "product Category" should also allow them to select a value or multiple values from a list.
What is the current behavior?
-Labels and user inputs are overlapping.
-User inputs forms are not rendering as intended for user input data
What are the steps to reproduce?
Providing a StackBlitz reproduction is the best way to share your issue.
StackBlitz starter: https://goo.gl/wwnhMV
What is the use-case or motivation for changing an existing behavior?
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Is there anything else we should know?
Add Product
N.B * this also needs to include ingredient info ,related products array and specific dietry cat it qualifies for
<div class="row">
<div class="input-field col s6">
<input type="number" placeholder="add product reference" [(ngModel)]="product.product_ref" name="product reference">
<label>Product Reference</label>
</div>
<div class="input-field col s6">
<input type="string" placeholder="add product name" [(ngModel)]="product.name" name="product name">
<label>Product Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<input type="string" placeholder="add product description" [(ngModel)]="product.description" name="product description">
<label>Product Description</label>
</div>
<div class="input-field col s6">
<input type="number" placeholder="add product price" [(ngModel)]="product.price" name="product price">
<label>Product Price</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<select [(ngModel)]="product.perishable" name="product perishability">
<option value="True">True</option>
<option value="False">False</option>
</select>
<label>Perishable ?</label>
</div>
<div class="input-field col s6">
<select [(ngModel)]="product.category"name="product category">
<option value="Fruit & Veg">Fruit & Veg</option>
<option value="Dairy">Dairy</option>
<option value="Cupboard">Cupboard</option>
<option value="Bakery" selected>Bakery</option>
</select>
<label>Product Category</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<select [(ngModel)]="shopapplicable"name="product category">
<option value="PnP Rondebosch">PnP Rondebosch</option>
<option value="Pnp Claremont">Pnp Claremont</option>
<option value="PnP Wynberg">PnP Wynberg</option>
<option value="Pnp Observatory">Pnp Observatory</option>
</select>
<label>Applicable Shops** (requires quick multiselectoptions)</label>
</div>
<div class="input-field col s6">
<input type=submit value="Submit" class="btn">
</div>
</div>
</form>
