New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Sometimes ellipsis shown in selection column #1723
Comments
I think it's about the selection column width being automatically calculated. The timing for auto-width doesn't probably take the dialog's opening animation into account so the selection column is assigned the effective width it has during the opening animation. |
Thanks for the quick response. Your theory sounds probable, especially with the fact that the dialogs width doesn't matter. One could set the width of the dialog to 1800px and still have this happen. Do you know a workaround that I could use, until this issue is resolved and the fix released? Can I also ask whether it makes sense to have auto-width on the selection column, seeing as this column always has the same content? Is the auto-width only there to account for custom stylings that would change the size of the selection combobox? And lastly, could this be labelled as |
Yes, this is the reason. With the Material theme, the width of the selection column might be different than what it is with Lumo. |
grid.getElement().executeJS('this.recalculateColumnWidths()'); ...should work but the timing might be tricky. The dialog's opening animation is 0.25s so maybe 300ms timeout does the trick: grid.getElement().executeJS('setTimeout(function(){ this.recalculateColumnWidths() }, 300)'); |
Edit: I now have success with this way of doing it:
However reducing the timout to 300 will no longer work. and 600 is too much, I can see the ellipsis before they vanish. I will tweak a little and update here --> 400 ms is the golden timeout for me, at least in this test scenario. 390 ms will catch it most of the times but not always. |
I am using Vaadin 14.1.26 and Chrome 81 on a Windows machine. |
This is strange. I tried with the same exact Vaadin version, Chrome (81) browser both Windows and Mac OS, but can't reproduce the issue. |
I have just now tried again with a completely new spring-boot starter from https://vaadin.com/start/v14 (14.1.28) added my Test View and ran the project with |
I've got the same issue (Grid inside a Dialog). Vaadin 14.1.27 on Chrome 81.0.4044.138 (Mac). I applied this workaround: But if I open the inspector at the same time it's not working (I probably need to apply a timeout > 300). |
I applied a theme for this grid to remove the ... instead of calling the js function:
|
I can not use the theme workaround because I like (read: need) the ellipsis in all other columns than this one @jcgueriaud1 try a timeout of 400ms, that's the timeout duration that works for me best. My best guess of why this happens in the first place is that it apparently needs more than 300ms for its animation, or that the animation starts with a small delay, or similar. I think if it indeed only took 300ms then it would work great out of the box and we wouldn't be having this discussion. PS: This issue happens for me both when running with liberty (WebSphere) or spring boot. |
You could scope the selector to the first column only with: :host([theme~="my-workaround-theme"]) [part~="cell"][first-column] ::slotted(vaadin-grid-cell-content) {
text-overflow: clip;
} If you want to be even more specific about the column, you could use a classNameGenerator |
I'll update my workaround, thank you Tomi. |
Thank you Tomi! This one I can use and it works perfectly as a workaround. |
Description
The selection column of multiselect Grids sometimes shows ellipsis. Usually happens when the grid is added within a Dialog. I see similarity with previous issue #1523, but it's different.
Vaadin version 14.1.26
Expected outcome
No ellipsis shown in Grids selection column next to checkbox
Actual outcome
When Grid is in a Dialog, the selection column shows an ellipsis
Code for reproduction
Steps to reproduce
Browsers Affected
The text was updated successfully, but these errors were encountered: