This is a migrated thread and some comments may be shown as answers.

KendoWindow not displaying any action buttons

6 Answers 1164 Views

Window

This is a migrated thread and some comments may be shown as answers.

BitShift asked on 02 Aug 2016, 05:18 PM

clipboard01.png

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.

6 Answers, 1 is accepted

Accepted

answered on 15 Aug 2016, 12:57 PM

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