slickGrid column resizing not worked Properly in RTL

[MaziarSangi]

Hello I Used SlickGrid in RTL Theme and When I resize the column width it wont resize the column in right way.

[6pac]

You have just changed repos, so firstly just checking you are now using our repo's codebase.

[ghiscoding]

You might need this direction: rtl as pointed out in this Stack Oveflow question.

[NadavPopplewell]

I have set direction : rtl on the body tab, the slickgrid columns display exactly the same as in LTR mode, but the header row is misaligned (too much to the left) seems to be a problem with

What is this 'RTL theme' that the first poster refers to?

thanks, Nadav

[6pac]

I suspect they just use direction: rtl as @ghiscoding said. We've never built in or tested RTL support explicitly in SlickGrid, but it's all just HTML. If you want to tweak and test, we're happy to incorporate any changes or alternate CSS.

[NadavPopplewell]

But it's not only CSS, is it? There seems to be some logic in the javascript code that adds left:+/-1000px to the header This seems to cause problems when the style is direction:RTL

[6pac]

https://stackoverflow.com/questions/25172683/why-does-slickgrid-add-1000px-in-js-then-reverse-it-in-css-style

I'll help if I can but I have never used RTL languages, so I don't think I'm the best person to be testing that scenario. If you could provide a new RTL example, I'm happy to tweak elements of the grid where necessary to support the example in working correctly. Possibly RTL will be a new Slickgrid option?

[NadavPopplewell]

How do I add the RTL example?

[6pac]

Start with an existing example page (you might be best with a fairly fully featured one, like 'model', and you might want to check additional features like grouping and have more than one example page). Just call them 'example4-model-RTL', for example.
You can create a PR to add them, or just tell me which ones and post the basic mods to the source and I'll add them to the repo. Then you can play with them and create a PR if you like, or just post code snippets until we're happy with the result, then I'll commit.

[MorDery]

can you help me to find where in the code is there a reference to resize columns (by dragging header columns), it doesn't work right in RTL

[6pac]

All the resize column code is in setupColumnResize() in slick.grid.js. It's possible that it's only set up for right handed column adjustment, but I don't know how RTL affects CSS. For example, I'm not sure if .append() appends to the left under RTL. That would make sense. So the drag handle setup is probably OK, but perhaps the width adjustment code needs to have a RTL option section added.

Really, an example is needed so we can actually see how this works and play around with it.

[ghiscoding]

So I took another look at this and all you need is to create a CSS class named "rtl" and then assign it to both headerCssClass (for the header titles) and cssClass (for the cells) and that should be enough (option 1). There is also a second way to do it shown further down (option 2). For both cases, it's solvable with CSS but you will need to user either the (option 1) cssClass/headerCssClass OR (option 2) flex CSS with a custom formatter to wrap the cell texts in a span.

Option 1

<style>
.rtl {
  direction: rtl;
}
</style>
<script>
var columns = [
  {id: "title", name: "Title", field: "title", cssClass: "rtl", headerCssClass: "rtl"},
];
</script>

in our next v5, we'll add CSS variables to our default them so that you can change the CSS to display: inline-flex and also justify-content to flex-start (or flex-end) BUT going this route will require the user to wrap the .slick-cell text in a span because CSS does not allow ellipsis to work with display: flex on the same div.

Option 2 (already doable)

Technically speaking, you could already do that yourself with the current styling theme, just modify the CSS

<style>
.slick-header-column, 
.slick-cell {
  display: inline-flex;
  justify-content: flex-end;
  
  // hack to allow child element with ellipsis, see article below
  // https://css-tricks.com/using-flexbox-and-text-ellipsis-together/ 
  min-width: 0;
}
.slick-header-column .slick-column-name,
.slick-cell span.child-cell {
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
</style>
<script>
// Custom Formatter to wrap text content into a SPAN
// we can add ellipsis on a SPAN
function spanFormatter (row, cell, val) {
  return `<span class="child-text">${val}</span>`;
}

var columns = [
  {id: "title", name: "Title", field: "title", formatter: spanFormatter},
];
</script>

as you can see both implementation works and you can do any of these 2 options in your code today, choose the best option that fits your need.

Summary/Notes

These kind of questions would be better answered on Stack Overflow. Also note that the CSS stylesheets that comes with SlickGrid were only created as templates, the user can and should modify it to fit their needs.

I think this should solve the problem and so I think it's ok to close this issue... if that doesn't, well sorry but all maintainers of SlickGrid are using LTR syntax, so the best persons to fix these kind of RTL issues is you instead of us.