0

I would like both the label and input on line, not like in image. Can you suggest me what is the problem in this html code? How to fix my problem?

I have this code html:

<div class="contant">
    <div class="row">
      <div class="input-field col s4">
        <label for="invoice_number">Number:</label>
        <input formControlName="invoice_number" id="invoice_number" type="text" class="validate">
      </div>
      <div class="input-field col s4">
        <div class="row">
          <label for="invoice_date">Date:</label>
          <input formControlName="invoice_date" id="invoice_date" type="date" class="datepicker" materialize="pickadate" [materializeParams]="[{ format: 'yyyy-mm-dd', formatSubmit: 'yyyy-mm-dd',
          closeOnSelect: true, selectMonths: true, selectYears: true, today: '',
          max: true, onSet: onSetDatepicker }]">
        </div>
      </div>
      <div class="input-field col s4">
        <p style="text-align: center; color:black">Some Data</p>
        <div class="input-field col s2">
          <label for="client_id">First Last Name:</label>
          <input formControlName="client_id" id="client_id" type="text" class="validate">
        </div>
        <br>
        <div class="input-field col s2">
          <label for="phone">Phone:</label>
          <input formControlName="phone" id="phone" type="text" class="validate">
        </div>
        <br>
        <div class="input-field col s2">
          <label for="add">Add:</label>
          <input formControlName="add" id="add" type="text" class="validate">
        </div>
      </div>
    </div>
  </div>

This code display this photo:

enter image description here

Css

    label {
      width:180px;
      clear:left;
      text-align:left;
      padding-left:1.5px;
  }

I want to show this image:

enter image description here

Lonna
  • 355
  • 1
  • 6
  • 21

1 Answers1

0

You should add to label position: absolute; and add to input border-bottom: 1px solid rgb(117, 117, 117); and of course to set suitable padding

Radek
  • 38
  • 6
  • Yes, but don't change nothing. Thnx – Lonna Mar 01 '18 at 15:10
  • 1
    Css code `.contant { width: 1200px; margin-left: auto; margin-right: auto; margin-top: 100px; } .input-field { display: block; float: left; } .input-field input { border: none; border-bottom: 1px solid black; padding: 10px 2px; margin-left: 20px; } .input-field label { position: absolute; margin-left: 20px; } .s2 input { width: 20px; } #phone { margin-left: 60px; } #add { margin-left: 100px; }` – Radek Mar 01 '18 at 16:45
  • try this in your code – Radek Mar 01 '18 at 16:46