Cell border color is not correct when changing default Border style

[108signals]

📝 Provide detailed reproduction steps (if any)

1. Select one or more cells
2. Select cell properties
3. Change Border style to Solid (or any other value).

✔️ Expected result

When the border style is changed don't set border color and width until user chooses to do so.

❌ Actual result

Cell(s) border color is changed to black and width of 3px; however, the modal values for border color and width are not changed.

📃 Other details

• Browser: Safari
• OS: MacOS 11.2.3
• First affected CKEditor version: on your demo website
• Installed CKEditor plugins: on your demo website

[108signals]

There are additional issues related to cell properties that make this buggy. For example when users set a cell border to solid, black, and 1px it doesn't get applied on all sides of the cell.

[108signals]

Additional issues with border styles in video

Border.Style.Issues.mp4

[pomek]

✔️ Expected result

When the border style is changed don't set border color and width until user chooses to do so.

This was fixed in #9555. Could you verify it on our nightly docs?

[108signals]

@pomek thanks for the heads up that this was resolved. I checked the nightly build demo site and while better there are still issues. See the attached video

Screen.Recording.2021-06-02.at.10.47.25.AM.mov

[magda-chrzescian]

It seems that the posted issue is caused by the default mechanism of rendering overlapping borders.

When it comes to the table cell collapsed borders, the wider border is always rendered on top. If borders have the same width, the order of the elements counts - that's why the cells on the right and below the selected one don't cover it.

Since the z-index property won't be helpful here, it seems that we have to reset the borders of the adjacent cells (they're set to 1px solid gray for the whole table in the content styles) to display properly the 1px border which was set manually.

[mlewand]

Isn't this problem something that can be fixed by setting border-collapse: separate; CSS style?

Edit I applied this CSS and repeated steps from #9790 (comment) - the borders looks better:

[magda-chrzescian]

Isn't this problem something that can be fixed by setting border-collapse: separate; CSS style?

It solves this problem, but at the same time changes the behavior of the cell border dramatically.

In this case, borders are always duplicated, so applying a border to adjacent cells makes it 2 times wider between the cells. There is also no possibility to make the border 1px wide - next to the black line, there is always a gray one from the adjacent cell.

I'm not saying that it isn't a way to go, but we should be aware of the consequences. It obviously can be fixed this way by the integrator by applying mentioned border-collapse: separate; rule in the .ck-content .table table selector.

[108signals]

@magda-chrzescian wanted to check in and see if you have any updates on this issue

[108signals]

@magda-chrzescian @mlewand wanted to check in on this issue and see if there are any updates. thank you

[katypodbielski]

Hi CKE Team, I'm writing to see if there are any updates on this issue? Our users continue to flag and follow-up about this ticket. Resolving would improve the experience of using tables. Thank you

@maxbarnas @pomek @magda-chrzescian @mdabkowska88 @mlewand

[108signals]

Hi CKE team, wanted to see if there's any updates to this issue. We get many customer issues related to this.

@maxbarnas @pomek @magda-chrzescian @mdabkowska88 @mlewand