Can not implement with Ionic 5

haltu / muuri

Infinite responsive, sortable, filterable and draggable layouts

https://muuri.dev

MIT License

10.8k stars 643 forks source link

Can not implement with Ionic 5 #482

Closed jsBiztech closed 3 years ago

jsBiztech commented 3 years ago

Hi, I have been trying to use this library with Ionic 5 for a week now.

Setup & config:

Ionic 5, angular 12,
I have dynamic components being loaded in ion-grid view.
Highcharts library is used for one of the dynamic components.

I have faced the following issues so far:

Width did not apply to the grid container so all the elements are being loaded in one place.
if I give the position as relative then it adds a space of the same element in height as well as width as a blank place which sets the grid outside of the window. If I try to position it as absolute all the elements overlap in one place.
Drag not working when all elements are placed within the screen.
Autoscroll does not work.

Please, if anyone can share an Ionic project with this library or help fix these issues.

jsBiztech commented 3 years ago

@niklasramo , Can you please share any demo or any suggestions to fix the issues in angular at least?

niklasramo commented 3 years ago

@nagdevbharat I haven't used Muuri with Angular or Ionic myself so can't help off the top of my head. If you have specific problems I suggest to create separate issues and provide reduced test case of each issue (in e.g. codepen/codesandbox). That way it will be much easier for anyone to help you out :)

jsBiztech commented 3 years ago

@niklasramo , I have created an issue related to scrolling https://github.com/haltu/muuri/issues/483 That is the major one which i was not able to fix so far. please help me on that one.

jsBiztech commented 3 years ago

Eventually, I fixed issues related to the implementation with ionic

Look into the below grid options I have used to make it work

{
      layoutOnInit: false,
      dragEnabled: true,
      dragHandle: '.drag-handler',
      dragStartPredicate: () => {
        return this.dragEnabled;
      },
      dragCssProps: {
        touchAction: 'pan-y',
        userSelect: '',
        userDrag: '',
        tapHighlightColor: '',
        touchCallout: '',
        contentZooming: ''
      },
      dragContainer: document.getElementById('dragContainer'),
      layout: {
        fillGaps: true
      },
      dragAutoScroll: {
        targets: [
          {
            element: this.content.getScrollElement(),
            priority: 1,
            axis: Muuri.AutoScroller.AXIS_Y
          }
        ],
        handle: null,
        threshold: 40,
        safeZone: 0.1,
        speed: Muuri.AutoScroller.smoothSpeed(2000, 2700, 3200),
        sortDuringScroll: true,
        smoothStop: false,
      }
    };

Also, one can look into the given stackblitz url, which has complete implementation with Ionic: https://stackblitz.com/edit/ionic-mwjdis?

niklasramo commented 3 years ago

Alrighty, this issue seems resolved, so closing for now.