Odd blue borders and textbox in handsontable

Tags: #<Tag:0x00007efc609d9230>
#1

I have a very basic handsontable in my component in React.

<HotTable
    settings={{ licenseKey: 'non-commercial-and-evaluation' }}
    data={this.state.rawData}
    colHeaders={false}
    rowHeaders={false}
    readOnly={true}
    width="600"
    height="300"
/>

When I click on the top left cell, i see very odd blue borders as follows. We could see that it is related to wtBorder .

58
Screenshot 2021-12-22 at 13.47.58.png1920×434 135 KB

Does anyone know what’s wrong here? I tried to create a codesandbox, but in the snippet I could not reproduce the problem.

PS: additionally, there is a textbox generated at the bottom of the page, when we write text inside, it impacts cell values. It is strange as well.

#2

I @chengtie

Do you have any other components on the site beside the table? Or maybe there are some CSS code that affects the table itself?

Without the demo we won’t be able to check the problem.

#3

I see that the same question was asked on the Stack Overflow and I agree that the issue may lay in the CSS, or even a lack of the Handsontable CSS import in your project.

@chengtie have you used the

@import 'handsontable/dist/handsontable.full.css';

in the main CSS file in the project?

1 Like
#4

Yes, we just need to add the css file. Thank you.

#5

I’m glad to hear that it works well now.

If you would have any further questions or needed guidance please feel free to open a new ticket or send me an email at support@handsontable.com

#6