PrimeNG выпадающий с пролетом - PullRequest
Новая
       16

PrimeNG выпадающий с пролетом

0 голосов
/ 13 апреля 2019

Мне нужно создать простую форму с текстом и выпадающими списками. Мне удалось разобраться с 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>

И вот как это выглядит ... Я хотел бы иметь равный диапазон ширины и равную ширину ввода / раскрытия рядом с ним. Но выпадающий отказывается это сделать.

enter image description here

редактировать 

  <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

Выглядит лучше, но я бы хотел, чтобы span был привязан к вводу / раскрытию. Кроме того, поле между строками слишком велико.

enter image description here

Ответы [ 2 ]

0 голосов
/ 13 апреля 2019 

  <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
0 голосов
/ 13 апреля 2019

Вы можете использовать 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>

Я не проверял код.Возможно, вам придется немного поиграть с ним.

...