Вопрос или проблема
Когда я перехожу в режим мобильной адаптивности в веб-браузере, иконка редактирования сейчас не отображается под колонкой «Вложения», если название файла действительно длинное, как на картинке ниже. Я нашел, где находится проблема в инструментах разработчика. Она в классе span, называемом d-flex. Когда я отключаю .d-flex: display: flex !important, иконка появляется. В решении кода в данный момент нет файла scss, так что как лучше всего решить эту проблему, чтобы иконка отображалась на основе того, что я нашел? Создать новый файл scss, чтобы обрабатывать отображение иконки только при мобильном просмотре, как @media only screen? Если да, то как мне это настроить в файле scss?
Вот две картинки до и после удаления правила css .d-flex
вставьте описание изображения здесь
А это код для колонки с тегом span
<ng-template #transactionAttachmentsCell let-row="transaction">
<span class="d-flex flex-row align-items-center">
<ng-container *ngIf="hasWriteAccess || row.attachments?.length > 0; else
emptyCell">
<app-button *ngIf="row.attachments?.length > 0"
type="link"
icon="{{ row.attachments[0].matIcon.icon }}"
iconColor="{{ row.attachments[0].matIcon.color }}"
[iconTooltip]="row.attachments[0].filename"
(onClick)="$event.stopPropagation();
openAttachment(row.attachments[0].url)">
{{ (row.attachments[0].filename | truncateFilename: 18) }}
</app-button>
<app-icon-button *ngIf="hasWriteAccess"
[icon]="row.attachments?.length > 1 ? 'more_vert' :
(row.attachments?.length > 0 ? 'edit' : 'add')"
[iconTooltip]="row.attachments?.length > 1 ? ('+' +
(row.attachments.length - 1) + ' Дополнительное Вложение' +
(row.attachments.length - 1 === 1
? '' : 's')) : null"
(onClick)="$event.stopPropagation();
showManageAttachmentsDialog(row)">
</app-icon-button>
</ng-container>
</span>
</ng-template>
Ответ или решение
Чтобы решить проблему с отсутствием значка редактирования (иконки карандаша) в мобильной версии под столбцом "Attachments" (Вложения) из-за длинных имен файлов, мы можем внести изменения в стили CSS. Как вы уже заметили, проблема заключается в классе .d-flex, который установливает стиль display: flex !important. Когда этот стиль отключен, иконка отображается.
Шаги для решения проблемы:
-
Создание нового SCSS файла:
Если у вас нет отдельного SCSS файла для этого компонента, вы можете создать его. Назовите файл, например,custom-styles.scss. Убедитесь, что он импортируется в ваш основной файл стилей или компонент. -
Определение медиа-запроса:
В новом файле SCSS создайте медиа-запрос, который будет применяться только к мобильным устройствам. Ниже представлен пример соответствующего кода:@media only screen and (max-width: 768px) { .d-flex { display: block !important; // или другой подходящий стиль, который решит проблему } }Указанный
max-width: 768pxозначает, что стили будут применяться к экранам шириной 768 пикселей и меньше. Вы можете изменить это значение в зависимости от ваших требований. -
Обновление существующего стиля:
Также, чтобы конкретно решить проблему с отображением иконки, вы можете добавить стили, чтобы гарантировать, что иконки будут нормально отображаться даже при длинных названиях файлов. Например:@media only screen and (max-width: 768px) { .attachments-column { overflow: hidden; // Скрыть переполнение, если текст длинный white-space: nowrap; // Запретить перенос строк text-overflow: ellipsis; // Добавить многоточие в конце } .d-flex { display: block !important; //или display: inline-block; } } -
Тестирование изменений:
После внесения указанных изменений, протестируйте ваши стили в мобильной версии браузера, чтобы убедиться, что иконка появляется корректно и что длинные названия файлов не мешают ее отображению. - Оптимизация:
Если проблема остается, возможно, стоит проверить другие контейнеры и компоненты, которые могут влиять на отображение иконки. Убедитесь, что другие CSS-стили не конфликтуют с вашими новыми правилами.
Следуя этим указаниям, вы сможете устранить проблему с отсутствием значка редактирования в мобильной версии и улучшить удобство работы с вложениями в вашем приложении.