I'm try to create accordion using ngb-accordion with drag and drop support using cdkdrag,
but when I'm using
<ngb-panel *ngFor="let content of children; let i = index" cdkDrag [cdkDragData]="content">
my drag and drop nothing happen, then I try move cdkdrag in
<ng-template ngbPanelHeader>
<div class="card-title d-flex align-items-center justify-content-between" cdkDrag [cdkDragData]="content">
this creates drag and drop functionality but, when dragging some card-title and try hover to other ngbPanelHeader, the view not sorting well and the destination is gone. I think it the structure of ngb-panel create div class="card" and I try to drag element inside div class="card-title
are there any people already successful created ngb-accordion with drag and drop support?
I'm decided to using material accordion, that many sample material with cdkdrag
Related
I'm building an app with flip cards with three buttons each. I need to show the text in the button clicked on the back of the card. How can I do this in Svelte?
<section class="front-side">
<button aria-label="Pizza" on:click={flip}>PIZZA</button>
<button aria-label="Donuts" on:click={flip}>DONUTS</button>
<button aria-label="Hot Dogs" on:click={flip}>HOT DOGS</button>
</section>
<section class="back-side">
Great! We like {data} too.
</section>
This can be solved in a number of ways but the easiest is CSS and the class directive. Whenever one of your options is clicked just toggle a flipped variable and bind it to a class of the same name on a div that wraps the front and back of the card.
If you want to inform the parent of the flip component about the option selected for each card you can dispatch the clicked card's data and handle it how you see fit.
Here's a simplified example in the REPL with CSS pretty much scraped from the W3 Schools tutorial on flip cards the only difference would be instead of hover being the trigger the flipped class has the transform inside it.
https://svelte.dev/repl/782718a4f2fe43e3b731822b54aaed78?version=3.38.3
I am new to angular.I have two components,One to Display an image slider and another for displaying the list of categories (similar to side nav,but displayed as a list).I want my list component to draw over the image slider so that both are visible, with the image slider's content under list is hidden.
Is there any way to achieve this?
Thanks in advance.
Please have a look at this:Layout Of Webpage
<mat-nav-list>
<a mat-list-item routerLink="#" *ngFor="let list of lists">
<mat-icon >
{{list.category_icon}}
</mat-icon>
{{list.category_name}}
</a>
</mat-nav-list>
I am trying to show only the active tab in md-tabs on mobile view. I want the tab to be centered, and when I user swipes left or right, the tab title changes with the next or previous (somehow should be 100% width). Is this possible?
I have my tabs set up like this:
<md-toolbar>
<md-tabs md-swipe-content="true" md-selected="selectedDayIndex">
<md-tab ng-repeat="day in days | orderBy:predicate:reversed" md-on-select="openDay(day)"><p class="currentDay">{{day.day}}</p></md-tab>
</md-tabs>
</md-toolbar>
<md-content layout-padding>
<ng-switch on="selectedDay" class="tabpanel-container">
<div>
<p>{{selectedDayInfo.day}}</p>
</div>
</ng-switch>
</md-content>
Please see the following Plunkr: http://plnkr.co/edit/FQzOFEZLi6ReAuJninxA?p=preview
I would play around with 'hide' attributes - https://material.angularjs.org/latest/layout/options.
Also it would be fairly easy (without looking at your code) to just create logic that would detect screen size and from there just to create different DOM elements based on that (ng-show etc.).
At the moment the below code means the link for "deploy-sidebar" and "notifications.html" are overlapping, meaning if I try and click the deploy-sidebar icon, its actually the notifications link thats activated.
<div class="content-controls solid-color fixed-header">
<a class="deploy-sidebar" href="#"></a> <em class=
"content-title">Title</em>
<a class="mytextwithiconFriendActivityNo" href="notifications.html"></a>
<a class="mytextwithiconFriendActivityYes" href="notifications.html"></a>
<a class="mytextwithiconBadgeActivityNo" href="notifications.html"></a>
<a class="mytextwithiconBadgeActivityYes" href="notifications.html"></a>
</div>
I thought I could use margin-left to position the icon correctly, but this creates the overlap with the deploy side bar icon.
Guessing I need to use CSS, but can I use some other method to position the icon where it is, without creating the overlap that acts as a link. I've tried background-position too, but that does not seem to work
I have an audio clip that plays through once and then the 'Play' button is disabled so that it can't be played again. The only problem is the scrollbar is clickable so that the user can go back to the beginning or forwards which is not the desired process as they should only be able to play it once.
Is there a way of preventing a user from clicking on the blue progress bar as per the image below?
Thanks
There is a div on top of the progressbar with the the class "jp-seek-bar".
It is this div which makes the progressbar scrollable.
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
So you simply need to remove this div. The progress itself will still be visible.
<div class="jp-progress">
<div class="jp-play-bar"></div>
</div>
Another solution is to unbind the event-listener binded to the jp-seek-bar div.