Description:

When in RTL mode, and try to drag a element from a list, the element is offset to the right with the length of the screen width.

Please see the link where everything explained with video:

Angular package:

"dependencies": {
    "@angular/animations": "~17.3.12",
    "@angular/cdk": "^17.3.10",
    "@angular/common": "~17.3.12",
    "@angular/compiler": "~17.3.12",
    "@angular/core": "~17.3.12",
    "@angular/fire": "^17.1.0",
    "@angular/forms": "~17.3.12",
    "@angular/localize": "~17.3.12",
    "@angular/platform-browser": "~17.3.12",
    "@angular/platform-browser-dynamic": "~17.3.12",
    "@angular/router": "~17.3.12",
    "@angular/service-worker": "~17.3.12",
    "@bartholomej/ngx-translate-extract": "^8.0.2",
    "@faker-js/faker": "^8.2.0",
    "@fortawesome/fontawesome-free": "^6.1.2",
    "@gloriousky/tailwindcss-localization": "^1.1.0",
    "@milkdown/core": "^7.5.0",
    "@milkdown/ctx": "^7.5.0",
    "@milkdown/kit": "^7.5.5",
    "@milkdown/plugin-history": "^7.5.0",
    "@milkdown/plugin-listener": "^7.5.0",
    "@milkdown/plugin-prism": "^7.5.0",
    "@milkdown/plugin-tooltip": "^7.3.6",
    "@milkdown/plugin-upload": "^7.5.0",
    "@milkdown/preset-commonmark": "^7.5.0",
    "@milkdown/prose": "^7.5.0",
    "@milkdown/theme-nord": "^7.5.0",
    "@milkdown/transformer": "^7.5.0",
    "@ngrx/effects": "^17.2.0",
    "@ngrx/entity": "^17.2.0",
    "@ngrx/router-store": "^17.2.0",
    "@ngrx/store": "^17.2.0",
    "@ngrx/store-devtools": "^17.2.0",
    "@ngx-formly/bootstrap": "^6.1.8",
    "@ngx-formly/core": "^6.1.8",
    "@ngx-translate/core": "^14.0.0",
    "@popperjs/core": "^2.11.0",
    "@types/video.js": "^7.3.53",
    "@uppy/angular": "^0.5.2",
    "@uppy/aws-s3": "^3.2.3",
    "@uppy/aws-s3-multipart": "^3.5.4",
    "@uppy/golden-retriever": "^3.1.0",
    "@uppy/image-editor": "^2.1.2",
    "@uppy/remote-sources": "^1.0.3",
    "angular-svg-icon": "^14.0.0",
    "animate.css": "^4.1.1",
    "chartjs-plugin-annotation": "^3.0.1",
    "chartjs-plugin-datalabels": "^2.2.0",
    "conditio": "^2.3.4",
    "flowbite": "^2.5.1",
    "flowbite-datepicker": "^1.3.0",
    "i": "^0.3.7",
    "js-cookie": "^3.0.5",
    "js-sha256": "^0.11.0",
    "lodash": "^4.17.20",
    "logrocket": "^9.0.0",
    "moment": "^2.29.4",
    "ng-circle-progress": "^1.7.1",
    "ng-milkdown": "^0.0.3",
    "ng-prosemirror-adapter": "^0.0.6",
    "ng2-charts": "^4.1.1",
    "ngx-markdown": "^17.2.1",
    "npm": "^9.8.1",
    "prism-themes": "^1.9.0",
    "reconnecting-websocket": "^4.4.0",
    "remark-directive": "^3.0.0",
    "rxjs": "^7.5.0",
    "swiper": "^11.1.14",
    "tslib": "^2.3.0",
    "uuid": "^9.0.0",
    "video.js": "^8.5.2",
    "zone.js": "~0.14.10"
  },

If someone already have solution for it, It will be very help full for me.

Thanks

Description:

When in RTL mode, and try to drag a element from a list, the element is offset to the right with the length of the screen width.

Please see the link where everything explained with video: https://github/angular/components/issues/29604

Angular package:

"dependencies": {
    "@angular/animations": "~17.3.12",
    "@angular/cdk": "^17.3.10",
    "@angular/common": "~17.3.12",
    "@angular/compiler": "~17.3.12",
    "@angular/core": "~17.3.12",
    "@angular/fire": "^17.1.0",
    "@angular/forms": "~17.3.12",
    "@angular/localize": "~17.3.12",
    "@angular/platform-browser": "~17.3.12",
    "@angular/platform-browser-dynamic": "~17.3.12",
    "@angular/router": "~17.3.12",
    "@angular/service-worker": "~17.3.12",
    "@bartholomej/ngx-translate-extract": "^8.0.2",
    "@faker-js/faker": "^8.2.0",
    "@fortawesome/fontawesome-free": "^6.1.2",
    "@gloriousky/tailwindcss-localization": "^1.1.0",
    "@milkdown/core": "^7.5.0",
    "@milkdown/ctx": "^7.5.0",
    "@milkdown/kit": "^7.5.5",
    "@milkdown/plugin-history": "^7.5.0",
    "@milkdown/plugin-listener": "^7.5.0",
    "@milkdown/plugin-prism": "^7.5.0",
    "@milkdown/plugin-tooltip": "^7.3.6",
    "@milkdown/plugin-upload": "^7.5.0",
    "@milkdown/preset-commonmark": "^7.5.0",
    "@milkdown/prose": "^7.5.0",
    "@milkdown/theme-nord": "^7.5.0",
    "@milkdown/transformer": "^7.5.0",
    "@ngrx/effects": "^17.2.0",
    "@ngrx/entity": "^17.2.0",
    "@ngrx/router-store": "^17.2.0",
    "@ngrx/store": "^17.2.0",
    "@ngrx/store-devtools": "^17.2.0",
    "@ngx-formly/bootstrap": "^6.1.8",
    "@ngx-formly/core": "^6.1.8",
    "@ngx-translate/core": "^14.0.0",
    "@popperjs/core": "^2.11.0",
    "@types/video.js": "^7.3.53",
    "@uppy/angular": "^0.5.2",
    "@uppy/aws-s3": "^3.2.3",
    "@uppy/aws-s3-multipart": "^3.5.4",
    "@uppy/golden-retriever": "^3.1.0",
    "@uppy/image-editor": "^2.1.2",
    "@uppy/remote-sources": "^1.0.3",
    "angular-svg-icon": "^14.0.0",
    "animate.css": "^4.1.1",
    "chartjs-plugin-annotation": "^3.0.1",
    "chartjs-plugin-datalabels": "^2.2.0",
    "conditio": "^2.3.4",
    "flowbite": "^2.5.1",
    "flowbite-datepicker": "^1.3.0",
    "i": "^0.3.7",
    "js-cookie": "^3.0.5",
    "js-sha256": "^0.11.0",
    "lodash": "^4.17.20",
    "logrocket": "^9.0.0",
    "moment": "^2.29.4",
    "ng-circle-progress": "^1.7.1",
    "ng-milkdown": "^0.0.3",
    "ng-prosemirror-adapter": "^0.0.6",
    "ng2-charts": "^4.1.1",
    "ngx-markdown": "^17.2.1",
    "npm": "^9.8.1",
    "prism-themes": "^1.9.0",
    "reconnecting-websocket": "^4.4.0",
    "remark-directive": "^3.0.0",
    "rxjs": "^7.5.0",
    "swiper": "^11.1.14",
    "tslib": "^2.3.0",
    "uuid": "^9.0.0",
    "video.js": "^8.5.2",
    "zone.js": "~0.14.10"
  },

If someone already have solution for it, It will be very help full for me.

Thanks

• angular
• angular-material
• angular-cdk
• angular-cdk-drag-drop
• angular-localize

1 Answer 1

You just need to overwrite the margin in the .cdk-drag-preview class:

.cdk-drag-preview {
   margin-right: auto  !important;
}

Check it on the stackblitz example.