Input text is not displayed properly when being grouped and using float text

[avulanitin]

Hi All,

I'm trying to create a component with a group of Input text boxes which have a float label. But, when I group them the input text box is being cut off.
Below is the code which I'm using:

Code: Select all

<p-fieldset legend="Search" [toggleable]="true" [collapsed]="false">
  <div class="ui-g ui-fluid">
    <div class="ui-g-12 ui-md-4">
      <div class="ui-inputgroup">
        <span class="ui-float-label">
          <input id="float-input" type="text" size="25" pInputText />
          <label for="float-input">Proposal Id</label>
        </span>
       </div>
    </div>

    <div class="ui-g-12 ui-md-4">
      <div class="ui-inputgroup">
        <span class="ui-float-label">
          <input id="float-input1" type="text" size="25" pInputText />
          <label for="float-input1">DCN</label>
        </span>
      </div>
    </div>
    <div class="ui-g-12 ui-md-4">
      <div class="ui-inputgroup">
        <span class="ui-float-label">
          <input id="float-input2" type="text" size="25" pInputText />
          <label for="float-input2">Customer Name</label>
        </span>
      </div>
    </div>

    <div class="ui-g-12 ui-md-4">
      <div class="ui-inputgroup">
        <span class="ui-float-label">
          <input id="float-input3" type="text" size="25" pInputText />
          <label for="float-input3">First Name</label>
        </span>
      </div>
    </div>
    <div class="ui-g-12 ui-md-4">
      <div class="ui-inputgroup">
        <span class="ui-float-label">
          <input id="float-input4" type="text" size="25" pInputText />
          <label for="float-input4">Last Name</label>
        </span>
      </div>
    </div>

    <div class="ui-g-12 ui-md-4">
      <div class="ui-inputgroup">
          <button pButton type="button" label="Clear" class="ui-button-secondary" (click)="clear()"></button>
          <span class="ui-float-label">&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <button pButton type="button" label="Find"></button>
      </div>
    </div>
  </div>
</p-fieldset>

Any inputs would be highly appreciated.

Cheers,
Nitin

[avulanitin]

Please see below the screenshot of the problem.

[avulanitin]

The problem was because of

Code: Select all

<div class="ui-inputgroup">

I changed the class to "ui-sm-9" and it is working fine now.

Thanks!!