移动端视图下编辑图标丢失问题及SCSS解决方案咨询

核心结论 #

不用强制新建SCSS文件，但用SCSS结合媒体查询是更规范、易维护的移动端适配方案，能精准控制样式仅在移动端生效，避免干扰桌面端布局。

具体实现步骤 #

1. 新建SCSS文件
   在组件目录下创建样式文件，比如transaction-attachments-styles.scss。

2. 关联组件与样式文件
   在组件的@Component元数据中引入该SCSS：

   @Component({
     // 其他配置项
     styleUrls: ['./transaction-attachments-styles.scss']
   })
   

3. 编写移动端媒体查询样式
   在SCSS中针对移动端断点调整目标元素样式（断点宽度可根据项目实际响应式规则修改，768px是常用移动端阈值）：

   // 仅在屏幕宽度≤768px时生效
   @media only screen and (max-width: 768px) {
     // 给目标span添加自定义类提高选择器优先级，避免影响其他d-flex元素
     .transaction-attachments-container.d-flex {
       // 取消强制flex布局，改为块级布局让元素自动换行
       display: block !important;
       // 或者保留flex特性但允许换行：
       // flex-wrap: wrap !important;
       // align-items: flex-start !important;
     }
   
     // 可选：调整按钮和图标间距，优化移动端显示效果
     .transaction-attachments-container app-button,
     .transaction-attachments-container app-icon-button {
       display: inline-block;
       margin-right: 8px;
       margin-bottom: 4px;
     }
   }
   

4. 修改模板添加自定义类
   在目标span标签上添加自定义类，确保样式精准命中：

   <span class="d-flex flex-row align-items-center transaction-attachments-container">
     <!-- 原有内容不变 -->
   </span>
   

替代方案（不新建SCSS） #

如果不想新增文件，可直接在组件的styles数组中写内联样式（Angular示例）：

@Component({
  // 其他配置项
  styles: [`
    @media only screen and (max-width: 768px) {
      .transaction-attachments-container.d-flex {
        display: block !important;
      }
    }
  `]
})

问题根源说明 #

原代码中d-flex类的display: flex !important强制元素在一行布局，移动端屏幕空间有限，过长的文件名会挤压编辑图标所在的app-icon-button，导致其被挤出可视区域。通过媒体查询在移动端修改布局规则（改为块级或允许flex换行），就能让图标正常显示。

原问题代码 #

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

内容的提问来源于stack exchange，提问作者developer8492