KendoWindow not displaying any action buttons

7 posts, 1 answers
  1. BitShift
    BitShift avatar
    29 posts
    Member since:
    Aug 2014

    Posted 02 Aug Link to this post

    When I display a window, the actions are not visible, so I did a simple test.  Same thing - no action buttons.

     

                    $("#MyWindow").kendoWindow({
                        actions: ["Minimize", "Close"]
                    }).open();

    See attached image. 

  2. Answer
    Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 04 Aug Link to this post

    Hi,

    I was not able to reproduce the issue in the following snippet:

    http://dojo.telerik.com/UbAsu

    Please edit the sample in order to show the problem and we will be happy to help.

    On a side note - did you check the console of your browser for any specific errors?

    Regards,
    Kiril Nikolov
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
  4. BitShift
    BitShift avatar
    29 posts
    Member since:
    Aug 2014

    Posted 15 Aug in reply to Kiril Nikolov Link to this post

    Yes, I had the console open and no errors were seen.  I suspect a sylesheet or css conflict.  What would I edit in this case, as even the simplest example (see original post) exibits this, at least in my application.  

     

    At runtime, inspecting the rendered ui, even with a simple test

    <div class="k-widget k-window" data-role="draggable" style="padding-top: 29px; min-width: 90px; min-height: 50px; width: 300px; height: 200px; display: block; top: 305.5px; left: 642px; z-index: 10003;"><div class="k-window-titlebar k-header" style="margin-top: -29px;">&nbsp;<span class="k-window-title" id="wndInvWindow_wnd_title">Choose to apply ..</span><div class="k-window-actions"><a role="button" href="#" class="k-window-action k-link"><span role="presentation" class="k-icon k-i-close">Close</span></a></div></div><div id="wndInvWindow" data-role="window" class="k-window-content k-content" tabindex="0" role="dialog" aria-labelledby="wndInvWindow_wnd_title"><br><div><br>    This is a list of ...<br>    <br></div></div><div class="k-resize-handle k-resize-n"></div><div class="k-resize-handle k-resize-e"></div><div class="k-resize-handle k-resize-s"></div><div class="k-resize-handle k-resize-w"></div><div class="k-resize-handle k-resize-se"></div><div class="k-resize-handle k-resize-sw"></div><div class="k-resize-handle k-resize-ne"></div><div class="k-resize-handle k-resize-nw"></div></div>

    Then, comparing to the outter html in the linked dojo example, 

    <p><div class="k-widget k-window" data-role="draggable" style="padding-top: 37px; min-width: 90px; min-height: 50px; z-index: 10003; width: 231px; height: 188px;"><div class="k-window-titlebar k-header" style="margin-top: -37px;">&nbsp;<span class="k-window-title" id="dialog_wnd_title"></span><div class="k-window-actions"><a role="button" href="#" class="k-window-action k-link"><span role="presentation" class="k-icon k-i-minimize">Minimize</span></a><a role="button" href="#" class="k-window-action k-link"><span role="presentation" class="k-icon k-i-maximize">Maximize</span></a><a role="button" href="#" class="k-window-action k-link"><span role="presentation" class="k-icon k-i-close">Close</span></a></div></div><div id="dialog" data-role="window" class="k-window-content k-content" tabindex="0" role="dialog" aria-labelledby="dialog_wnd_title"></div><div class="k-resize-handle k-resize-n" style="display: block;"></div><div class="k-resize-handle k-resize-e" style="display: block;"></div><div class="k-resize-handle k-resize-s" style="display: block;"></div><div class="k-resize-handle k-resize-w" style="display: block;"></div><div class="k-resize-handle k-resize-se"></div><div class="k-resize-handle k-resize-sw" style="display: block;"></div><div class="k-resize-handle k-resize-ne" style="display: block;"></div><div class="k-resize-handle k-resize-nw" style="display: block;"></div></div></p><p></p>

     

    Im not sure I see any real difference

  5. BitShift
    BitShift avatar
    29 posts
    Member since:
    Aug 2014

    Posted 15 Aug Link to this post

    Sure enough, inspecting the CSS, comparing the dojo example and mine, I see this snippet in my own example that is hiding the action buttons, which is not in the dojo example.  I see it referenced in my CSS. 

    .k-window-action
    {
        visibility: hidden;
    }

  6. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 16 Aug Link to this post

    Hi,

    I have tried again, but I am not able to reproduce this or guess what might be causing it. If you manage to provide a runnable sample I will be happy to take a look and advise you further.

    Regards,
    Kiril Nikolov
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  7. BitShift
    BitShift avatar
    29 posts
    Member since:
    Aug 2014

    Posted 16 Aug Link to this post

    @Kiril  - in my last post, Im saying that it was my custom stylesheet that was "stepping" on the buttons.  Ive since managed to resolve that and its working as expected now.  It wasnt a javascript error, but a conflict in MY stylesheet that was preventing the action buttons from displaying.  I had to use the html inspector to spot where the conflict was coming from. 
  8. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 17 Aug Link to this post

    Hi,

    Thanks for the update. I am happy to hear that the issue is resolved. 

    Regards,
    Kiril Nikolov
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top
Kendo UI is VS 2017 Ready