KendoWindow not displaying any action buttons

[BitShift]

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. 

[Kiril Nikolov]

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

 

 

[BitShift]

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

[BitShift]

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;
}

[Kiril Nikolov]

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

 

 

[BitShift]

@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. 

[Kiril Nikolov]

Hi,

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

Regards,
Kiril Nikolov
Telerik by Progress