Как переопределить атрибуты встроенного стиля элемента div наложения p-dropdown

Я использую модуль primeng p-dropdown. Я прикрепил <ng-template>, чтобы показать мои данные в трех столбцах: имя, адрес и адрес электронной почты соответственно. Без использования атрибута appendTo происходит перетаскивание большого количества текста на следующую строку и уродливую горизонтальную полосу прокрутки. Я использовал appendTo="body", и проблема с отбрасыванием текста частично устранена, но я все еще вижу, что текст столбца адреса переносится на следующую строку. После дальнейшего расследования я обнаружил, что p-dropdown выводит элемент оверлея div, и в моем случае для него встроен атрибут стиля css 'min-width', установленный на '473px'. Вот выводимый элемент div.

<div class="ng-trigger ng-trigger-overlayAnimation ng-tns-c5-5 extendWidth ui-dropdown-panel ui-widget ui-widget-content ui-corner-all ui-shadow ng-star-inserted" ng-reflect-klass="extendWidth" ng-reflect-ng-class="ui-dropdown-panel  ui-widget u" style="min-width: 473px; z-index: 1001; top: 210px; left: 419.875px; transform: translateY(0px); opacity: 1;">

Я использовал инструменты разработчика Chrome, чтобы изменить его на 635px, и панель наложения стала достаточно широкой, чтобы отображать адрес в одной строке, горизонтальной полосы прокрутки больше нет. Теперь я пытаюсь переопределить этот встроенный стиль из Angular, и я не могу этого сделать.

  1. Документация библиотеки предоставляет свойство panelStyle для применения встроенного стиля к элементу оверлея div, я пробовал использовать его, но, поскольку !important не может быть применен здесь (потому что он отправляет эти встроенные стили в ngStyle на бэкэнде). Так что в моем случае это было бесполезно.
  2. Затем я попытался использовать атрибут panelStyleClass, чтобы установить для класса значение extendWidth. Имя класса отображается в блоке div, но примерно так ng-reflect-klass="extendWidth". И стили css, присутствующие внутри класса, не будут применяться даже с :host >>>
<p-dropdown
  name="customer"
  [style]="{ width: '100%' }"
  (onChange)="addCustomer()"
  [autoDisplayFirst]="false"
  [options]="customers"
  [(ngModel)]="selectedCustomer"
  optionLabel="fullName"
  [filter]="true"
  autofocus="true"
  [showClear]="true"
  required
  appendTo="body"
  panelStyleClass="extendWidth"
>
  <ng-template let-customer pTemplate="item">
    <div class="p-grid">
      <div class="p-col-3">{{ customer.value.fullName }}</div>
      <div class="p-col-6">{{ customer.value.streetAddress }}</div>
      <div class="p-col-3">{{ customer.value.email }}</div>
    </div>
  </ng-template>
</p-dropdown>

Это должно позволить мне каким-то образом переопределить настраиваемый атрибут min-width.


angular primeng primeng-dropdowns
person Community    schedule 07.02.2019    source источник
comment
можете ли вы создать stackblitz stackblitz.com/fork/angular, чтобы упростить отладку и исправление   -  person TheParam    schedule 07.02.2019
comment
@TheParam, пожалуйста, stackblitz.com/edit/angular-geh3wi   -  person    schedule 08.02.2019

Ответы (2)


arrow_upward
0
arrow_downward

Чтобы переопределить min-width, установленный primeng для элемента, вы можете указать собственный класс для панели наложения:

<p-dropdown panelStyleClass="minWidthOverride" ... >

а затем стилизуйте это в основном файле css:

.minWidthOverride {
  min-width: 650px !important;
}

Причина, по которой он должен быть в основном файле css, а не в стиле компонента, заключается в том, что вы прикрепляете оверлей к body страницы, а не как дочерний элемент вашего компонента.

См. обновленную демонстрацию stackblitz

PS: я бы, вероятно, выбрал другой макет, чтобы адрес был не в col-xs-3, а в col-xs-12, поэтому в нем было достаточно места. Адрес просто слишком длинный, чтобы его можно было разумно отобразить в пределах 3 столбцов раскрывающейся панели.

person Ludevik    schedule 07.02.2019
comment
Я обновил ответ, проверьте, помогает ли он в вашем случае использования - person Ludevik; 08.02.2019
comment
ты можешь попробовать [style]="{'width':'100%'}" - person Ludevik; 08.02.2019
comment
что ты используешь для верстки? бутстрап или какая-то другая сетка? - person Ludevik; 09.02.2019
comment
Я использую праймфлекс. - person ; 09.02.2019
comment
посмотрите мой отредактированный stackblitz, мне он кажется нормальным. возможно, вы могли бы создать stackblitz со всем макетом, поскольку кажется, что проблема в другом. - person Ludevik; 09.02.2019
comment
Привет, спасибо за уделенное время. Я воссоздал макет, чтобы он соответствовал тому, который есть в моем проекте. Перейдите по этой ссылке. stackblitz.com/edit/angular-geh3wi Моя главная страница приложения разделена на две 6 колонки. И проблема с раскрывающимся списком возникает в первом col-xs-6. Теперь, если бы мы могли каким-то образом переопределить свойство min-width сгенерированного наложения, мы бы легко решили проблему с горизонтальной полосой прокрутки и проблемой отбрасывания текста. - person ; 11.02.2019
comment
ты сохранил свой стекблиц? Я не вижу там col-xs-6. Вероятно, вам потребуется его разветвить, чтобы иметь возможность редактировать. - person Ludevik; 11.02.2019
comment
окончательный ответ: D - person Ludevik; 13.02.2019
comment
Имеет смысл и отлично работает. Большое спасибо. И да, в моем случае я пока назначу ему col-xs-6. - person ; 14.02.2019

arrow_upward
0
arrow_downward

Вам нужно добавить следующий класс в свой style.css, чтобы переопределить стиль для раскрывающегося меню пользовательского интерфейса.

ui-dropdown-panel .ui-dropdown-items-wrapper {
    overflow: auto;
    min-width: 360px;
}

Здесь разветвленное решение stackblitz

person TheParam    schedule 08.02.2019
comment
Хотя он работает для проблемного наложения раскрывающегося списка, я заметил, что он фактически увеличивает ширину наложения для раскрывающихся списков, которые в нем не нуждаются. ссылка - person ; 08.02.2019