Question

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

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

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

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

Answer 2

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

分组并使用浮动文本时，输入文本无法正确显示

2 个答案: