i was using fabricjs for image upload and bootstrap for css after upload the image preview is coming in the top.
When i click the image hsa to come in the right side but it’s coming in the bottom.
Here is my html
<div class="container-fluid" style="border:1px solid red"> <div class="row"> <div class="col-md-6"> <img *ngFor="let item of urls" (click)="onClik(item)" [src]="item.url" class="rounded mb-3" width="180"> <input type="file" multiple (change)="detectFiles($event)"> <br/> <h1>Preview</h1> </div> <div class="col-md-6"> <div id="mainarea"> </div> </div> </div> </div>
Here is my stackblitz link
Example how my image is showing now
The main problem is that you are not attaching the newly created canvases to your container element (in fact, you just declare
container but you don’t use it at all), but to the body element. So, instead of
you should do
Also, it’s likely that you will have to add
display: flex to the container div, in order for the canvases to appear side by side.