I am having trouble merging the drag and drop functionality from Angular Material with resizing in a table. Currently, both features are conflicting and overlapping each other. What I am hoping for is to automatically cancel resizing once drag and drop starts, and vice versa. Any assistance on this matter would be greatly appreciated. Thank you! Here is the link to the repository: https://stackblitz.com/edit/flex-table-column-resize-ekrrrq?file=src/app/app.component.html
Handles can serve different purposes.
For example, in the case of drag and drop, instead of
<mat-header-cell
*matHeaderCellDef
(mousedown)="onResizeColumn($event, i)"
cdkDropList
cdkDropListLockAxis="x"
cdkDropListOrientation="horizontal"
(cdkDropListDropped)="dropListDropped($event, i)"
cdkDrag
[cdkDragData]="{ name: column.field, columIndex: i }"
(cdkDragStarted)="dragStarted($event, i)"
>
{{ column.field }}
</mat-header-cell>
You could use:
<mat-header-cell
*matHeaderCellDef
(mousedown)="onResizeColumn($event, i)"
cdkDropList
cdkDropListLockAxis="x"
cdkDropListOrientation="horizontal"
(cdkDropListDropped)="dropListDropped($event, i)"
cdkDrag
[cdkDragData]="{ name: column.field, columIndex: i }"
(cdkDragStarted)="dragStarted($event, i)"
>
{{ column.field }}
<mat-icon cdkDragHandle>drag_handle</mat-icon>
</mat-header-cell>
A similar concept applies to resizing. Instead of:
<mat-header-cell
*matHeaderCellDef
(mousedown)="onResizeColumn($event, i)"
cdkDropList
cdkDropListLockAxis="x"
cdkDropListOrientation="horizontal"
(cdkDropListDropped)="dropListDropped($event, i)"
cdkDrag
[cdkDragData]="{ name: column.field, columIndex: i }"
(cdkDragStarted)="dragStarted($event, i)"
>
{{ column.field }}
<mat-icon cdkDragHandle>drag_handle</mat-icon>
</mat-header-cell>
You could consider using:
<mat-header-cell
*matHeaderCellDef
cdkDropList
cdkDropListLockAxis="x"
cdkDropListOrientation="horizontal"
(cdkDropListDropped)="dropListDropped($event, i)"
cdkDrag
[cdkDragData]="{ name: column.field, columIndex: i }"
(cdkDragStarted)="dragStarted($event, i)"
>
{{ column.field }}
<mat-icon cdkDragHandle>drag_handle</mat-icon>
<mat-icon (mousedown)="onResizeColumn($event, i)">switch_left</mat-icon>
</mat-header-cell>
It might be more beneficial to incorporate handles for both functionalities.
I included mat-icon which requires importing MatIconModule from @angular/material package into your module.
My Angular app was originally on Angular 14 and used Bootstrap with SCSS compiled to node-sass/SASS package. It also utilized ng-bootstrap v11 and Bootstrap v4.3.1 for CSS styles. As part of a general upgrade, I needed to update the Angular version to 15. ...
Within the upcoming code snippet, a basic email validation is implemented. An input field's background color will display as white for valid emails and yellow for incorrect values. This functionality operates seamlessly in Firefox; however, in Chrome, ...
I have a tab within a div that includes text and an svg icon as shown herehttps://i.stack.imgur.com/TjwIK.png When I click on the tab, it expands like this https://i.stack.imgur.com/XNuBi.png After expanding, I want the svg icon to change to something e ...
I am currently developing an application using react and typescript, and I am facing a challenge in memoizing a function. const formatData = ( data: number[], gradientFill?: CanvasGradient ): Chart.ChartData => ({ labels: ["a", ...
Attempting to customize my personal website by making the sidebar width change when the sidebar button is clicked. I'm puzzled as to why it's not working as intended. I prefer to figure it out independently but any helpful tips would be appreciat ...
I'm currently working on an ember build that incorporates autoprefixer. My issue arises from the fact that the output location for 'assets/application-name.css' has shifted from its normal path to 'app/styles/app.css', and I would ...
Every time I click on a button, I keep encountering this error message. I am certain that my selector is correct, but I can't seem to figure out why I'm getting the Uncaught TypeError: Cannot read property 'classList' of undefined at HT ...
For the image, click here: I am facing an issue with boxes stacking on top of each other. When one box has more content, it overlaps the other. CSS: #destaques_container{ margin: 0 auto; } #destaques_container_dentro{ float: left; margi ...
I'm currently working on a project involving a book that flips on click on both sides. The process involves checking the direction when a page is clicked and flipping it to the left if it's not to the right. Additionally, I adjust the z-index to ...
I have successfully integrated SVG icons into my Angular 2 application. However, when hovering over the icons, they display the 'Icons' title. I utilized Angular SVG Icon for inline SVG to apply CSS styles. My goal is to eliminate this title fro ...
After upgrading our webapp from Firebase v8 to v9, we encountered various issues due to the new syntax. As I am still relatively new to Jest and Firebase/Firestore, not everything is completely clear to me yet ... I am attempting to mock getDocs from fire ...
Here is the current code snippet: <? while ($row1 = mysql_fetch_object($result1)) { echo '<a href="#" onclick="showhide("'.$row1->id.'");">Name</a>'; while ($row2 = mysql_fetch_object($result2)) { ...
I'm currently developing a website that utilizes fullpage.js and includes a section with multiple slides. These slides automatically transition every 10 seconds. I wanted to implement progress bars similar to those on Instagram, where each bar fills ...
I used bootstrap columns to organize my users' information. While they look good on larger screens like laptops and desktops, on smaller phone screens the second column appears to have some excess margin at the top. How can I fix this issue? <div ...
As a newcomer to Angular 2.0, I've been delving into new concepts in order to grasp it better. However, despite encountering this common issue multiple times and reading through various solutions, I haven't been able to find the answer to my prob ...
Currently, I am facing an unusual situation. In my code, I have incorporated 2 div elements within a FormControl, and everything appears to be working correctly with the input label for the Select. However, when I apply styling with flexDirection: 'ro ...
I am facing an issue with an npm package (@salesforce/canvas-js-sdk) as it doesn't come with a Typescript definition file. Since I am using React, I have been using the "import from" syntax to bring in dependencies. Visual Studio is not happy about th ...
I am struggling with CSS combinators, especially when dealing with nested div, ul, and li elements. My issue involves changing the CSS of a div with the class "H" when hovering over li elements with the class "G". Since all of this is contained within a s ...
this is the HTML code for my component. <div *ngFor="let getData of activePage"> <img [src]="svgsData(getData)" /> </div> I want to store the result of svgsData(getData) into a class member and use it in th ...
I am facing an issue with a table and row highlighting in my code. Even after clicking on a row, it remains highlighted. I attempted to use the <TableRow disableTouchRipple={true}> but it didn't work as expected. What can I do to remove the high ...