question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Fit columns without forcefitcolumns=true

See original GitHub issue

When resizing a column and forceFitColumns=true all columns always stick to the viewport 100%. The right most column’s right border sticks to the viewport right border and a horizontal scrollbar is never shown. When resizing a single column the next column grows/shrinks until it’s max/minwidth and then the next column etc.

forceFitColumns is deprecated and we get a console.log message now: forceFitColumns option is deprecated - use autosizeColsMode.

Having read https://github.com/6pac/SlickGrid/wiki/Auto-Column-Sizing my expectation is that I could get a similar sticky fitting behavior with autosizeColsMode=FitColsToViewport and all columns set to autosizeMode=GUI and sizeToRemaining=true.

But when I resize a column with those options and also with any other combo of settings I tried, the right border of the right column never sticks to the right border of the viewport: either a horizontal scrollbar appears, or there is margin.

I tried this with http://6pac.github.io/SlickGrid/examples/example-size-to-content.html and in my application.

Perhaps I’m missing some setting. How can I get the (old) sticky/fitting behavior with autosizeColsMode?

Issue Analytics

  • State:open
  • Created 2 years ago
  • Comments:14 (5 by maintainers)

github_iconTop GitHub Comments

2reactions
6paccommented, Apr 30, 2021

Thanks for taking this one up, @ghiscoding!

Just should say that I put the new autosizing feature in a while back, but I have found it still quite difficult to get good results with it on ‘Auto’ mode. It’s not that there’s anything wrong - it’s just a quite hard problem. I think I need to go back and do some more tweaking.
So I’d say, don’t be afraid to use the legacy mode if that works better for you.

I will be doing some more testing soon, I’ll keep this issue in mind when I do.

0reactions
6paccommented, Jun 15, 2021

Ok, so as far as I can see, the forceFitColumns code has not actually been touched - it’s still there and still works, up to the current version. I think the easiest solution is simply for me to remove the message.

It should be possible to reproduce forceFitColumns behaviour with

 options.autosizeColsMode = Slick.GridAutosizeColsMode.LegacyForceFit;

I’ll go over and check the interactions to make sure this is the case, and revisit the ForceFit behaviour in the new mode. That should take us into the future.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Adjust the column size to see everything - Microsoft Support
In Excel for Mac 2011, on the Home tab, under Alignment, point to Wrap Text, and then click Shrink Text to Fit. See...
Read more >
How to AutoFit in Excel: adjust columns and rows to match ...
In this tutorial, you will learn how to use the Excel AutoFit feature to make cells, columns or rows expand to fit text...
Read more >
Auto-Sizing Columns in CSS Grid: `auto-fill` vs `auto-fit`
The columns will not wrap into new rows if the viewport width is too narrow to fit them all with the new minimum...
Read more >
Excel AUTOFIT: Make Rows/Columns Fit the Text Automatically
AutoFit is a feature in Excel that allows you to quickly adjust the row height or column width to fit the text completely...
Read more >
fit-content() - CSS: Cascading Style Sheets - MDN Web Docs
In grid properties it is relative to the inline size of the grid container in column tracks and to the block size of...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found