Add dynamically wysiwyg with textAngular - javascript

I try to add a WYSIWYG textAngular dynamically, but when I click on my button "Add description", I can't click on my second textarea (WYSIWYG with textAngular)
index.html
<div id="product-{{ product.country.code }}" class="app-product" ng-repeat="product in products">
<div class="form-group" ng-repeat="description in product.description">
<label class="col-lg-2 control-label">Description {{ $index + 1 }}</label>
<div class="col-lg-8">
<text-angular ta-toolbar="toolbarProductTextAngular" name="product-{{ product.country.code }}-description-{{ $index + 1 }}" ng-model="description.description" placeholder="Enter description {{ $index + 1 }}" ng-required="$index > 0" ></text-angular>
</div>
<div class="col-lg-2">
<button type="button" class="btn btn-danger pull-right">
<i class="glyphicons glyphicons-remove-2"></i> Remove description
</button>
</div>
</div>
<div class="form-group">
<div class="col-lg-4 col-lg-offset-8">
<div class="btn-group pull-right">
<button type="button" class="btn btn-success" ng-click="addDescription(product)">
<i class="glyphicons glyphicons-plus"></i> Add description
</button>
<button type="button" class="btn btn-danger">
<i class="glyphicons glyphicons-remove-2"></i> Remove
</button>
<button type="button" class="btn btn-primary">
<i class="glyphicons glyphicons-new-window"></i> Clone
</button>
</div>
</div>
</div>
</div>
my Toolbar
$rootScope.toolbarProductTextAngular = [['bold','italics','underline', 'insertLink', 'html'],['wordcount','charcount']];
When I click on "Add description", the push it's ok, but I would like to know why the textarea and the toolbar are disabled ? I can't click on this...
description 2 code generated
<div class="form-group ng-scope" ng-repeat="description in product.description">
<label class="col-lg-2 control-label ng-binding">Description 2</label>
<div class="col-lg-8">
<text-angular ta-toolbar="toolbarCampaignTextAngular" name="product-au-description-2" ng-model="description.description" placeholder="Enter description 2" ng-required="$index > 0" class="ng-pristine ng-untouched ng-isolate-scope ta-root ng-empty ng-invalid ng-invalid-required" required="required">
<div text-angular-toolbar="" name="textAngularToolbar4837089965543664" ta-toolbar="toolbarCampaignTextAngular" class="ng-scope ng-isolate-scope ta-toolbar btn-toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default ng-scope" name="bold" ta-button="ta-button" ng-disabled="isDisabled()" tabindex="-1" ng-click="executeAction()" ng-class="displayActiveToolClass(active)" title="Bold" unselectable="on" disabled="disabled"><i class="glyphicons glyphicons-bold"></i></button><button type="button" class="btn btn-default ng-scope" name="italics" ta-button="ta-button" ng-disabled="isDisabled()" tabindex="-1" ng-click="executeAction()" ng-class="displayActiveToolClass(active)" title="Italic" unselectable="on" disabled="disabled"><i class="glyphicons glyphicons-italic"></i></button><button type="button" class="btn btn-default ng-scope" name="underline" ta-button="ta-button" ng-disabled="isDisabled()" tabindex="-1" ng-click="executeAction()" ng-class="displayActiveToolClass(active)" title="Underline" unselectable="on" disabled="disabled"><i class="glyphicons glyphicons-text-underline"></i></button><button type="button" class="btn btn-default ng-scope" name="insertLink" ta-button="ta-button" ng-disabled="isDisabled()" tabindex="-1" ng-click="executeAction()" ng-class="displayActiveToolClass(active)" title="Insert / edit link" unselectable="on" disabled="disabled"><i class="glyphicons glyphicons-link"></i></button><button type="button" class="btn btn-default ng-scope" name="html" ta-button="ta-button" ng-disabled="isDisabled()" tabindex="-1" ng-click="executeAction()" ng-class="displayActiveToolClass(active)" title="Toggle html / Rich Text" unselectable="on" disabled="disabled"><i class="glyphicons glyphicons-embed-close"></i></button></div>
<div class="btn-group">
<div id="toolbarWC" style="display:block; min-width:100px;" class="btn btn-default ng-scope" name="wordcount" ta-button="ta-button" ng-disabled="isDisabled()" tabindex="-1" ng-click="executeAction()" ng-class="displayActiveToolClass(active)" unselectable="on" disabled="disabled">Words: <span ng-bind="wordcount" class="ng-binding">0</span></div>
<div id="toolbarCC" style="display:block; min-width:120px;" class="btn btn-default ng-scope" name="charcount" ta-button="ta-button" ng-disabled="isDisabled()" tabindex="-1" ng-click="executeAction()" ng-class="displayActiveToolClass(active)" unselectable="on" disabled="disabled">Characters: <span ng-bind="charcount" class="ng-binding">0</span></div>
</div>
</div>
<div class="ta-scroll-window ng-scope ta-text ta-editor form-control" ng-hide="showHtml">
<div class="popover fade bottom" style="max-width: none; width: 305px;">
<div class="arproduct"></div>
<div class="popover-content"></div>
</div>
<div class="ta-resizer-handle-overlay">
<div class="ta-resizer-handle-background"></div>
<div class="ta-resizer-handle-corner ta-resizer-handle-corner-tl"></div>
<div class="ta-resizer-handle-corner ta-resizer-handle-corner-tr"></div>
<div class="ta-resizer-handle-corner ta-resizer-handle-corner-bl"></div>
<div class="ta-resizer-handle-corner ta-resizer-handle-corner-br"></div>
<div class="ta-resizer-handle-info"></div>
</div>
<div id="taTextElement4837089965543664" contenteditable="true" ta-bind="ta-bind" ng-model="html" placeholder="Enter description 2" class="ng-pristine ng-untouched ng-valid ta-bind ng-empty placeholder-text">
<p><br></p>
</div>
</div>
<textarea id="taHtmlElement4837089965543664" ng-show="showHtml" ta-bind="ta-bind" ng-model="html" placeholder="Enter description 2" class="ng-pristine ng-untouched ng-valid ng-scope ta-bind ta-html ta-editor form-control ng-empty ng-hide"></textarea>
<input type="hidden" tabindex="-1" style="display: none;" name="product-au-description-2" value="">
</text-angular>
</div>
<div class="col-lg-2">
<button type="button" class="btn btn-danger pull-right">
<i class="glyphicons glyphicons-remove-2"></i> Remove description
</button>
</div>
</div>
I don't see the place holder
I can't click on the textarea (disable)


As I reported here the placeholder HTML attribute breaks the WYSIWYG. You have to remove it.

Related

When I click a button in navbar or other button it redirects me to a page called undefined but what I want to do is open a bootstrap modal

When I click a button in navbar or other button it redirects me to a page called undefined but what I want to do is to open a bootstrap modal
Explaining a little bit more I created a button on the page and when I put the <a> element inside the button it redirects to undefined page and I don't even have a href reference in there.
<!--button-->
<button class="au-btn au-btn-icon au-btn--blue">
<a data-toggle="modal" data-target="#uploadModal"><i class="zmdi zmdi-plus"></i>Adicionar Item</a>
</button>
<!--Modal-->
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myMediulModalLabel">
<div class="modal-dialog modal-md">
<div style="color:white;background-color:#008CBA" class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h2 style="color:white" class="modal-title" id="myModalLabel">Upload Items</h2>
</div>
<div class="modal-body">
<form enctype="multipart/form-data" method="post" action="additems.php">
<fieldset>
<p>Name of Item:</p>
<div class="form-group">
<input class="form-control" placeholder="Name of Item" name="item_name" type="text" required>
</div>
<p>Price:</p>
<div class="form-group">
<input id="priceinput" class="form-control" placeholder="Price" name="item_price" type="text" required>
</div>
<p>Choose Image:</p>
<div class="form-group">
<input class="form-control" type="file" name="item_image" accept="image/*" required/>
</div>
</fieldset>
</div>
<div class="modal-footer">
<button class="btn btn-success btn-md" name="item_save">Save</button>
<button type="button" class="btn btn-danger btn-md" data-dismiss="modal">Cancel</button>
</form>
</div>
</div>
</div>
</div>

Why do you need anchor inside button . This is the reason its not working
:-
simply replace
<button class="au-btn au-btn-icon au-btn--blue">
<a data-toggle="modal" data-target="#uploadModal"><i class="zmdi zmdi-plus"></i>Adicionar Item</a></button>
with
<button class="au-btn au-btn-icon au-btn--blue" data-toggle="modal" data-target="#uploadModal">
<i class="zmdi zmdi-plus"></i>Adicionar Item</button>

onclick with same class

I have Div1 and Div2 inside this divs i have multiple inputs.
The goal is when i click on div 1 btn edit it shows the inputs inside div 1 and the same to div2
My html
My 1º Div
<div class="col-lg-6 col-md-6 xxx">
<div class="row form-group ">
<div class="col-lg-6 col-md-6"><h6 >xxx Nº 1</h6></div>
<div id="edit" class="btn btn-sm"> Edit </div>
</div>
<div class="form-group edit_xxx" id="edit_xxx">
<div class="row form-group" >
<div class="col-lg-5 col-md-5 row">
<div id="minus" class="btn btn-sm-click btn-info fa fa-minus pull-left"></div>
<input id="xxx" name="xxx" class="form-control click select-form" disabled type="text" value="{{ $i }}" >
<div id="plus" class="btn btn-sm-click btn-info fa fa-plus pull-right"></div>
</div>
</div>
</div>
</div>
My 2º div
<div class="row form-group " >
<div class="col-lg-6 col-md-6"><h6 >xxx Nº 2</h6></div>
<div id="edit" class="btn btn-sm"> Edit </div>
</div>
<div class="form-group edit_xxx" id="edit_xxx">
<div class="row form-group" >
<div class="col-lg-5 col-md-5 row">
<div id="minus" class="btn btn-sm-click btn-info fa fa-minus pull-left"></div>
<input id="xxx" name="xxx" class="form-control click select-form" disabled type="text" value="{{ $i }}" >
<div id="plus" class="btn btn-sm-click btn-info fa fa-plus pull-right"></div>
</div>
</div>
</div>
</div>
My jquery code:
$("body").on("click", ".xxx",function(){
$(this).parent().find(".edit_xxx").toggle();
});
The final goal is when click inside .xxx it opens the input id click again closes the input from DIV1 the same if click on div2
Thanks for the help, i realy suck with jquery.

The answer!
$("body").on("click", "#edit",function(){
$(this).parents(".xxx").children("#edit_xxx").toggle();
});

Inside bootstrap modal scroll to specific element is not working

I have used boostrap modal.in that we need to use scroll to specific element. i tried by using below code.but doesn't works
$('#centralModalLg').on('show.bs.modal', function() {
$( "#elementId" ).scrollTop(0);
});
Updated:
when i open modal window at first time and scroll to the specific area.look at the below the screen shot
when open modal second time. the scoll should go the top but i got where i stoped last time.
Html:
<div class="modal fade" id="centralModalLg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog" [ngClass]="{ 'modal-lg': productDetails?.imageUrl != null, 'modal-md': productDetails?.imageUrl == null}" role="document">
<!--Content-->
<div class="modal-content" *ngIf="productDetails">
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<button *ngIf="productDetails.imageUrl != null" type="button" id="closeProductModal" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4>{{productDetails?.productName}}
<span>
<img *ngIf="!productDetails?.isVeg" alt="trending" class="w24" src="https://www.crashmeal.com/assets/images/icons/trending-m.png">
</span>
<span>
<img *ngIf="productDetails?.isVeg" alt="veg" class="w24" src="https://www.crashmeal.com/assets/images/icons/veg-m.png">
</span>
</h4>
<div id="elementId" class="over-flow-md">
<img *ngIf="productDetails.imageUrl != null" class="card-img-top" src="{{baseLogoUrl + productDetails?.imageUrl}}" alt="Thumbnail [100%x225]" style="height: 225px; width: 100%; display: block;" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22348%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20348%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_16654384883%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A17pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_16654384883%22%3E%3Crect%20width%3D%22348%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22116.7265625%22%20y%3D%22120.3%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
data-holder-rendered="true">
<button *ngIf="productDetails.imageUrl == null" type="button" id="closeProductModal" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<!-- <hr /> -->
<p class="small pt-2">
{{ productDetails?.productDesc }}
</p>
<hr />
<div class="addons" *ngFor="let addonCate of productDetails?.addonsCategoryDataList;let addonIndex=index">
<h5 class="bg-light">{{addonCate.CategoryType}}</h5>
<div class="row pb-1">
<div class="small col-12"><strong>{{addonCate?.addonsCategoryName}}({{addonCate?.addonsCategoryDesc}}) </strong>
<span *ngIf="addonCate.addonType == 'required'" class="float-right pr-2 required">Required</span></div>
<div id="errorElement" *ngIf="addonCate?.hasError" class="small col-12 form-error">{{addonCate?.errorMsg}}</div>
</div>
<ul class="list-group mb-3" *ngIf="addonCate?.maxNoOfSelection > 1 || addonCate?.maxNoOfSelection == null">
<li class="list-group-item px-0 d-flex justify-content-between lh-condensed" *ngFor="let addonCateList of addonCate?.addonsCategoryEntries;let addoncateIndex=index">
<div class="col-md-7 align-self">
<label class="checkbox-inline checkbox">
<input class="form-check-input float-left mr-2" name="{{addonCateList.addonsCategoryEntryId}}" (change)="addOnAddRemove(addonIndex,addoncateIndex,addonCateList, $event,'checkbox')" [(ngModel)]="addonCateList.checkedValue" type="checkbox" value="option1" >
<span class="checkmark"></span>
<div class="checkbox-text">
<h6 class="my-0">{{addonCateList.addonsCategoryEntryName}}</h6>
</div>
</label>
</div>
<div class="col-md-2 align-self text-right">
$ {{addonCateList.addonsCategoryEntryPrice}}
</div>
<div class="col-md-3 addprice">
<ng-container *ngIf="addonCateList.maxNoOfSelection > 1 || addonCateList.maxNoOfSelection == null">
<button [disabled]="addonCateList.maxNoOfSelection == addonCateList.quantity" (click)="addonQuantityUpgrade(addonIndex, addoncateIndex, addonCateList, 'add')" class="btn-addRemove float-right" type="button"> <i class="fa fa-plus small"></i> </button>
<input class="form-control input-addRemove float-right" min="{{addonCateList.minNoOfSelection}}" max="{{addonCateList.maxNoOfSelection}}" name="addonCateList_qty" [(ngModel)]="addonCateList.quantity" readonly type="number" aria-label="number" />
<button (click)="addonQuantityUpgrade(addonIndex, addoncateIndex, addonCateList, 'sub')" class="btn-addRemove float-right" type="button"> <i class="fa fa-minus small"></i> </button>
<span id="errorElement" *ngIf="addonCateList.hasError">{{addonCateList.errorMsg}}</span>
</ng-container>
</div>
</li>
</ul>
<ul class="list-group mb-3" *ngIf="addonCate?.maxNoOfSelection == 1">
<li class="list-group-item pr-0 d-flex justify-content-between lh-condensed" *ngFor="let addonCateList of addonCate?.addonsCategoryEntries;let addoncateIndex=index">
<div class="col-md-7 align-self">
<h6 class="my-0">{{addonCateList.addonsCategoryEntryName}}</h6>
<input class="form-check-input" name="{{addonCate.CategoryType}}" (change)="addOnAddRemove(addonIndex,addoncateIndex,addonCateList, $event,'radio')" [checked]="addonCateList.checkedValue" type="radio">
</div>
<div class="col-md-2 align-self text-right">
$ {{addonCateList.addonsCategoryEntryPrice}}
</div>
<div class="col-md-3 addprice">
<ng-container *ngIf="addonCateList.maxNoOfSelection > 1 || addonCateList.maxNoOfSelection == null">
<button [disabled]="addonCateList.maxNoOfSelection == addonCateList.quantity" (click)="addonQuantityUpgrade(addonIndex, addoncateIndex, addonCateList, 'add')" class="btn-addRemove float-right" type="button"> <i class="fa fa-plus small"></i> </button>
<input class="form-control input-addRemove float-right" min="{{addonCateList.minNoOfSelection}}" max="{{addonCateList.maxNoOfSelection}}" name="addonCateList_qty" [(ngModel)]="addonCateList.quantity" readonly type="number" aria-label="number" />
<button (click)="addonQuantityUpgrade(addonIndex, addoncateIndex, addonCateList, 'sub')" class="btn-addRemove float-right" type="button"> <i class="fa fa-minus small"></i> </button>
<span id="errorElement" *ngIf="addonCateList.hasError">{{addonCateList.errorMsg}}</span>
</ng-container>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="py-2">
<input class="form-control" name="specialInstr" [(ngModel)]="productDetails.specialInstr" type="text" placeholder="Add Special Instructions for the Restaurant">
</div>
<hr />
<div class="row addprice">
<div class="price col-sm-7">Choose Quantity</div>
<div class="text-right col-sm-2 ">
<strong>{{outletDetials?.currency}}
<ng-container *ngIf="productDetails?.cost">{{productDetails.cost}}</ng-container>
<ng-container *ngIf="!productDetails?.cost || productDetails.cost == null">0</ng-container>
</strong>
</div>
<div class="text-right col-sm-3 ">
<button class="btn-addRemove float-right" (click)="increase_decrease_qty(productDetails,'add')" type="button"> <i class="fa fa-plus small"></i> </button>
<input readonly class="form-control input-addRemove float-right ng-untouched ng-pristine ng-valid" aria-label="number" min="1" name="quantity" [(ngModel)]="productDetails.quantity" type="number">
<button class="btn-addRemove float-right" (click)="increase_decrease_qty(productDetails,'sub')" type="button"> <i class="fa fa-minus small"></i> </button>
</div>
</div>
</div>
<div class="bg-light p-0 pb-2">
<div class="row">
<div class="col-md-6">
<div class="mt-3 pl-3">
<span class="pr-1">Total:</span>
<strong>{{outletDetials?.currency}}
<ng-container *ngIf="productDetails?.totalPrice">{{productDetails.totalPrice}}</ng-container>
<ng-container *ngIf="!productDetails?.totalPrice || productDetails.totalPrice == null">0</ng-container>
</strong>
</div>
</div>
<div class="col-md-6">
<button [disabled]="add_cart_loading == 'adding'" type="button" (click)="addProductToCart(productDetails)" class="btn btn-primary pull-right mt-2 mr-4">
<span *ngIf="add_cart_loading != 'adding'">
<ng-container *ngIf="!update_product_status"> Add to Cart </ng-container>
<ng-container *ngIf="update_product_status">Update</ng-container>
</span>
<span *ngIf="add_cart_loading == 'adding'">
<ng-container *ngIf="!update_product_status">Adding</ng-container>
<ng-container *ngIf="update_product_status">Updating</ng-container>
<i class="fa fa-spinner fa-spin"></i>
</span>
</button>
</div>
</div>
</div>
</div>
<!--/.Content-->
</div>
</div>
How i can achieve this
Thanks in advance

Change "show" to "shown" when did you use bootstrap 3 or 4
$('#centralModalLg').on('shown.bs.modal', function() {
$( "#elementId" ).scrollTop(0);
});
check that Bootstrap 3 codepen example
check that Bootstrap 4 codepen example

$('#centralModalLg').on('shown.bs.modal', function() {
$('#elementId').scrollTop(0);
});
A Fiddle with your code.
EDIT:
The issue is caused by the event listener, should be shown.bs.modal instead of show.bs.modal, updated the fiddle as well.
jQuery.scrollTop() could be conflicting if the event is started but not yet completed as of Bootstrap's official documentation :
the infinitive (ex. show) is triggered at the start of an event, and
its past participle form (ex. shown) is triggered on the completion of
an action.

try this:
$('#centralModalLg').on('show.bs.modal', function() {
setTimeout(function() {
var $elem = $('#scrollto') // add this ID to an element you want scroll to
var $container = $("#elementId")
$container.scrollTop(0) // edge case - reset scroll in case it is reopened
var t = $container.offset().top
$container.scrollTop($elem.position().top - t);
}, 500) // run after modal animation
});
It is based on this answer: https://stackoverflow.com/a/21179878/8164758
Here is working jsfiddle example: https://jsfiddle.net/954jnt2y/1/

Bootstrap modal pushes my jumbotron to left in chrome but not in edge?

I tried some of the ways in other questions given for bootstrap modal but I am using bootstrap 3.3.7 this shouldn't be the issue ,but I have no idea why this is happening every time I click on button my jumbotron shrinks !!Any help would be appreciated.
My html code:
<div class="jumbotron">
<div id="post"></div>
<div id="erase" type="submit" data-toggle="modal" data-target="#myModal1" onclick="erase()">
<button class="btn btn-default btn-lg" style="border-radius:100%;width:80px;height:80px;padding:15px">
<img src="/uploads/text.png" style="height:40px;width:40px" />
</button>
</div>
</div>
My javascript function:
function erase(){
$('#post').empty();
$('#post').html('<div class="modal fade" id="myModal1" role="dialog">'+'<div class="modal-dialog">'+'<div class="modal-content">'+
'<div class="modal-header">'+'<button type="button" class="close" data-dismiss="modal">×</button>'+
'<h4 class="modal-title" style="font-family:Pangolin">Post your text</h4>'+' </div>'+'<div class="modal-body">'+
'<div class="media "><div class="media-left"> <form action="porthome_.php" method="post" id="usrform" >'+
'<div class="form-group"><strong><span class="glyphicon glyphicon-pencil" style="font-size:13px" ></span> Write your post:</strong> <input form="usrform" id="textarea1" type="text" class="form-control" name="image" placeholder="Write something" data-toggle="tooltip" data-placement="top" title="Add the image link from any site,if in doubt check out our videos on how to upload images in post.">'+
'</div>'+
'<div class="text-right">'+
'<button type="submit" id="sub"class="btn btn-primary">POST</button>'+
'</div>'+
'</form><div class="media-body"> <h5 class="media-heading" style="color:#3369e8"></h5>'+
'</div>'+
'</div>'+
'</div>'+'<div class="modal-footer">'+
'<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>'+'</div>'+
'</div>'+'</div>'+'</div>');
}

Here you go with a solution https://jsfiddle.net/qc9dgefg/2/
erase = function(){
$('#post').empty();
$('#post').html(
`<div class="modal fade" id="myModal1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="font-family:Pangolin">Post your text</h4>
</div>
<div class="modal-body">
<div class="media">
<div class="media-left">
<form action="porthome_.php" method="post" id="usrform" >
<div class="form-group">
<strong>
<span class="glyphicon glyphicon-pencil" style="font-size:13px" ></span>
Write your post:
</strong>
<input form="usrform" id="textarea1" type="text" class="form-control" name="image" placeholder="Write something" data-toggle="tooltip" data-placement="top" title="Add the image link from any site,if in doubt check out our videos on how to upload images in post.">
</div>
<div class="text-right">
<button type="submit" id="sub"class="btn btn-primary">POST</button>
</div>
</form>
<div class="media-body">
<h5 class="media-heading" style="color:#3369e8"></h5>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>`);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="jumbotron">
<div id="post"></div>
<div id="erase" type="submit" data-toggle="modal" data-target="#myModal1" onclick="erase()">
<button class="btn btn-default btn-lg" style="border-radius:100%;width:80px;height:80px;padding:15px">
<img src="http://via.placeholder.com/350x150" style="height:40px;width:40px">
</button>
</div>
</div>
</div>
You were missing one of the closing div tag.
I have added the closing div tag along with that I also formatted the dynamic HTML in JavaScript.

Jquery u-i sortable scrolls to bottom

I have a huge issue with my ui-sortable.
If i have a small list (as the one in the example on their website: jquery sortable)
Then there is no Issue.
However if the list gets big long enough and the user would have to scroll to see the total list then when ever i try to drag an element it automaticly scrolls to the bottom and i have a hard time getting it up again.
Every time i attempt to scroll up it scrolls down seconds later. So my question is has anyone tried this before and know a fix for it? ( i know there wasnt much code however if you really need code to solve this problem il gladly provide what i have)
The element im dragging:
<ul class="list-group gutter list-group-lg list-group-sp" ui-sortable="sortable" ng-model="academyModules">
<li class="list-group-item module" style="padding-top: 15px; padding-bottom: 0px; display: block" ng-repeat="module in academyModules" draggable="true">
<div class="clear" ng-if="module.module.module_type_id != null">
<span class="pull-left"><i class="fa fa-sort text-muted fa m-r-sm"></i> </span>
<div class="col-md-4 col-xs-10">
<button class="btn btn-s-xs btn-rounded m-r-lg" ng-class="module.module_type.color || module.module.module_type.color"
style="padding: 2px 10px; min-width: 90px;">{{module.module_type.name || module.module.module_type.name}}
</button>
<span class="text text-muted" translate="TERMS.MODULE"></span>
</div>
<span class="pull-right">
<a class="btn btn-md pull-right no-padder" ng-really-message="{{ 'ACADEMY.EDIT.MODULES.DELETE_WARNING' | translate }}" tooltip="{{ 'TOOLTIP.DELETE' | translate }}" ng-really-click="deleteModule($index, module);">
<i class="fa fa-times text-danger text"></i></a>
</span>
<div class="col-lg-5 col-xs-11">
<div class="input-group m-b">
<div class="input-group-btn">
<button class="btn btn-info" ng-click="changeModule(module)" data-toggle="modal"
data-target="#modal_select_module" style="font-size: 10px;"
type="button"><i class="fa fa-plus"></i><span translate="ACADEMY.EDIT.MODULES.CHANGE_MODULE"></span>
</button>
</div>
<!-- /btn-group -->
<input type="text" class="form-control input-sm" value="{{module.module.name}}" style="height: 27px" disabled="">
</div>
</div>
</div>
<div class="clear" ng-if="module.module.module_type_id == null">
<span class="pull-left"><i class="fa fa-sort text-muted fa m-r-sm"></i> </span>
<div class="col-md-4 col-xs-10">
<button class="btn btn-s-xs btn-rounded m-r-lg bg-grey"
style="padding: 2px 10px; min-width: 90px;" translate="TERMS.COURSE">
</button>
<span class="text text-muted" translate="TERMS.COURSE"></span>
</div>
<span class="pull-right">
<a class="btn btn-md pull-right no-padder" title="" ng-really-message="{{ 'ACADEMY.EDIT.COURSES.DELETE_WARNING' | translate }}" tooltip="{{ 'TOOLTIP.DELETE' | translate }}" ng-really-click="deleteCourse($index, module);"><i
class="fa fa-times text-danger text"></i></a>
</span>
<div class="col-lg-5 col-xs-11">
<div class="input-group m-b">
<div class="input-group-btn">
<button class="btn btn-info" ng-click="changeCourse(module)" data-toggle="modal"
data-target="#modal_select_module" style="font-size: 10px;"
type="button"><i class="fa fa-edit"></i><span translate="ACADEMY.EDIT.COURSES.EDIT"></span>
</button>
</div>
<!-- /btn-group -->
<input type="text" class="form-control input-sm" value="{{module.name}}" style="height: 27px" disabled="">
</div>
</div>
</div>
</li>
</ul>

Categories