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
Related
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
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.
How can I drag an object between two bootstrap columns, with Interact.JS?
See http://codepen.io/drumiriades/pen/dGrygg.
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="boardLeft">
<p>Left</p>
<div class="draggable">
<p id="drag-1"> dragg me</p>
</div>
</div>
</div>
<div class="col-md-8">
<div class="boardRight">
<p>Right</p>
</div>
</div>
</div><!--/ row-->
</div> <!--/ container-->
</body>
I have an object with ID=drag-1 that is draggable on the left column (Class= boardLeft) but I can't drag it to the right column (Class= boardRight). How can I drag it to the right column?
z-index of the .draggable object must be 1 or greater to see the .draggable object on top of the right container.
Additionally, your restrict option is set to restrict the .draggable component to its parent container only. Removing this option allows you to drag it into the right container.
On top of these couple things - you're referencing elements in your JavaScript that don't exist in your layout (#grid-snap, .dropzone, and #yes-drop)
I've updated the CodePen with the elements that do exist, and now it shows that the item is dropped into the right container... but it changes the content. Not sure if that's what you wanted, but that's what your JavaScript is doing.
http://codepen.io/anon/pen/yewLdb
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/
Here i have to boxes, it looks like this
<div class="dataViewBox">
<div class="dataViewBox-Download">
<div class="dataViewBox-DownloadLink">
<span class="dataViewBox-Hashes"></span>
</div>
<div id="testblock0h" class="dataViewBox-HideShowButton" onclick="magicmushrooms('testblock0')">Show</div>
<div class="dataViewBox-Name">SomeName</div>
</div>
<div id="testblock0" class="dataViewBox-BottomBorder">
<div id="test0" class="dataViewBox-Data toggleable Text">
<span>this is just a test to show the the box can expand and be alot more bigger then it first was</span>
</div>
</div>
</div>
<div class="infoViewExpirein">
<div id="infoViewExpireinTime">Build this up to be bigger then the box................................</div>
</div>
<div class="dataViewBox">
<div class="dataViewBox-Download">
<div class="dataViewBox-DownloadLink">
<span class="dataViewBox-Hashes"></span>
</div>
<div id="testblock1h" class="dataViewBox-HideShowButton" onclick="magicmushrooms('testblock1')">Show</div>
<div class="dataViewBox-Name">SomeName</div>
</div>
<div id="testblock1" class="dataViewBox-BottomBorder">
<div id="test1" class="dataViewBox-Data toggleable Text">
<span>See how this box fallows the other one when you open it, and same when you close it, it always has equal width</span>
</div>
</div>
</div>
<div class="infoViewExpirein">
<div id="infoViewExpireinTime">Build this up to be bigger then the box................................</div>
</div>
All the code is too much to post here, but I have two boxes, the code works as it is now but the thing is that I do not like how I have solved this problem, if you open one box and you'll see at the other comes free with and the same size, it's the idea that it should be so. So all elements on the page is always symmetric. Its just that it only works if you have "display: table" in body. And i try to find another way to do this whit same results, its always hard when you try to get equal width on everything, But the way to do it CSS/JavaScript does not matter
Link: JsFiddle
/ Slaktarn
All you need to do is to add a max-width parameter to whatever elements you want to limit in size.
body {
...
display: block;
max-width: 450px;
}