drag and drop

src/app/book/book.component.css

@@ -20,12 +20,10 @@
 }
 
 .box-container {
-    display: none;
-    position: fixed;
+    /*display: none;*/
+    /*position: fixed;*/
     box-sizing: border-box;
-    height: 90%;
-    width: 80%;
-    margin-left: 2%;
+    /*margin-left: 2%;*/
     border-radius: 4px;
     opacity: 0.7;
     color: #555;

src/app/book/book.component.html

@@ -1,7 +1,5 @@
 
-<div class="box-container align-middle" fxLayout="column" [ngStyle.lt-sm]="'min-height: 400;'">
-    <dropzone *ngIf="type === 'component'" class="dropzone-container" [config]="config" [disabled]="disabled" fxLayout="row" fxLayoutAlign="start strech" fxFlex="auto" [message]="'Click or drag file here to upload'" (error)="onUploadError($event)" (success)="onUploadSuccess($event)"></dropzone>
-</div>
+
 <div class="container-fluid">
     <div *ngIf="mainFolder" class="card d-print-inline-flex text-center topcard">
         <div class="row">
@@ -15,6 +13,13 @@
                 <p> Path : {{mainFolder.path}}</p>
             </div>
         </div>
+        <div class="row">
+            <div class="col-md-12">
+                <div class="box-container align-middle" fxLayout="column" [ngStyle.lt-sm]="'min-height: 400;'">
+                    <dropzone *ngIf="type === 'component'" class="dropzone-container" [config]="config" fxLayout="row" fxLayoutAlign="start strech" fxFlex="auto" [message]="'Click or drag file here to upload'" (error)="onUploadError($event)" (success)="onUploadSuccess($event)"></dropzone>
+                </div>
+            </div>
+        </div>
     </div>
 
     <div class="topButtons">
@@ -29,7 +34,6 @@
                 </button>
 
 
-
                 <div class="md-form input-group" *ngIf="isClickCreateFolder === true">
                     <div class="input-group-btn">
                         <button class="btn btn-primary btn-sm waves-light" mdbTooltip="Créer : {{inputCreateFolder}}" placement="top" type="button" mdbWavesEffect (click)="createFolder()">Créer</button>