Open ghost opened 6 years ago
@SivaPrakashK90 I'm afraid it's not an issue of this directive. In your code, #divDraggable
is not the parent element. In fact, NgbModal will create a 'modal-content'
to contain ng-template
. So if you can find a way to get correct templateRef of the parent element, you can make it work.
can you provide me working example?
@SivaPrakashK90, here is what i do. // i have 2 modal-content in my modal, the first one is the container as xieziyu said. const aa = document.getElementsByClassName('modal-content'); // set the first modal-content white and transparent aa[0].setAttribute('style','background-color: rgba(255,255,255,0)'); // set the second one not transparent aa[1].setAttribute('style','opacity: 1');
but the border still seen, i'm working on it.
@SivaPrakashK90 const aa = document.getElementsByClassName('modal-content'); aa[0].setAttribute('style', 'background-color: rgba(255,255,255,0);border:rgba(255, 255, 255, 0)'); aa[1].setAttribute('style', 'opacity: 1');
my idea:
<ng-template #modaltemplate>
<div ngDraggable class="modal-draggable"> //after ng-template you create a div so you can add ngDraggable attribute and class modal-draggable
// bootstrap modal head body footer goes here
</div>
</ng-template>
In component.ts you add this to open bootstrap.
the object is to add class to the modal-dialog
this.modalRef = this.modalService.show(modaltemplate, {class: 'backgroundTransparent'});
In component.css you add this css codes.
below code, we will set background and border-radius to modal-draggable
.modal-content > .modal-draggable {
background-color: #fff;
border-radius: 6px;
}
before we added style to modal-content, the result is like this
after we added style to modal-content
.backgroundTransparent .modal-content {
background: transparent;
border: 0;
}
hope this help.
faizal,
Hi I'm using NgbModal in Angular4 application. for that modal popup drag and drop, we are using angular2-draggable. it is working fine for simple "div" and it is not working as expected with ng-template
here is my sample code `<ng-template #divBranching let-c="close" let-d="dismiss"> <div ngDraggable [handle]="divDraggable" class="card" style="resize: both; overflow:hidden"> <div #divDraggable class="card-header">
Draggable Content
`
parent items is displaying in the same position. if i apply ngDraggable and [handle] to the ng-template we are unable to drag it. please help to fix this issue