PrimeNG下拉式选单

Question

我需要创建带有文本和下拉菜单的简单表单。我设法处理了textInput，但下拉菜单却无法做到这一点。

这是我的代码

 <div class="p-grid p-dir-col p-offset-2">

      <div class="ui-g ui-fluid">
        <div class="ui-md-10">
          <div class="ui-inputgroup">
            <span class="ui-inputgroup-addon" style="width:280px">Text</span>
            <input type="text" pInputText placeholder="abcdef">
          </div>
        </div>
      </div>

      <div class="ui-g ui-fluid">
        <div class="ui-md-10">
          <div class="ui-inputgroup">                
            <span class="ui-inputgroup-addon" style="width:280px">Dropdown</span>
            <p-dropdown [options]="options" optionLabel="value"></p-dropdown>
          </div>
        </div>
      </div>

</div>

这是它的样子...我想在其旁边具有相等的宽度跨度和相等的宽度输入/下拉菜单。但是下拉菜单拒绝这样做。

编辑

  <div class="p-grid p-dir-col p-offset-2">

      <div class="ui-g ui-fluid">
        <div class="p-col p-md-10">
          <div class="ui-inputgroup" fxLayout="row">
            <div fxFlex class="p-col p-md-4">
              <span class="ui-inputgroup-addon" style="width:100%">Text</span>
            </div>
            <div fxFlex class="p-col p-md-8">
              <input type="text" pInputText placeholder="abcdef">
            </div>
          </div>
        </div>
      </div>

      <div class="ui-g ui-fluid">
        <div class="p-col p-md-10">
          <div class="ui-inputgroup" fxLayout="row">
            <div fxFlex class="p-col p-md-4">
              <span class="ui-inputgroup-addon" style="width:100%">Dropdown</span>
            </div>
            <div fxFlex class="p-col p-md-8">
              <p-dropdown [options]="options" optionLabel="value"></p-dropdown>
            </div>
          </div>
        </div>
      </div>

    </div

看起来更好，但我希望跨度能坚持输入/下拉菜单。而且，行之间的边距有点太大。

Answer 1

您可以使用Flex Layout

<div class="p-grid p-dir-col p-offset-2">

  <div class="ui-g ui-fluid">
    <div class="ui-md-10">
      <div class="ui-inputgroup" fxLayout="row">
        <div fxFlex><span class="ui-inputgroup-addon" style="width:280px">Text</span></div>
        <div fxFlex><input type="text" pInputText placeholder="abcdef"></div>
      </div>
    </div>
  </div>

  <div class="ui-g ui-fluid">
    <div class="ui-md-10">
      <div class="ui-inputgroup" fxLayout="row">                
        <div fxFlex><span class="ui-inputgroup-addon" style="width:280px">Dropdown</span></div>
        <div fxFlex><p-dropdown [options]="options" optionLabel="value"></p-dropdown></div>
      </div>
    </div>
  </div>

我尚未测试代码。您可能需要稍微玩一下。

Answer 2

  <div class="ui-g ui-fluid">
    <div class="p-col p-md-10">
      <div class="ui-inputgroup" fxLayout="row">
        <div fxFlex class="p-col p-md-4">
          <span class="ui-inputgroup-addon" style="width:100%">Text</span>
        </div>
        <div fxFlex class="p-col p-md-8">
          <input type="text" pInputText placeholder="abcdef">
        </div>
      </div>
    </div>
  </div>

  <div class="ui-g ui-fluid">
    <div class="p-col p-md-10">
      <div class="ui-inputgroup" fxLayout="row">
        <div fxFlex class="p-col p-md-4">
          <span class="ui-inputgroup-addon" style="width:100%">Dropdown</span>
        </div>
        <div fxFlex class="p-col p-md-8">
          <p-dropdown [options]="options" optionLabel="value"></p-dropdown>
        </div>
      </div>
    </div>
  </div>

</div