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
Related
I am trying to create number of boxes using div (each div having different number of contents) and each 2 div should be in a row.
But the problem is if one div has more content then it gets bigger than the other one. This creates a space below the other div and the next div comes after that.
i am using angular js ng-repeat for creating all the divs.
The code i used is as below:
<div id="form" ng-controller="JobApplicationFormController">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" ng-repeat="x in categorylist" style="margin-bottom:10px">
<div class="card1">
<div class="container1">
<div style="border-bottom:1px solid #ccc;padding: 5px;margin-left: -16px;margin-right: -16px;font-size:20px !important;color:black">
<img src="~/Images/form.ico" style="height:50px" /> <b>{{x.categoryName}}</b>
</div>
<div ng-repeat="y in formlist" ng-if="y.categoryId==x.id" id="{{y.id}}" onclick="return popitup('../../Applications/Form/' + this.id)" class="formlist" title="click to upload" style="cursor:pointer;padding: 5px;margin-left: -16px;margin-right: -16px;border-bottom:1px solid #ccc;">
{{y.formName}} </font>
{{y.formName}} </font>
</div>
</div>
</div>
</div>
</div>
I've tried this[Auto adjusting div based on inside content for reference but it doesn't works properly. there is overflow of content.
Edit1: I did try this [CSS-only masonry layout but with elements ordered horizontally already but it is not getting me near to anywhere what I want to achieve. the div part is what is causing a lot of trouble.
I'm currently building a website and have an image as the header, but when I load the page it will jump half way down the page, load the image and then jump back up. How can I make the image load in first to prevent it from jumping?
HTML:
<div class="refocus" id="hero-header">
<div class="refocus-img-bg"></div>
<div class="refocus-img focus-in">
HTML:
</div>
<div class="refocus-text-container">
<div class="t">
<div class="tc">
</div>
</div>
</div>
</div>
<div class="row">
<div class=".col-md-6">
<div id="section1">
<div id = "sub-text">
<h1>Hello</h1>
<br>
<h2>Hello</h2>
<h3><br>Hello.</h3>
</div>
<div id="image">
<img src="images/aboutme.png"/>
</div>
</div>
<div id="buttoncontainer">
<div id="totimeline">▼</div>
</div>
</div>
</div>
Here's a JSFiddle to replicate this.
Thank you in advance.
You can do one of two things for this.
1) Set the dimensions of your image inline. This is actually a recommended method of preventing the very thing you are experiencing where the page jumps around after images load in. By setting the dimensions inline, the browser will already know how tall the image needs to be and will reserve the space for it before it even finishes loading in.
Example:
<img src="http://placehold.it/350x150" height="150" width="350">
2) If you don't prefer to set the dimensions inline, it seems you could also just set the height in your styles ahead of time and that would do the trick as well.
Example:
.refocus-img{
height:150px;
}
I have bootstrap popover as follows
<div style="float:left; width:30%"></div>
<div class="popover results" style="z-index:1060; float:left; width:70%">
<div class="arrow"></div>
<div class="popover-inner">
<h3 class="popover-title"></h3>
<div class="popover-content">
<p></p>
</div></div>
</div>
I saw that with change in screen resolution, its changing the relative position with the input element I have. I want to maintain the relative position of popover and input element same irrespective of resolution. Is there any way to do this ?
This was happening since I used following in above code
<div style="float:left; width:30%"></div>
I removed it and it now auto adjusts correctly
I have the following items laid out in static blocks:
<div class="twentytwenty-wrapper twentytwenty-horizontal">
<div class="image-compare-set twentytwenty-container image-compare-1 current-slider"></div>
</div>
<div class="twentytwenty-wrapper twentytwenty-horizontal">
<div class="image-compare-set twentytwenty-container image-compare-2 current-slider"></div>
</div>
<div class="twentytwenty-wrapper twentytwenty-horizontal">
<div class="image-compare-set twentytwenty-container image-compare-3 current-slider"></div>
</div>
<div class="twentytwenty-wrapper twentytwenty-horizontal">
<div class="image-compare-set twentytwenty-container image-compare-4 current-slider"></div>
</div>
Along with a thumbnail navigation block below:
<div class="image-compare-nav owl-carousel owl-theme">
<div class="owl-wrapper">
<div class="owl-item">
</div>
<div class="owl-item">
</div>
<div class="owl-item">
</div>
<div class="owl-item">
</div>
</div>
</div>
At the moment, all of the main twentytwenty blocks appear underneath each other, but what I want to happen is that only the first one is displayed, and whena thumbnail is clicked, the relating slider div, is shown in it's place.
It's important that as each thumbnail is clicked, the slider changes from the old one, to the new one.
So far I've got this http://jsfiddle.net/96rq4vet/2/ but, when the thumbnails are clicked, the new div isn't showing up, they're staying hidden.
What am I doing wrong?
UPDATE
I'm getting closer with this fiddle: http://jsfiddle.net/96rq4vet/3/ however, I can't get only the first main div to show at first. I tried adding style:display:none; to the second-fourth one, but that doesn't make them show when the thumbnails are clicked.
Any ideas?
Rather than using classes you could use data attributes. You can then grab the data attribute of the thumb that is clicked in order to associate it with the data attribute of the image you want to display.
Something like this:
<div class="twentytwenty-container" data-image-num="1">
<img />
</div>
<div class="imageSet" data-image-num="1">
<img />
</div>
$('.imageSet').click(function() {
var imageNum = $(this).attr('data-image-num');
$('.twentytwenty-container[data-image-num="' + imageNum + '"]').show();
});
JSFiddle
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/