Default Theme overflow in k-tabstrip.k-content

[Wolfgang Weilguny]

Hey,

In our application we have a few bootstrap-style columns (i.e. a div with class "row" and 3 nested divs with class "col-4"). These are placed inside a Kendo-Tabstrip-Control.

At first we used the Bootstrap-v4 Theme and everything worked out nicely, however, we now switched to a (customized but this does not matter) Default-Theme and noticed that bootstrap-style columns inside a tabstrip always cause an overflow by a few pixels (8 to be exact). This causes a horizontal scrollbar to appear within the tabstrip-content only when using the Default Theme, but not when using the Bootstrap Theme.

Using my Browsers HTML-Viewer, I tracked it down to the fact that in Bootstrap-v4, the padding of .k-tabstrip > .k-content elements is set to 0.5rem 1rem (amounting to 8px 16px) while in the default theme it is set to 6px 12px which clearly amount to 4px of additional room on the sides (in sum, the afforementioned 8px).

Since the class "row" causes a margin of -15 on either side, this causes the entire row to overflow the k.content element which is the reason for the horizontal scrollbar.

This behavior is really easy to test, simply drop the following code as content into a kendo-tabstrip

<div class="row">
    ABC
</div>

 

Is this an error in the Default-theme and if so can we get this fixed?
Otherwise, is there any way to get consistent behavior with something like "row" and "col-" classes when using Kendo?

Best Regards

[Dimitar]

Hello Wolfgang Weilguny,

There are currently two ways in which the described issue can be resolved:

1) Utilize the Bootstrap .container or .container-fluid classes to negate the negative margins effect of the row. This is a common practice when working with Bootstrap in general:

<div class="container-fluid">
    <div class="row">ABC</div>
</div>

2) Use the Bootstrap .no-gutter class to have an edge-to-edge row:

<div class="row  no-gutters">ABC</div>

Regards,
Dimitar
Progress Telerik