CSS - Border issue with hidden columns

[AGB]

Hi Guys,

Have just tripped over a little CSS issue whereby the left had side border is becoming double thickness when the first column is hidden.

To replicate the problem run the

    Grid / Column menu Demo

and hide the first column.

The results can been seen in the attached screenshot.

Digging into the CSS I can see you are removing the border on the first child

    .k-filter-row>th:first-child,
    .k-grid tbody td:first-child,
    .k-grid tfoot td:first-child,
    .k-grid-header th.k-header:first-child {
        border-left-width: 0;
    }

but when this column is hidden the subsequent column will still retain the left border resulting in the 2px border-left.

Regards
Alan

[Attila Antal]

Hi Alan,

The current behavior is as a side effect of the fact that the border of first cell in each row is set using CSS, thus increasing the performance compared to a JavaScript logic that would normally do the calculation.

To work around the issue try attaching the columnHide and columnShow event handlers to the Grid, then in those event handler apply the fix. Check out the following Dojo Sample: Kendo UI Grid - Fix Left border when hiding the first column

Create a CSS class that would remove the left border:

<style>
  .k-grid tr .removeBorderLeft {
	border-left-width: 0;
  }
</style>

 

columnHide and columnShow event handlers to add the removeBorderLeft class to the first visible cell (TD) in the row:

$(document).ready(function() {
  $("#grid").kendoGrid({
    // other settings,
	columnHide: function(e) {
	  // Add the fix when first column hides
	  if(!$('.k-grid-header .k-header:first-child').is(':visible')){
		// Fix the header
		$('.k-grid-header .k-header:visible').eq(0).addClass('removeBorderLeft');

		// Fix the rows
		$('.k-grid tr').each(function (){
		  $(this).find('td:visible').eq(0).addClass('removeBorderLeft');
		});
	  }
	}, 
	columnShow: function(e) {
	  // If first column has shown up
	  if($('.k-grid-header .k-header:first-child').is(':visible')){
		// remove the fix from all elements that has it
		$('.removeBorderLeft').removeClass('removeBorderLeft');
	  }
	}
  });
});

 

Kind regards,
Attila Antal
Progress Telerik

[AGB]

Hi Attila,

Thank you for your investigations and a workaround, but expecting a developer to add 20 lines of code onto every single grid, to cater for both locked & unlocked columns, is not the most ideal solution.

Personally I believe this to be a bug which should be addressed at source rather than bolting on another workaround to sort out a fundamental issue.

All these little workarounds are now starting to add up and what was once a great product is starting to become somewhat tarnished.

Regards
Alan

[Attila Antal]

Hi Alan,

You are absolutely right. This is a bug and it should be reported.

I have created a Bug Report on your behalf which can be accessed in the Feedback Portal at Grid double left-border when first column hidden. This was also logged in our GitHub repository at Grid double left-border when first column hidden #5288.

Thank you for your time and effort in reporting this issue. As a token of gratitude, I have updated your Telerik points.

Please note, that we are trying to implement the solution in the source code for most cases, if those do not collide with the main concepts of keeping the application lightweight. The implementation of this fix would be difficult and almost impossible to embed without breaking the current logic. 

Until the issue will be fixed, please use the available workaround.

We apologize for any inconvenience this may have caused.

Kind regards,
Attila Antal
Progress Telerik

[AGB]

Hi Attila,

Thank you for acknowledging this issue as a bug and the creation of the various Bug Reports.

Hopefully your developers can implement a solution which meets all our requirements, but in the mean time I can confirm your workaround does overcome the situation in the short-term.

Once again many thanks to you and the support team.

Regards
Alan