CODEWITHSUNDEEP
popupkendo-ui-angular2
buchipper
buchipper

Reputation: 654

Kendo-popup within kendo-dialog

I have a kendo-popup in an angular component which I use within a kendo-dialog. The popup will be shown next to an icon when the user clicks on the icon. The positioning of the popup works fine when it is not inside a kendo-dialog. But the positioning is not correct when it is within a kendo-dialog. When the button is clicked within the kendo-dialog, the popup does not show up next to the icon. It shows up somewhere else.

Angular 2 Component 1 <comp-1>:

<span>
    <input type="text" #anchor />
    <button type="button" click="toggleView()"><i class="fa fa-cog fa-2x"></i>
    </button>
</span>
<kendo-popup [anchor]="anchor"><!-- Some Content --></kendo-popup>

Angular 2 Component 2:

<div click="openDialog()"></div>
<div>
    <kendo-dialog *ngIf="showDialog">
        <comp-1></comp-1>
    </kendo-dialog>
</div>

When I click the div to open the dialog, the kendo-popup does not show next to the input tag. It shows up somewhere to the lower right.

Edit 1:

Tried moving the popup to within the span. Still not working.

Angular 2 Component 1 <comp-1>:

<span>
    <input type="text" #anchor />
    <button type="button" click="toggleView()"><i class="fa fa-cog fa-2x"></i>
    </button>
    <kendo-popup [anchor]="anchor"><!-- Some Content --></kendo-popup>
</span>

Angular 2 Component 2:

<div click="openDialog()"></div>
<div>
    <kendo-dialog *ngIf="showDialog">
        <comp-1></comp-1>
    </kendo-dialog>
</div>

Note: I have intentionally left out the styles. In the original source, I have all the styles setup properly.

Upvotes: 1

Views: 3381

Answers (3)

George K
George K

Reputation: 1763

I tried to replicate the issue in a standalone Plunker demo, but it seems that the popup positions just fine in Kendo Dialog component: enter image description here

Tested in Chrome and Safari.

This is the dialog content: 

<input #anchor style="width: 100px"/>
<button kendoButton (click)="toggle()">Toggle</button>
<kendo-popup *ngIf="popupOpen" [anchor]="anchor" style="width: 100px">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</kendo-popup>

And this is the actual test Plunker demo:

http://plnkr.co/edit/Y3oBZwa8xf0WiP462jW7?p=preview

Could you modify it in order to reproduce the issue? This will help to find the cause of the erroneous behavior faster.

Upvotes: 1

Ashraful Islam
Ashraful Islam

Reputation: 7

please use div id which div you want to popup.

<div id="popupdiv"></div>

 $("#popupdiv").kendoWindow({
            title: "Inforamtion",
            resizeable: true,
            scrollable: false,
            width: "50%",
            actions: ["Pin", "Close"],//["Pin", "Refresh", "Maximize", "Close"],
            modal: true,
            //  pinned: true,
            animation: {
                close: {
                    effects: "fade:out"
                },
            }
        });

Upvotes: 0

mast3rd3mon
mast3rd3mon

Reputation: 8835

You have to specify where the popup will display by using an id of anchor on the target element:

<div>
    <target-tag #anchor></target-tag>
</div>
<div>
    <kendo-popup [anchor]="anchor">
        <Content to display>
    </kendo-popup>
</div>

Upvotes: 1

Related Questions