I have such code:
<div ui-tree>
<ol ui-tree-nodes="" ng-model="policies">
<li ng-repeat="item in policies" ui-tree-node>
<div ui-tree-handle>
<accordion>
<accordion-group>
<accordion-heading>
{{item.Title}}
<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i></accordion-heading>
{{item.Content}}
<ol ui-tree-nodes="" ng-model="item.Options" data-nodrop>
<li ng-repeat="subItem in item.Options" ui-tree-node>
<div ui-tree-handle>
<accordion-group>
<accordion-heading>{{subItem.Title}}<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i></accordion-heading>
{{subItem.Content}}
</accordion-group>
</div>
</li>
</ol>
</accordion-group>
</accordion>
</div>
</li>
</ol>
</div>
and when i click on header to roll over content of accordion bootstrap i get that drag and drop event is handled
how could i:
add to accordion-header some icon, with the help of which i could drag and drop all my nodes, and when i click on title my data get rolled as bootstrap do? Is it reall to hadle too events? and how?
https://github.com/JimLiu/angular-ui-tree
http://angular-ui.github.io/bootstrap/
upd:
<script id="template/accordion/accordion-group.html" type="text/ng-template">
<div class="panel panel-default">
<div class="panel-heading">
<h4 href class="btn btn-success btn-xs accordion-toggle pull-left" data-nodrag ng-click="toggleOpen();"><i class="glyphicon" ng-class="{'glyphicon-chevron-right': isOpen, 'glyphicon-chevron-down': !isOpen}"></i></h4>
<h4 class="panel-title">
<a href accordion-transclude="heading"><span>{{heading}}</span></a>
</h4>
</div>
<div class="panel-collapse" collapse="!isOpen">
<div class="panel-body" ng-transclude></div>
</div>
</div>
</script>
<div ui-tree="options" data-drag-delay="20">
<ol ui-tree-nodes="" ng-model="articles">
<li ng-repeat="item in articles" ui-tree-node>
<div ui-tree-handle>
<accordion close-others="false">
<accordion-group>
<accordion-heading>
{{item.Title}}
</accordion-heading>
<div ng-bind-html="item.Content"></div>
<ol ui-tree-nodes="" ng-model="item.Options">
<li ng-repeat="subItem in item.Options " ui-tree-node>
<div ui-tree-handle>
<accordion close-others="false">
<accordion-group>
<accordion-heading>{{subItem.Title}}
</accordion-heading>
<div ng-bind-html="subItem.Content"></div>
</accordion-group>
</accordion>
</div>
</li>
</ol>
</accordion-group>
</accordion>
</div>
</li>
</ol>
</div>
drag and drop work only if i click on header text, or on body text (when on panel-title nothing is fired)
opening is on ng-click="toggleOpen();" and all is ok, just that drag and drop must be on whole element (cursor is for whole element, but drag-and-drop is only for element text)
how to be with scopes maybe?
Wrap <accordion-heading> content in a <div>
HTML accordion code
<accordion close-others="false">
<accordion-group is-open="isopen">
<accordion-heading ng-click="isopen=!isopen">
<div>{{item.Title}}</div>
</accordion-heading>
<div ng-bind-html="item.Content"></div>
<ol ui-tree-nodes="" ng-model="item.Options">
<li ng-repeat="subItem in item.Options " ui-tree-node>
<div ui-tree-handle>
<accordion close-others="false">
<accordion-group>
<accordion-heading>{{subItem.Title}}
</accordion-heading>
<div ng-bind-html="subItem.Content"></div>
</accordion-group>
</accordion>
</div>
</li>
</ol>
</accordion-group>
</accordion>
Hope this will help you.
Try to use $event.stopPropagation() on toggle accordion. In my case I added ui-tree-handle only on icon like this
<div class="panel-controls left" ng-hide="isEditable" ui-tree-handle>
<span class="controls-item no-border">
<i class="glyphicon glyphicon-th-list text-sm text-gray"></i>
</span>
</div>
Full code
<div ui-tree="options" data-max-depth="3">
<!-- Ranks list START -->
<div ui-tree-nodes data-type="rank" ng-model="taskbook.ranks">
<div ng-repeat="rank in taskbook.ranks"
class="panel panel-clean panel-solid panel-sortable"
ui-tree-node
ng-controller="RankListCtrl"
data-type="rank">
<!-- Rank Edit START -->
<div class="panel-heading clearfix"
ng-class="{'': isCollapsed, 'collapsed': !isCollapsed}">
<div class="panel-controls left" ng-hide="isEditable" ui-tree-handle>
<span class="controls-item no-border">
<i class="glyphicon glyphicon-th-list text-sm text-gray"></i>
</span>
</div>
<h2 class="panel-title pull-left" ng-hide="isEditable">
<span ng-bind="rank.name | truncate:false:15"></span>
</h2>
<div class="inline-edit" data-nodrag ng-show="isEditable">
<form class="form-inline" role="form">
<div class="form-group">
<input type="text"
class="form-control"
placeholder="Rank name"
ng-model="rank.name"
focus-me="isEditable">
</div>
</form>
</div>
<div class="panel-controls right">
<button type="button"
class="controls-item btn btn-sm btn-danger btn-flat text-sm"
ng-hide="!isEditable"
ng-click="cancelEditable()">
<i class="glyphicon glyphicon-remove"></i>
</button>
<button type="button"
class="controls-item btn btn-sm btn-success btn-flat text-sm"
ng-hide="!isEditable"
ng-disabled="rank.name === ''|| isSaving"
ng-click="hideEditable()">
<i class="glyphicon glyphicon-ok"></i>
</button>
</div>
</div></div></div>
The only thing is that I did't use accordion. I implemented collapsed directive.
Hope this can help!
Good luck
Related
I'm trying to show active bootstrap accordion in a laravel foreach loop, but I'm facing an issue.
What I'd like to do is what you see on the top image. But when I refresh the browser, the accordion closes as you can see on the bottom image.
Here's my code :
<div class="course-dashboard-side-content">
#foreach ($formation->sections as $section)
#php
$increment++;
#endphp
<div class="accordion course-item-list-accordion" id="accordionCourseMenu">
<div class="card">
<div class="card-header" id="collapseMenuOne">
<h2 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse"
data-target="#collapseSection-{{ $section->id }}" aria-expanded="false"
aria-controls="collapseOne">
<span class="widget-title font-size-15 font-weight-semi-bold">Section
{{ $increment }}: {{ $section->name }}</span>
<div class="course-duration">
<span>{{ $section->courses->count() }} Vidéos </span>
<span>Durée Totale</span>
</div>
</button>
</h2>
</div>
<div id="collapseSection-{{ $section->id }}" class="collapse" aria-labelledby="collapseMenuOne" data-parent="#accordionCourseMenu">
<div class="card-body">
<div class="course-content-list">
<ul class="course-list">
#foreach ($section->courses as $course)
#php
$increment2++;
#endphp
<li class="course-item-link {{ $loop->first ? 'active' : '' }}">
<div class="course-item-content-wrap">
<div class="custom-checkbox">
<input type="checkbox" id="chb29">
<label for="chb29"></label>
</div>
<div class="course-item-content">
<h4
class="widget-title font-size-15 font-weight-medium">
{{ $increment2 }}.
<a href="{{ route('student.course.chapitre', [
$formation->slug,
'course' => $course->slug,
'id' => $section->id,
]) }}">
{{ $course->name }}
</a>
</h4>
<div class="courser-item-meta-wrap">
<p class="course-item-meta"><i
class="la la-play-circle"></i>Durée</p>
#if ($course->document)
<div class="msg-action-dot">
<div class="dropdown">
<a class="theme-btn theme-btn-light"
href="#" data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
<i class="fa fa-folder-open mr-1"></i>
Document<i
class="fa fa-angle-down ml-1"></i>
</a>
</div>
</div>
#else
#endif
</div>
</div>
</div>
</li>
#endforeach
</ul>
</div>
</div>
</div>
</div>
</div>
#endforeach
</div>
Also, is there a way to make the li active?
I tried different ways, but I failed.
<ul class="faq-list">
#forelse ($faqs as $faq)
<li>
<div data-bs-toggle="collapse" class="collapsed question" href="#faq{{ $faq->id }}">{{ $faq->question }}<i class="bi bi-chevron-down icon-show"></i><i class="bi bi-chevron-up icon-close"></i></div>
<div id="faq{{ $faq->id }}" class="collapse" data-bs-parent=".faq-list">
<p>
{{ $faq->answer }}
</p>
</div>
</li>
#empty
<div>No Questions Found</div>
#endforelse
</ul>
After upgrading to Angular 5 I am facing this error:
ExpressionChangedAfterItHasBeenCheckedError: Expression has
changed after it was checked. Previous value: 'ngIf: undefined'.
Current value: 'ngIf: null'.
If I comment the below div structure the error is disappearing
<div *ngIf="sportsServ?.relatedsportssData" class="stars stars-default pinnedSection">
Any idea how to fix this?
<!-- language-all: lang-or-tag-here -->
<div class="playerpobUpBox playerWindow kPopupConfirmationBox" id="greaterAlertHeader">
<div class="row playerPopUpGridCollection playerPopUpContent lineHeightInputs">
<div class="playerContent"></div>
</div>
<div class="clearFloat"></div>
<div class="row playerPopUpFooter textAligncenterImp">
<button class="commonBtn" type="button" id="greaterAlertOKHeader">OK</button>
</div>
<div class="clearFloat"></div>
<div class="clearFloat"></div>
</div>
<progress-circle></progress-circle>
<div class="leftSlider toggleShow">
<div class="fixedLeftSlider">
<div class="leftSliderBox">
<div class="stars-group" id="accordion">
<div class="stars stars-default recentsportss">
<div class="stars-heading active">
<h4 class="stars-title">
<a data-toggle="collapse" href="#recentsportss" aria-expanded="true">
<i class="fa fa-angle-right starsCaret"></i>
{{recentsportss}}
</a>
<span>{{lastTenViewsportss}}</span>
</h4>
</div>
<div id="recentsportss" class="stars-collapse collapse in" aria-expanded="true">
<div class="stars-body">
<ul *ngFor="let item of recentsportssList; let k=index;">
<li class="recentList" (click)="opensports($event,item.sportsNo,item.packageName,item.pinnedFlag,item.originatingNetwork);$event.stopPropagation();" [class.active]="currentsportsId == item.sportsNo" *ngIf="k<20">
<span> {{item.packageName}}
<i id="pinToggle" class="recentsportssRightIcon" (click)="pinUnpin($event,item.sportsNo); $event.stopPropagation();"></i>
</span>
</li>
</ul>
</div>
</div>
</div>
<div class="stars stars-default pinnedSection">
<div class="stars-heading">
<h4 class="stars-title">
<a data-toggle="collapse" href="#pinnedSection" aria-expanded="true">
<i class="fa fa-angle-right starsCaret"></i>
{{pinnedsportss}} & {{titles}}
</a>
</h4>
</div>
<div id="pinnedSection" class="stars-collapse collapse in" aria-expanded="true">
<div class="stars-body pad0Imp">
<label class="pinnedsportsSubTitle">sportss</label>
<ul *ngFor="let item of pinnedsportssList; let i=index;">
<li class="recentList" (click)="opensports($event,item.sportsNo,item.packageName,item.pinnedFlag,item.originatingNetwork);$event.stopPropagation();" [class.active]="currentsportsId == item.sportsNo" *ngIf="i<20">
<span>{{item.packageName}}
<i id="pinToggle1" class="recentsportssRightIcon" (click)="pinUnpin1($event,item.sportsNo); $event.stopPropagation();"></i>
</span>
</li>
</ul>
<!--<ul>
<li>sports Number One<i class="recentsportssRightIcon"></i></li>
<li>sports Two<i class="recentsportssRightIcon"></i></li>
<li>sports Three<i class="recentsportssRightIcon"></i></li>
</ul>-->
<label class="pinnedsportsSubTitle borderTopTitle">Titles</label>
<ul *ngFor="let item of pinnedTitlesList;let k=index;">
<li class="recentList" (click)="navigateTitlePage($event,item.titleNo);$event.stopPropagation();" *ngIf="k<20">
<span>{{item.titleName}}
<i id="pinTitle1" class="recentsportssRightIcon" (click)="pinUnpintitle($event,item.titleNo);$event.stopPropagation();"></i>
</span>
</li>
<!--<li>Title Name Number One<i class="recentsportssRightIcon"></i></li>
<li>Title Name Number two<i class="recentsportssRightIcon"></i></li>
<li>Title Number 3<i class="recentsportssRightIcon"></i></li>-->
</ul>
</div>
</div>
</div>
<div *ngIf="sportsServ?.relatedsportssData" class="stars stars-default pinnedSection">
<div class="stars-heading">
<h4 class="stars-title">
<a data-toggle="collapse" href="#relatedsportss" aria-expanded="true">
<i class="fa fa-angle-right starsCaret"></i>
{{sportsServ?.relatedsportssHeading}}
</a>
</h4>
</div>
<div id="relatedsportss" class="stars-collapse collapse in" aria-expanded="true">
<div class="stars-body">
<ul>
<li *ngFor="let item of sportsServ?.relatedsportssData" (click)="selectedsports($event,item.sportsId,item.sportsName);$event.stopPropagation();" [class.active]="currentsportsId == item.sportsId">{{item.sportsName}}</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="showHideLeftSliderBtn"></div>
</div>
</div>
<router-outlet></router-outlet>
<!--<div><sportsSearch style="display:none;" (sportsSearchEmitter)="sportsSearchEmitter($event)"></sportsSearch></div>-->
Probably you're getting this value asynchronously, you may try to:
Use changeDetection: ChangeDetectionStrategy.OnPush on your #Component (before selector), in your .ts file, don't forget to import changeDetection from "#angular/core";
Try to not get the value asynchronously, using setTimeout() function to get the value;
Inject cdr: ChangeDetectorRef on your module and import it from your "#angular/core", after that, on your implemented ngAfterViewChecked just put this.cdr.detectchanges.
To provide a better answer, you need to post your .ts code, and remove some lines to make the code cleaner. Hope it helps!
Hi all I am using Boostrap 4 beta-2 and am trying to get the carousel to use the slide animation. I had class="item" to the "carousel-item" class to get it to switch between slides (which also removed the 'offsetWidth undefined' console error. However, the animation is still not working and just jumps between slides.
Can anyone point me in the right direction? I'm not sure where the issue lies. (CSS/JS). There are no errors in the console.
<!-- ********* HEADER 3 ********* -->
<div class="header-3">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item carousel-item active">
<div class="page-header header-filter">
<div class="page-header-image" style=""></div>
<div class="content-center">
<div class="container text-left">
<div class="content-center">
<div class="row">
<div class="col-md-5">
<div class="iframe-container">
<iframe height="250" src="https://www.youtube.com/embed/rmfmdKOLzVI?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="col-md-6 ml-auto mr-auto text-right">
<h1 class="title">On the run tour.</h1>
<h4 class="description ">On the Run Tour: Beyoncé and Jay Z is a 2014 concert special which documents the September 12 and 13, 2014, shows of American singers' Beyoncé and Jay-Z joint co-headlining venture On the Run Tour.</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item carousel-item">
<div class="page-header header-filter">
<div class="page-header-image" style=""></div>
<div class="content-center">
<div class="container">
<div class="content-center">
<div class="row">
<div class="col-md-8 ml-auto mr-auto text-center">
<h1 class="title">Island of legends.</h1>
<h4 class="description ">The islands of Malta and Gozo are brilliant for a family holiday, packed with fun places to visit whatever your children’s ages. The islands’ small size means everywhere is within easy reach.</h4>
<br />
<h5>Connect with us on:</h5>
<div class="buttons">
<a href="#pablo" class="btn btn-icon btn-neutral btn-danger btn-round mt-2">
<i class="fa fa-twitter"></i>
</a>
<a href="#pablo" class="btn btn-icon btn-neutral btn-danger btn-round mt-2">
<i class="fa fa-facebook-square"></i>
</a>
<a href="#pablo" class="btn btn-icon btn-neutral btn-danger btn-round mt-2">
<i class="fa fa-google-plus"></i>
</a>
<a href="#pablo" class="btn btn-icon btn-neutral btn-danger btn-round mt-2">
<i class="fa fa-instagram"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item carousel-item">
<div class="page-header header-filter">
<div class="page-header-image" style=""></div>
<div class="content-center">
<div class="container">
<div class="content-center">
<div class="row">
<div class="col-md-6 text-left">
<h1 class="title">Arctic Sea ice.</h1>
<h4 class="description ">According to the National Oceanic and Atmospheric Administration, Ted Scambos, NSIDC lead scientist, puts the potentially record low maximum sea ice extent this year down to low ice extent in the Pacific and a late drop in ice extent in the Barents Sea.</h4>
<br />
<div class="buttons">
<a href="#pablo" class="btn btn-neutral btn-primary btn-lg mr-1">
<i class="now-ui-icons files_single-copy-04"></i> Read More..
</a>
<a href="#pablo" class="btn btn-primary btn-lg">
<i class="now-ui-icons arrows-1_share-66"></i> Subscribe
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<i class="now-ui-icons arrows-1_minimal-left"></i>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<i class="now-ui-icons arrows-1_minimal-right"></i>
</a>
</div>
</div>
<!-- ********* END HEADER 3 ********* -->
Change this
<div id="carouselExampleIndicators" class="container" data-ride="carousel">
to this
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
Carousel w/ Indicators documentation
Check if you have more then one .css file in your project. If you downloaded some themes from internet It could be that those styles rewrite original bootstrap classes and effected on your carousel.
I'm working on a project, it was working normally. But then I had to add Iron-Router to add some features and one of my templates do not work anymore.
I have this home.html file, that import two templates, "nova" and "piadas". But only the "nova" is displayed. How do I fix it?
home.html:
<template name="home">
<br>
{{> nova}}
<div class="fixed-action-btn horizontal">
<a class="btn-floating btn-large green accent-4"> <i class="large material-icons">person</i> </a>
<ul>
<li><a class="btn-floating green accent-4"><i class="material-icons">add</i></a></li>
<li><a class="btn-floating green accent-4"><i class="material-icons">account_circle</i></a></li>
</ul>
</div>
<br>
{{> piadas}}
</template>
piadas.html:
<template name="piadas">
<div class="row"> {{#each piadas}}
<div class="col s12 m6">
<div class="card grey lighten-4">
<div class="card-content black-text"> <span class="card-title">{{titulo}}</span>
<p class="truncate">{{piada}}</p>
</div>
<div class="card-reveal"> <span class="card-title grey-text text-darken-4">{{titulo}}<i class="material-icons right">close</i></span>
<p>Essa piada foi enviada por <strong>{{autor}}</strong> no dia <strong>{{formataData}}</strong>.</p>
<button id="btn-like" class="btn" style="float: left;"><i class="material-icons ">thumb_up</i></button>
<button id="btn-denunciar" class="btn btn-danger" style="float: right;"><i class="material-icons ">flag</i></button>
</div>
<div class="card-action"> <i class="material-icons right">more_vert</i> </div>
</div>
</div> {{/each}} </div>
</template>
I've discovered that: how the "piadas" template was returning a helper function with some MongoDB querys, I had to pass the querys for the router.
I've made a profile page on which user's posts are displayed, user can perform function delete or edit post.But,
when i click on edit post on any of my post ,only content of first post is fetched in the modal.
my js code:
$('.dropdown-menu').find('.edit').on('click', function(e) {
e.preventDefault();
var postbody = $('#fetch').find('p').text();
$('#post-body').val(postbody);
$('#edit-modal').modal();
});
my view code:
#foreach($posts as $post) #if(Auth::user()== $post->user)
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<section class="col-md-2 col-xs-2">
<img id="imagesize2" src="images/g.jpg" class="img-circle" data- action="zoom" />
</section>
<section class="col-md-5 col-xs-offset-1 col-xs-5">
<a id="alink13" href=""><h5 id="alink14">{{$post->user->firstname}}</h5> </a>
<p>on {{$post->created_at}}</p>
</section>
<section class="col-md-offset-3 col-md-2 col-xs-4 col-lg-offset-1">
<div class="btn-group">
<button id="btnclr4" type="button" class="btn btn-default dropdown- toggle" data-toggle="dropdown" aria-expanded="false"><span class="glyphicon glyphicon-chevron-down"></span>
</button>
#if(Auth::user()==$post->user)
<ul id="remove" class="dropdown-menu" role="menu">
<a id="remove2" href="{{route('post.delete',['post_id' => $post->id])}}">
<li role="presentation">Remove This Post</li>
</a>
<a href="" class="edit">
<li role="presentation">Edit This Post</li>
</a>
</ul>
#endif
</section>
</div>
</div>
<div class="panel-content">
<div class="row" id="fetch">
<section class="col-md-12">
<p>{{$post->body}}</p>
</section>
</div>
</div>