I want to add the ng2-bootstrap's date picker popup on top of a dropdown div that I created. When that did not work I tried to just create a simple multilevel dropdown to begin with. Eventually I want date picker popup to show up when clicked on the dropdown I have. Can you help please. Here is my code.
I am new to the community. Please let me know if I missed any information that should have been included.
import {Component} from 'angular2/core';
import {DROPDOWN_DIRECTIVES, DATEPICKER_DIRECTIVES} from "ng2-bootstrap/ng2-bootstrap";
#Component({
selector: 'multilevel-dropdown',
template: `
<div>
<div dropdown [autoClose]="'disabled'">
<div dropdownToggle id="TopLine" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<H1>Today's date is: {{dt | date:'short'}} (click date for pop-up)<b class="caret"></b></H1>
</div>
<div class="dropdown-menu">
<div class="dropdown dropdown-submenu">
<div id="FirstPopup" class="dropdown-toggle" data-toggle="dropdown" aria-labelledby="TopLine" aria-expanded="false">
<H3>First Popup (implemented as dropdown) (click this text for next popup)<b class="caret"></b></H3>
<!--Following should be replaced with the div commented later for datepicker popup-->
<div class="dropdown-menu">
<div class="dropdown dropdown-submenu">
<div id="SecondPopup" class="dropdown-toggle" data-toggle="dropdown" aria-labelledby="FirstPopup" aria-expanded="false">
<H5>Second Popup (implemented as dropdown)</H5>
</div>
</div>
</div>
<!--<div id="SecondPopup" class="dropdown-menu dropdown-menu-right" aria-labelledby="FirstPopup">-->
<!--<datepicker [(ngModel)]="dt" [showWeeks]="false"></datepicker>-->
<!--</div>-->
</div>
</div>
</div>
</div>
</div>
`,
directives: [DROPDOWN_DIRECTIVES, DATEPICKER_DIRECTIVES]
})
export class MultilevelDropdownComponent {
public dt:Date= new Date();
}
Found the fix. The issue was that each time a dropdown (at any level) is clicked, the event is propagated up the DOM and the dropdown-toggle toggles the open dropdown. In order for multilevel-dropdown to work, I needed to capture the event and stop propagation based on if I am opening the next level of dropdown or closing an existing one.
Related
In Nuxt I have 3 pages (index, login and register) that needs to show the same structure, the code above.
It's a form with tabs. then in the tag it's were I show some diferences.
I decided to put that code in the default.vue file.
But now, I have more pages were I don't need to show the "forms" class and the tabs.
Any suggestion about how can I achieve it?
Thank you
<template>
<div>
<div class="container is-fluid">
<navbar></navbar>
<div class="places">
<div class="structure">
<div class="forms">
<div class="tabs help-tabs">
<ul class="tab_title">
<li :class="[tab === 'register' ? 'is-active' : '']">
<a #click="tab='register'">Register</a>
</li>
<li
:class="[tab === 'login' ? 'is-active' : '']"
#click="goToRoute('login')">
<a #click="tab = 'login'">Login</a>
</li>
</ul>
</div>
</div>
<nuxt />
</div>
</div>
</div>
</div>
</template>
You could either create a second layout beside the default.vue and use it only for these routes (index, login and register) so you have:
auth.vue for index, login and register pages
default.vue for all other pages
You could then specify which layout you want to use in the page file directly like here
export default {
layout: 'auth',
}
Or you stick to using one single layout (default.vue) and create a component (eg. tab component) which you then display on all 3 of those routes.
I was tried to using angular material drag and drop and I was looping through cdkDropList container. I'm not able to drag the items from Catalogue to (to do )list. If I'm not using any loop then it's working fine.
Here is my stackblitz link
I tried without loop that is working fine
<div cdkDropList #todoList="cdkDropList" [cdkDropListData]="todo" [cdkDropListConnectedTo]="[done]" [id]="item"
class="column-list" (cdkDropListDropped)="drop($event)"
<div class="column-box" [ngClass]="[(item.Name=='R') ?'Red':'',(item.Name=='G') ?'Green':'',(item.Name=='B') ?
'Blue':'',(item.Name=='Y') ?'Yellow':'',(item.Name=='O') ?'Orange':'']" *ngFor="let item of items3" cdkDrag cdkDragLockAxis="y">
{{item.Name}}</div>
</div>
but if I'm adding this *ngFor it's not working
<div cdkDropList #todoList="cdkDropList" [cdkDropListData]="todo" [cdkDropListConnectedTo]="[done]" [id]="item"
class="column-list" (cdkDropListDropped)="drop($event)" *ngFor="let item of signalContainer">
<div class="column-box" [ngClass]="[(item.Name=='R') ?'Red':'',(item.Name=='G') ?'Green':'',(item.Name=='B') ?
'Blue':'',(item.Name=='Y') ?'Yellow':'',(item.Name=='O') ?'Orange':'']" *ngFor="let item of items3" cdkDrag cdkDragLockAxis="y">
{{item.Name}}</div>
</div>
COMPONENT.TS
import {Component} from '#angular/core';
import {CdkDragDrop, moveItemInArray, transferArrayItem} from '#angular/cdk/drag-drop';
#Component({
selector: 'cdk-drag-drop-connected-sorting-example',
templateUrl: 'cdk-drag-drop-connected-sorting-example.html',
styleUrls: ['cdk-drag-drop-connected-sorting-example.css'],
})
export class CdkDragDropConnectedSortingExample {
initialSkeleton = new Array(5);
done = [
'A','B','C','D','E'
];
drop(event: CdkDragDrop<string[]>) {
if (event.previousContainer === event.container) {
debugger;
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
} else {
event.container.data[event.currentIndex] = event.previousContainer.data[event.previousIndex];
}
}
}
HTML
<div class="example-container">
<h2>To do</h2>
<div cdkDropList #todoList="cdkDropList" [cdkDropListData]="initialSkeleton" [cdkDropListConnectedTo]="[doneList]" class="example-list"
(cdkDropListDropped)="drop($event)">
<div class="example-box" *ngFor="let item of initialSkeleton" cdkDrag>
<div class="child" >{{item }}</div>
</div>
</div>
</div>
<div class="example-container">
<h2>Done</h2>
<div cdkDropList #doneList="cdkDropList" [cdkDropListData]="done" [cdkDropListConnectedTo]="[todoList]" class="example-list"
(cdkDropListDropped)="drop($event)">
<div class="example-box" *ngFor="let item of done" cdkDrag>{{item}}</div>
</div>
</div>
I've modified the code now you will be able to drag and drop items in the for loop. Hope it answers your question.
I am using bootstrap vue to create a dropdown but i can't apply scoped style on it because the main button is being created without the "data-v-XXX" attribute.
is there any workaround?
<b-dropdown id="ddown2" variant="link" toggle-class="btn-clean">
<b-dropdown-item-button>test 1
</b-dropdown-item-button>
<b-dropdown-item-button>test 2
</b-dropdown-item-button>
</b-dropdown>
<style scoped>
.btn-clean {
color: #337ab7;
}
</style>
Generated code:
<div id="ddown2" class="btn-group b-dropdown dropdown" data-v-25a41064="">
<button id="ddown2__BV_toggle_" aria-haspopup="true" aria-expanded="false" type="button" class="btn btn-link dropdown-toggle btn-clean">test1</button>
<div role="menu" aria-labelledby="ddown2__BV_toggle_" class="dropdown-menu">
<button role="menuitem" type="button" class="dropdown-item" data-v-25a41064="">test1
</button><button role="menuitem" type="button" class="dropdown-item" data-v-25a41064="">test2
</button>
</div>
</div>
without "data-v-25a41064" on the button id="ddown2__BV_toggle_"
I came across the same issue today. It helped for me if I put the styling a component higher.
Vue-loader only applies scoped styles to the root element of child components.
You need to use the /deep/ CSS selector to target inside child components.
See docs at https://vue-loader.vuejs.org/guide/scoped-css.html#child-component-root-elements
I have a kendo-popup in an angular component which I use within a kendo-dialog. The popup will be shown next to an icon when the user clicks on the icon. The positioning of the popup works fine when it is not inside a kendo-dialog. But the positioning is not correct when it is within a kendo-dialog. When the button is clicked within the kendo-dialog, the popup does not show up next to the icon. It shows up somewhere else.
Angular 2 Component 1 <comp-1>:
<span>
<input type="text" #anchor />
<button type="button" click="toggleView()"><i class="fa fa-cog fa-2x"></i>
</button>
</span>
<kendo-popup [anchor]="anchor"><!-- Some Content --></kendo-popup>
Angular 2 Component 2:
<div click="openDialog()"></div>
<div>
<kendo-dialog *ngIf="showDialog">
<comp-1></comp-1>
</kendo-dialog>
</div>
When I click the div to open the dialog, the kendo-popup does not show next to the input tag. It shows up somewhere to the lower right.
Edit 1:
Tried moving the popup to within the span. Still not working.
Angular 2 Component 1 <comp-1>:
<span>
<input type="text" #anchor />
<button type="button" click="toggleView()"><i class="fa fa-cog fa-2x"></i>
</button>
<kendo-popup [anchor]="anchor"><!-- Some Content --></kendo-popup>
</span>
Angular 2 Component 2:
<div click="openDialog()"></div>
<div>
<kendo-dialog *ngIf="showDialog">
<comp-1></comp-1>
</kendo-dialog>
</div>
Note: I have intentionally left out the styles. In the original source, I have all the styles setup properly.
You have to specify where the popup will display by using an id of anchor on the target element:
<div>
<target-tag #anchor></target-tag>
</div>
<div>
<kendo-popup [anchor]="anchor">
<Content to display>
</kendo-popup>
</div>
I have a Kendo Angular2 Slack: https://kendouiangular2.slack.com
I tried to replicate the issue in a standalone Plunker demo, but it seems that the popup positions just fine in Kendo Dialog component:
Tested in Chrome and Safari.
This is the dialog content:
<input #anchor style="width: 100px"/>
<button kendoButton (click)="toggle()">Toggle</button>
<kendo-popup *ngIf="popupOpen" [anchor]="anchor" style="width: 100px">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</kendo-popup>
And this is the actual test Plunker demo:
http://plnkr.co/edit/Y3oBZwa8xf0WiP462jW7?p=preview
Could you modify it in order to reproduce the issue? This will help to find the cause of the erroneous behavior faster.
please use div id which div you want to popup.
<div id="popupdiv"></div>
$("#popupdiv").kendoWindow({
title: "Inforamtion",
resizeable: true,
scrollable: false,
width: "50%",
actions: ["Pin", "Close"],//["Pin", "Refresh", "Maximize", "Close"],
modal: true,
// pinned: true,
animation: {
close: {
effects: "fade:out"
},
}
});
dunno whats going on with my image slider under the 'support' tab section its not showing up correctly, its cutting half of it off and looking weird. The main image slider is good. But, when you inspect element all of a sudden the 'support' orbital image slider looks normal. This is with the foundation framework.
here's a link to see the bug:
http://www.omegadesignla.com/virtual/
and some html:
<div class="content" id="panel6">
<div class="row">
<div class="large-4 columns">
<h3> OFLVS Contact Info:</h3>
<ul>
<li>Student Support</li>
<li>Parent Support</li>
<li>Support links and resources</li>
</ul>
</div>
<div class="large-8 columns">
<ul class="example-orbit" data-orbit>
<li>
<img src="imgs/flash3.jpg" alt="slide 1" />
<div class="orbit-caption">
Caption One.
</div>
</li>
<li>
<img src="imgs/flash12.jpg" alt="slide 2" />
<div class="orbit-caption">
Caption Two.
</div>
</li>
<li>
<img src="imgs/flash9.jpg" alt="slide 3" />
<div class="orbit-caption">
Caption Three.
</div>
</li>
</ul>
</div>
</div>
Learn More
Sign Up
</div>
javascript:
$(document).foundation({
tab: {
callback : function (tab) {
$(document).foundation('reflow');
}
},
orbit: {
pause_on_hover: false,
timer_speed: 6000
}
});
I think your error stems from the fact that the orbit slider is in the tab content section. I had a similar error with a range slider in a tab section.
Try reflowing the javascript in a JS file with a tab callback like so:
$(document).foundation({
tab: {
callback : function (tab) {
$(document).foundation('orbit', 'reflow');
}
}
});
EDIT: I've corrected my answer and added a working fiddle.