Edit icon in mobile view missing

HTML & CSS
1

When I go to mobile responsive view in a web browser the Edit pencil icon currently doesn’t show under the ‘Attachments’ column if the name of the file is really long like in the picture below. I found where the problem is in the developer tools. It is in the span class called d-flex. When I uncheck .d-flex: display: flex !important the icon shows. In the code solution there currently isn’t a scss file so what would be the best way to handle this to get the icon to show based off of what I found. Create a new scss file to handle showing the icon when in mobile view only like @media only screen? If so how would I set that up in the scss file?

Here are the two pics before and after removing the .d-flex css rule

Image 9-17-24 at 5.25 PM
Image 9-17-24 at 5.25 PM1920×874 118 KB

Image 9-17-24 at 5.25 PM (1)
Image 9-17-24 at 5.25 PM (1)1920×874 108 KB

And this is the code for the column

<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) + ' Additional Attachment' + (row.attachments.length - 1 === 1 ? '' : 's')) : null"
                             (onClick)="$event.stopPropagation(); showManageAttachmentsDialog(row)">
            </app-icon-button>
        </ng-container>
    </span>
</ng-template
2

Its probably because a flex box doesn’t allow its flex-items to wrap by default so you need to allow it to wrap.

In bootstrap I think you can just add the flex-wrap class to the parent but you’d need to double check the documentation for your version.


flex-wrap

e.g.

<span class="d-flex flex-wrap flex-row align-items-center">

1 Like
3

Thank you!!

1 Like