Блог

Главная - Вопросы по программированию - Раскрывающийся список PrimeNG с диапазоном

Раскрывающийся список PrimeNG с диапазоном

#html #css #angular #primeng

#HTML #css #угловой #primeng

Вопрос:

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

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

введите описание изображения здесь

Ответ №1:

Вы можете использовать гибкую компоновку

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

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

Комментарии:

1. Спасибо, он работает немного лучше, но с этим все еще есть проблемы. Отредактировал мой вопрос с дополнительной информацией.

2. @JohnDoe, я думаю, вам не нужен css ‘width: 280px’. Если это не нормально, можете ли вы поделиться своим проектом по адресу stackblitz.com ? Я могу убедиться, что это работает для вас.

Ответ №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