Comments Text Area position & styling

General discussions Theming
1

Hey Alexandra,

We’re using ‘comments’ (plugin) in our HandsOnTable instance and while trying to set & render the HandsOnTable, the comment textArea appears at a distance from the target cell. Due to the above, if the content of the comment is a bit long, the same appears with a scroll but while trying to scroll inside the comment textArea, it disappears since the hover event for the target cell is lost.

We tried inspecting the element and we found that there are additional inline styles that are being applied to comment textArea and the values are pre-calculate for the top & left margin.

Please let us know as to how can we position & style the comment textArea. Looking forward to your support.

PFB the screenshot for reference

image
image342×270 4.22 KB

Thanks & Regards,
Faiz

2

Hey Faiz,

it looks like you might be using some CSS that is in conflict with Handsontable (any position or overflow)?

3

Hey Aleksandra,

There’s no additional CSS that’s being applied on the table. Also, in one of the modules it’s working fine but not in this one. I’ve also tried commenting all the styles on the component but the issue persists.

Furthermore, the issue has found to occur on Chrome but works fine on Firefox.

I’m not sure why the inline style is getting applied. (PFB for reference).

image
image597×119 6.14 KB

If you can take a look at this and let me know it would be really helpful.

Thanks,
Faiz

4

It works well on Chrome on my Windows https://handsontable.com/docs/7.3.0/demo-comments_.html do you see any misalignments here?

The code looks the same here

image
image470×249 12.6 KB

We add those styling dynamically via .js.

Are you able to replicate the issue on JSfiddle or any of our demos in the documentation?

5

I had tried replicating the issue on fiddle before using demos in the documentation, however the issue didn’t seem to occur there. Also, for us, it’s working fine on Firefox browser.

If you could let me know more about how the styling is added dynamically (if it’s calculated based upon some parent elements, etc).

Also, let me know if we can set the height of the Comment Text area and how can we do that.

Thanks.

6

Hey,

here’s everything we do for comments plugin https://github.com/handsontable/handsontable/tree/master/src/plugins/comments

In most of the cases the elements are not adjustable that’s why it would be better for us to replicate the issue and report it as an official bug. Only going official will keep the maintenance of the fix. Any CSS hacks may be broken for newer versions.