Develop Reference

fabricjs image placing alignment issue

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
this.renderer.appendChild(document.body, newCanvas);
you should do
this.rendered.appendChild(this.container, newCanvas);
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.

Hello Please check this have changed only HTML
https://angular-ivy-mt5mbv.stackblitz.io

Rendering images dynamically into DOM. Glitchy effect

I'm trying to dynamically render a set of questions and an image (positioned next to each other) each time a button is clicked.
I'm using bootstrap and here is my code.
<div v-if="!submittedAnswer" class="row text-center" id="questions-container">
<div class="image-holder col-sm-5">
<img :src="questions[questionIndex].imgUrl" class="img-responsive" />
</div>
<div v-for="(item,index) in questions[questionIndex].choices" class="col-sm-7 text-center choice">
<p class="shadow-effect
" :class="{'active': activeChoiceId == index}" :id="index" #click="chooseAnswer">{{item}}</p>
</div>
</div>
As can be seen both the image and the question set are rendered in their own respective columns. The issue im facing is that they load in a weird order which in turn creates a glitchy looking affect. I've managed to screenshot what happens.
Even though they are split in two separate columns. The second column seems to partially render in the area of the first column. Then when the image renders, it pushes them over, creating a buggy looking effect.
I've tried creating larger space between them with margins, padding. Or using flexbox instead but the issue still persists.

When your view renders, it renders like this:
<div class="image-holder col-sm-5">{{ image }}</div>
<div class="col-sm-7 text-center choice"">{{ answer }}</div>
<div class="col-sm-7 text-center choice"">{{ answer }}</div>
<div class="col-sm-7 text-center choice"">{{ answer }}</div>
.
.
.
Since the bootstrap grid has 12 spaces, the "col-sm-7" div blocks after the first one are rendered in a new line, because they have no more space to render.
What you need to do is to wrap all the answers inside a <div class="col-sm-7"> block, so they would render correctly. Something like this:
<div v-if="!submittedAnswer" class="row text-center" id="questions-container">
<div class="image-holder col-sm-5">
<img :src="questions[questionIndex].imgUrl" class="img-responsive" />
</div>
<div class="col-sm-7">
<div v-for="(item,index) in questions[questionIndex].choices" class="text-center choice">
<p class="shadow-effect
" :class="{'active': activeChoiceId == index}" :id="index" #click="chooseAnswer">{{item}}</p>
</div>
</div>
</div>

Printing a div in HTML with all css applied

I'm making a project in asp.net MVC. I want to print a div with all css styles applied. This div may contain one or more divs inside it. I tried a lot of javascript print codes but each of them failed. The page I want to print looks like this: Click here to view page. I just want to print the area below the input region which contains the details. But the problem is that when I use the javascript print method, my table view suddenly vanishes. This is the print preview that I get: Click here to view the print preview page. I've tried multiple methods but all have failed. Please Help. Thanks in advance. Below are my code files of front end
saleInvoice.cshtml
<script>
function refresher() {
$('#si, .si').load('/TallySet/cart');
};
function printDiv(divID) {
debugger;
var printContents = document.getElementById(divID).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
};
</script>
<div class="col-lg-12 popblk">
<p>New Sales Invoice</p>
</div>
<div class="col-lg-12" style="background-color:white">
<div class="row">
<div class="col-lg-2">
<p>Customer : </p>
</div>
<div class="col-lg-4">
#Html.DropDownList("customers")
</div>
</div>
<div class="row">
<div class="col-lg-4">
#Html.DropDownList("items")
</div>
<div class="col-lg-4">
#Html.TextBoxFor(x => x.quantity)
</div>
<div class="col-lg-2">
<button value="Add to cart" onclick="addToCart()">Add to cart</button>
</div>
<div class="col-lg-2">
<button value="Refresh" onclick="printDiv('si')">Refresh Cart</button>
</div>
</div>
<div class="row" id="si" style="margin-left:50px;">
#{Html.RenderAction("cart", "TallySet");}
</div>
<div class="row" style="background-image:url('../../viewData/sale_footer.png')">
</div>
<button class="rButtonCancel" value="X" data-dismiss="modal" onclick="listVoider()">X</button>
</div>
cart.cshtml
#model IEnumerable<Fast_Tally_Accounter.Models.salesCart>
<img src="~/viewData/sale_head.png" />
#if(Model!=null)
{
foreach(var v in Model)
{
<div class="row" style="background-image:url('../../viewData/sale_row.png'); background-repeat:no-repeat;margin-left:0px;margin-bottom:0px">
<div class="col-lg-2">
<p>#v.quantity KG</p>
</div>
<div class="col-lg-4">
<p>#v.itemName</p>
</div>
<div class="col-lg-1">
<p>#v.itemPrice</p>
</div>
<div class="col-lg-1">
<p>#v.itemTotal</p>
</div>
</div>
}
}
<div class="row" style="background-image:url('../../viewData/sale_footer.png'); background-repeat:no-repeat; margin-left:0px; height:120px">
<div class="row myRow" style="height:20px; margin-left:536px; margin-bottom:2px; margin-right:0px" id="myRow">
<p>#ViewBag.dt</p>
</div>
<div class="row myRow" style="height:20px; margin-left:536px; margin-bottom:2px; margin-right:0px" id="myRow">
<p>Daniyal humayun</p>
</div>
<div class="row myRow" style="height:20px; margin-left:536px; margin-bottom:10px; margin-right:0px" id="myRow">
<p>#ViewBag.qt</p>
</div>
<div class="row myRow" style="height:20px; margin-left:536px; margin-bottom:0px; margin-right:0px" id="myRow">
<p>#ViewBag.pr</p>
</div>
</div>

There's a number of issues here. First and foremost. You're not actually using a table. Instead, you're using Bootstrap's grid styles to make an approximation of a table. Using an actual HTML table is a better idea, not just for the consistency it provides but also for the sake of accessibility.
Second, the "borders" to your "table" are being applied via background images. While I think Chrome actually gives the user the option to print background images, now, it's not the default, and other browsers will simply ignore background images entirely when printing. Long and short, that approach is doomed to failure.
Third, when printing, you're actually taking the contents of this div and replacing the entire HTML document with that. Importantly, that means any stylesheets and such that were part of the document are thrown away. In particular to your issue here, that would include the Bootstrap stylesheet. This was the way people used to handle printing way back in the day before CSS was even really a thing. Now, there's a much preferable way to handle removing extraneously content from the print. You simply add print-specific styles and hide elements you don't want to print (such as a page header) via that. For example:
#media print {
#Header { display:none; }
}
You can also use this same approach to change styles to improve the print layout. Maybe you want the text to be larger or smaller when printed. You simply add something like body { font-size:12pt; } inside this block.
The only JavaScript you actually need is just window.print(). Your print button calls that, and your print-specific CSS should take over to modify what needs to be modified in the print version.

Bootstrap gallery grid

I'm trying to make custom gallery grid using bootstrap. All goes well but im stuck on last step.
I'm posting HTML structure since i belive it's problem in here somewhere but my code cotains some css (paddings/margins mostly) and JS (explained why below).
HTML:
<div class="about_gallery">
<div class="col-xs-9 pd-9">
<div class="row">
<div class="col-xs-8 pd-8">
<div class="color1"><img src="http://1.bp.blogspot.com/-lTAkZcm_aO0/VoR2I2nDq8I/AAAAAAAAGIg/G0vVuMw1nrI/s1600/NEW-YEARS-RESOLUTIONS-calendar.jpg"/></div>
</div>
<div class="col-xs-4 pd-4">
<div class="color2"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
</div>
</div>
<div class="row">
<div class="col-xs-4 pd-4">
<div class="color3"><img src="https://s-media-cache-ak0.pinimg.com/originals/7c/7e/41/7c7e41ad177113fecc68a0213cf724c2.jpg"/></div>
<div class="color11"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
</div>
<div class="col-xs-8 pd-8">
<div class="color4"><img src="http://1.bp.blogspot.com/-lTAkZcm_aO0/VoR2I2nDq8I/AAAAAAAAGIg/G0vVuMw1nrI/s1600/NEW-YEARS-RESOLUTIONS-calendar.jpg"/></div>
<div class="row">
<div class="col-xs-6 cl-5">
<div class="color5"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
<div class="color12"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
</div>
<div class="col-xs-6 cl-6">
<div class="color6"><img src="https://s-media-cache-ak0.pinimg.com/originals/7c/7e/41/7c7e41ad177113fecc68a0213cf724c2.jpg"/></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-3 pd-3">
<div class="color8 "><img class="pion-rect" src="https://s-media-cache-ak0.pinimg.com/originals/7c/7e/41/7c7e41ad177113fecc68a0213cf724c2.jpg"/></div>
<div class="color9"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
<div class="color10"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
</div>
</div>
Here is fiddle: http://jsfiddle.net/y6co8e5u/
The goal is to have grid like here: Grid example
As you can see on bottom left corner instead of 1 horizontal rectangle i have two squares and i don't know how to "connect" them since it's in different columns. It's my first time with bootstrap so it's probably a little bit messy. (I'm also not sure if my JS is needed here but when i added spaces between pictures i needed to extend the pictures) I'm open for any other solution too.
Thanks for help!

I will assume you are trying to add the .color7 div, append it to <div class="col-xs-4 pd-4">, just after the .color3 block. The block will look like this:
<div class="col-xs-4 pd-4">
<div class="color3"><img src="https://s-media-cache-ak0.pinimg.com/originals/7c/7e/41/7c7e41ad177113fecc68a0213cf724c2.jpg"/></div>
<div class="color7"><img src="http://1.bp.blogspot.com/-lTAkZcm_aO0/VoR2I2nDq8I/AAAAAAAAGIg/G0vVuMw1nrI/s1600/NEW-YEARS-RESOLUTIONS-calendar.jpg"/></div>
</div>
then on the css, set .color7 {width: calc(200% + 10px);}
here is the updated fiddle: http://jsfiddle.net/y6co8e5u/3/
no change to the js code.

You need to restructure your HTML a bit, have to put
<div class="color10"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
inside the <div class="col-xs-4 pd-4">
of second row. Hope this is what you want.
Check updated jsfiddler: http://jsfiddle.net/mayankN/y6co8e5u/1/

overlay content on backstretch

I want to add a div with some title over the JQuery Backstretch images. The code looks like:
<div class="col-md-4 col-xs-12">
<div class="imgs">
</div>
</div>
Here the inner div is used for backstretch. If I add any content prior to that within outer div, (like below) the stretch is not working.
<div class="col-md-4 col-xs-12">
<div class='row'>some text</div>
<div class='row'>
<div class="imgs">
</div
</div>
</div>
I was trying to replicate the scenario in jsfiddle (http://jsfiddle.net/krishnasarma/err1fkcd/) but its not showing the images at all.

Most likely you haven't specified dimensions for .imgs div used for backstretch. Set desired width and height properties for that container.
Demo: http://jsfiddle.net/err1fkcd/3/