Toolbar - Toolbar spacing adds additional space before the first element if the toolbar size is set to "none"

Web Themes Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Won't Fix

Last Updated: 21 Feb 2024 09:43 by ADMIN

Michael D

Created on: 26 Jan 2024 14:50

Type: Bug Report

Toolbar - Toolbar spacing adds additional space before the first element if the toolbar size is set to "none"

When setting the Toolbar's "size" property to "none", the Kendo-UI SASS themes apply a default spacing of 0 between all items. This can be adapted by altering the $kendo-toolbar-spacing variable. However, adding a value bigger than 0 leads to additional space before the first toolbar item.

This DOJO reproduces the behavior (since SASS-variables cannot be adapted in the DOJO-editor, I have mimicked the effect by setting appropriate styles to the container).

Note that this only happens if the toolbar's size is set to "none".

Kendo Theme Version: 7.0.2

5 comments

ADMIN

Emil

Posted on: 21 Feb 2024 09:43

Hello Michael,

The point you are making is a valid one and is something that we aim to address.

Currently, setting the content of the pseudo-element to 'none' will allow the gap to behave as you would expect it, and spacing towards the border of the toolbar will not be added before the first item. This would, of course, mean that the Toolbar will not be sized in case it has no items, which is to be expected.

Also, please bear in mind that padding is not applied if the Toolbar's 'size' property is set to 'none' as it is currently scoped through the sizing classes, e.g., k-toolbar-sm, k-toolbar-md, etc.

Regarding the question with the behavior of the empty Toolbar, we could opt out and not size empty containers at all or think of a more suitable solution -- such as removing the pseudo-selector and relying on lh ( when support is sufficient for all modern browsers) and :empty (when Selectors 4 is adopted ). However as I mentioned before this is not in our immediate development plans and I am unable to provide a specific timeframe.

Regards,
Emil
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Michael D

Posted on: 14 Feb 2024 15:32

Hi!

I am still not convinced that supporting the edge case of a toolbar without items legitimates a suboptimal UI for the default use case. However, this is clearly your decision to make.

Do you have any suggestions on how to fix this issue in a preferably stable and futureproof way on our side?

ADMIN

Emil

Posted on: 14 Feb 2024 13:31

Hello Michael,

My name is Emil and I am also a member of the Kendo Telerik Frontend team.

Before I try to address the aforementioned two points, let me apologise for the delayed response and any inconvenience this may have caused.

I see that you and my colleague have touch on the point regarding the use of the pseudo-element, but let me provide a some additional clarity on that.

Currently we use this approach in order for the Toolbar to retain it's size even if there are no items inside it and the behaviour that you mentioned in the second point is a result of that.

We are aware that this might not be optimal and are considering the possibility to not size empty containers at all, however addressing this is not in our immediate development plans.

Regards,
Emil
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Michael D

Posted on: 07 Feb 2024 10:24

Let me clarify: In my opinion, the current behavior is not optimal for the following reasons:

There are two settings, the padding (spacing around the items towards the border of the toolbar) and the gap (spacing between the items). Currently, they influence each other: When setting gap to 5px, spacing towards the border of the toolbar is added before the first item (which would be the padding's job to do).
The DOJO you provided shows that the space towards the toolbar's border is not applied consistently on all sides of the toolbar: E.g. when using the size "large", the space between the first tool is 5px while the space between the last item (overflow button) is 10px.

I know that the ::before-Pseudoelement causes the behavior mentioned above. But it is an invisible element, users cannot see it and they cannot interact with it - they do not know that it is there. Therefore, any change in appearance (like additional spacing) caused by this element would be unexpected.

Additionally, this is a breaking change, because in earlier versions padding and gap were independent of each other.

ADMIN

Zhuliyan

Posted on: 02 Feb 2024 14:00

Hello Michael D,

Thank you for the provided information and the example.

The additional space before the first Toolbar item after applying a gap to the Toolbar is expected in all sizes.

This is because there is always a ( ::before ) pseudo-element positioned before the other items of the Toolbar, which sizes the container when there are no items inside. The gap property of the Toolbar applies space between this pseudo-element and the first item.

Please refer to the following DOJO which demonstrates how the gap property behaves on different Toolbar sizes.
I created a custom example for the Toolbar with the first item having no additional space and the size set to none, in case this is the result you desire.

If this is not the case, please let me know and I will be glad to assist you further.

Regards,
Zhuliyan
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.