分组和使用浮动文本时输入文本无法正确显示答案

【问题标题】：Input text is not displayed properly when being grouped and using float text分组和使用浮动文本时输入文本无法正确显示
【发布时间】：2019-07-27 03:11:11
【问题描述】：

我正在尝试创建一个包含一组带有浮动标签的输入文本框的组件。但是，当我将它们分组时，输入文本框被切断了。以下是我正在使用的代码：

<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>

但是，当我只使用浮动标签而不分组时，文本框会正确显示而不会被截断。

【问题讨论】：

标签： angular primeng

【解决方案1】：

问题是你的<div class="ui-inputgroup">，替换为

<div class="col-sm-9">

有一个固定的模板：

<p-fieldset legend="Search" [toggleable]="true" [collapsed]="false">
        <div class="ui-g ui-fluid">
          <div class="ui-g-12 ui-md-4">
            <div class="col-sm-9">
              <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="col-sm-9">
              <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="col-sm-9">
              <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="col-sm-9">
              <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="col-sm-9">
              <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="col-sm-9">
                <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>

【讨论】：

【解决方案2】：

是的，它正在工作。谢谢！！但是，由于我使用的不是引导程序，而是primeng 样式，因此我将类用作“ui-sm-9”。

【讨论】：