Пользовательский интерфейс не отображается так, как задумано в моем новом угловом веб-приложении - PullRequest
Новая
       12

Пользовательский интерфейс не отображается так, как задумано в моем новом угловом веб-приложении

0 голосов
/ 21 ноября 2018

Ярлыки, а также области пользовательского ввода непреднамеренно перекрываются.Я хотел бы, чтобы они отображались четко, как некоторые из них.Поле ввода связано с "скоропортящиеся?"Метка также не отображается должным образом и должна позволять пользователю выбирать значение true или false (логический селектор ввода).Поля ввода для «Категория» и «Применимые магазины» должны позволять пользователям выбирать значение или несколько значений соответственно из раскрывающегося списка.

Неисправный пользовательский интерфейс 

<div class="card" >
<div class="card-content">
<span class="card-title " style="text-align: center">Add Product</span>
<form (ngSubmit)="onSubmit()">
   <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>
</div>
<label>N.B * this also needs to include ingredient info ,related products 
array and specific dietry cat it qualifies for</label>
</div>
...