k-button inline-flex with 2017.3.913

5 posts, 0 answers
  1. Robert
    Robert avatar
    27 posts
    Member since:
    Nov 2015

    Posted 20 Sep Link to this post

    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.

  2. Robert
    Robert avatar
    27 posts
    Member since:
    Nov 2015

    Posted 20 Sep in reply to Robert Link to this post

    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 -:(

     

     

  3. Neli
    Admin
    Neli avatar
    28 posts

    Posted 21 Sep Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  4. Robert
    Robert avatar
    27 posts
    Member since:
    Nov 2015

    Posted 21 Sep in reply to Neli Link to this post

    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

  5. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    600 posts

    Posted 22 Sep Link to this post

    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:

    .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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top