k-button inline-flex with 2017.3.913

[Robert]

Using k-button with the "min" version of common.css shows buttons with display: inline-flex.

This does not happen with the non-'min' version in the 2017.1.223 src download , "kendo.common.css" file. (2017.3.913 src download doesn't appear to be available yet.)

Don't have time to investigate, just thought I'd mention it to see what others are seeing. The inline-flex attribute seems to make buttons wrap strangely onto new lines.

This is inside a kendoWindow, may not happen in normal circumstances.

The file size difference is very small, 259kb vs 210kb approx., so I'm just using the non-minified version.

[Robert]

OK, I found the 2017.3.913 version of kendo.common.css in the zip version of the src download, and the same misbehavior exists.

(The 7z and the zip versions of the source code are not currently aligned).

I will stay with the 2017.1.223 version for now, though I expect to run into other issues with mismatched file versions -:(

 

 

[Neli]

Hello Robert,

I have inspected the styling of buttons inside a Kendo Window on following versions 2017.1.223 and 2017.3.913 with both minified and non-minified stylesheets. For both versions the styling from the minified files is corresponding to the style from non-minified file.

As you noticed, on version 2017.3.913 the 'k-button' class is displaying 'inline-flex', while on version 2017.1.223 the style inside the 'k-button' class is 'display:inline-block'. However, I did not manage to reproduce any difference in the Button's behavior, with regard to wrapping, in those two versions.

Could you please link a dojo example that demonstrates the scenario, which you have noticed the different behavior in? This will allow us to compare the Button's behavior with 2017.1.223 and 2017.3.913 and their respective minified and non-minified versions.


Regards,
Neli
Progress Telerik

[Robert]

Afraid I just don't have the time to create a dojo on this. It seems to happen, for the most part, to buttons at the bottom of a kendoWindow with markup such as this:

<div id="divBottomButtons" style="position: absolute; bottom: 12px; width: 90%; height: 36px; text-align: right;">
                    <button id="btnOne" class="quicknotifier-one k-button" style="padding: 2px 15px; margin-right: 20px;">No</button>
                    <button id="btnTwo" class="quicknotifier-two k-button" style="padding: 2px 15px; margin-right: 20px;">Yes</button>
                </div>

 

Thanks, Bob

[Ivan Zhekov]

Robert,

we've changed the display property of k-button to inline-flex vs inline-block, because it solves many issues regarding layout. In most cases, it behaves like inline-block, so I find it strange that you are having issues. Could you elaborate more on the issue, perhaps include a code snippet of the issue (a bit more than that, since there are other stylesheets as well) and finally, which are the affected browsers...

It's worth noting that for browsers not supporting inline-flex, the button will fallback to being inline-block:

/* From https://github.com/telerik/kendo-ui-core/blob/master/styles/web/common/button.less */
.k-button {
    margin: 0;
    padding: @button-padding;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    background-repeat: repeat-x;
    background-position: 0 center;
    font: inherit;
    line-height: 1.72em;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    overflow: hidden;
    user-select: none;
    cursor: pointer;
    outline: none;
    -webkit-appearance: none;


    // No flexbox
    .k-no-flexbox & {
        display: inline-block;
    }
...
}

Regards,
Ivan Zhekov
Progress Telerik

[James]

Hi,

 

I have come across this issue with the inline-flex v's inline-block as well, here are 2 Dojo's showing the issue with the buttons on the right side of the toolbar:

https://dojo.telerik.com/@[e-mail]/ecuLI

 

https://dojo.telerik.com/@[e-mail]/IseXE

 

 

 

[Neli]

Hello,

Thank you for sharing the examples with us. 

As explained in previous replies, the display property of the k-button class has been changed to 'inline-flex' instead of 'inline-block'. In most scenarios the buttons render the same way. 

For such cases, where this change leads to incosistent rendering, I would recommend overriding of the .k-button class 

.k-button{
    display: inline-block;
  }

Regards,
Neli
Progress Telerik