1

Below is link to simple github demo.

I'm trying to create a gridster app. Gridster will fit itself in screen. Gridster item will consists of some scrollable part (like not-scrollable header + scrollable content).
Ideally I would like the scrollable part to contain the remaining area of the gridster item. I can manage to get the entire item scrollable by setting css overflow property, but not the part.

the gridster config:

gridsterOptions: GridsterConfig = {
    gridType: 'fit',
    compactType: 'compactUp',
    minCols: 1,
    maxCols: 12,
    minRows: 1,
    maxRows: 12,
    outerMarginLeft: 4,
    outerMarginRight: 4,
    outerMarginTop: 4,
    displayGrid: 'always',
    defaultItemCols: 1,
    defaultItemRows: 1,
    minItemCols: 1,
    maxItemCols: 12,
    minItemRows: 1,
    maxItemRows: 12,
    itemChangeCallback: (newPosition) => {
      console.log('grid item event: ', newPosition);
      // todo, save changed gridster layout into user's profile?
    },
    draggable: {
      enabled: true
    },
    resizable: {
      enabled: false
    },
    pushItems: true,
    pushResizeItems: false,
    swap: true
  };

AppComponent:

<gridster [options]="gridsterOptions">
  <gridster-item [item]="widget" *ngFor="let widget of dashboard">
    <p>
     some non scrollable text
    </p>
    <div style="overflow: scroll;">
       <p>
          very big content here which should scroll to the end of gridster item
       </p>
    </div>
  </gridster-item>
</gridster>

My question is how to make the div have the size only to the end of the gridster item?

demo here

Many thanks for the help

bokkie
  • 1,477
  • 4
  • 21
  • 40
George Knap
  • 843
  • 9
  • 30

1 Answers1

1

This worked for me:

<gridster [options]="gridsterOptions">
   <gridster-item [item]="widget" *ngFor="let widget of dashboard">
      <div>
         some non scrollable text
      </div>
      <div style="overflow-y: auto; max-height: calc(100% - 40px);">
         <p>
           very big content here which should scroll to the end of gridster item
         </p>
      </div>
   </gridster-item>
</gridster>

where 40px is the height of the header div. This works fine on chrome, but on the rest, the right-hand side resizer is overlapping the scrollbar. It's very annoying and pretty difficult to grab the scroll instead of resizing the widget. EDIT: adding a margin solved the issue.

bokkie
  • 1,477
  • 4
  • 21
  • 40
  • Had the same thouht process as @bookie when I was working on my issue. In fact, if you want to have a scrollable gridster-item, you must add overflow-y:scroll to a CHILD container rather than gridster-item itself, otherwise you will break the UI of the gridster item's drag target. See this for more specific explanation of the full fix & implementation: https://github.com/tiberiuzuld/angular-gridster2/issues/337 – Sean Halls May 05 '20 at 19:47