I do not know what I have done wrong but the Accordion is just not showing up on my view (only a rectangular border).
This is the code:
<!-- Bootstrap Accordion -->
<div style="width:600px; margin:20px auto;">
<div ng-controller="AccordionCtrl">
<uib-accordion close-others="oneAtATime">
<uib-accordion-group heading="{{group.title}}" ngrepeat="group in groups">
{{group.content}}
</uib-accordion-group>
</uib-accordion>
</div>
</div>
Here is the controller:
.controller('AccordionCtrl', function ($scope) {
// Add some content to accordion
$scope.groups = [
{
title: 'Header Content One',
content: 'Body Content One'
},
{
title: 'Header Content Two',
content: 'Body Content Two'
},
{
title: 'Header Content Three',
content: 'Body Content Three'
}
];
});
Related
I have the problem that select2 doesn't work in a jquery.confirm modal. It's not clickable and doesn't show any entries. It works fine outside the modal.
<script src="js/select2.full.min.js"></script>
<link rel="stylesheet" href="css/select2.min.css">
$.confirm({
title: 'Modal',
boxWidth: '500px',
icon: 'fa-solid fa-wagon-covered',
useBootstrap: false,
theme: 'material',
typeAnimated: true,
type: 'green',
content: "content"
});
You have to add an extra line that defines the container of the modal content as parent after content is ready.
$.confirm({
title: 'Modal',
boxWidth: '500px',
icon: 'fa-solid fa-wagon-covered',
useBootstrap: false,
theme: 'material',
typeAnimated: true,
type: 'green',
content: "content",
onContentReady: function() {
//Add this line after content is ready
$("#selUser").select2({
dropdownParent: $(".jconfirm-content").parent()
});
}
});
I'am using angular-calendar with a custom template as given here : https://mattlewis92.github.io/angular-calendar/#/custom-templates,
For the month - view i would like to have a "Show more" option which will load more events in the day cell. By default i want to have only 4 events listed on the day cell. Something similar to google calendar.
Let me know how can if i have an option for this in the month view or if i manually need to populate only 4 events and have a show more icon in the array and on click load the remaining in (eventClicked).
Screenshot of the calendar i am trying:
I found the answer , by creating a custom template and using a EVENT_LIMIT which i have set to 4 , so by default i will have 4 events listed in month view , and if there are 3 more events , i would get the "3 More" in the month view.
More popup html :
<div class="more-popup scrollbar" *ngIf="moreEvents.length>0"
[ngStyle]="{'top' : moreEventStyles.top , 'left': moreEventStyles.left}">
<div class="header">
<button type="button" class="close close-more-popup" (click)="moreEvents=[]">×</button>
<div class="header-day">{{moreEvents[0].start | date : 'E'}}</div>
<div class="header-date">{{moreEvents[0].start | date : 'd'}} </div>
</div>
<div class="body">
<div *ngFor="let e of moreEvents">
<div class="body-events" [ngStyle]="{ backgroundColor: e.color?.primary }"
(click)="handleEvent('Clicked', e)">{{e.title}}</div>
</div>
</div>
</div>
<mwl-calendar-month-view *ngSwitchCase="CalendarView.Month" [viewDate]="viewDate"
[events]="calEvents" [cellTemplate]="customCellTemplate"
(eventClicked)="handleEvent(event, $event.event)"
(dayClicked)="dayClicked($event.day)">
</mwl-calendar-month-view>
<ng-template #customCellTemplate let-day="day" let-locale="locale"
let-tooltipPlacement="tooltipPlacement"
let-highlightDay="highlightDay" let-unhighlightDay="unhighlightDay"
let-eventClicked="eventClicked"
let-tooltipTemplate="tooltipTemplate"
let-tooltipAppendToBody="tooltipAppendToBody" let-tooltipDelay="tooltipDelay">
<div class="cal-cell-top">
<span class="cal-day-badge" *ngIf="day.badgeTotal > 0">
{{ day.badgeTotal }}</span>
<span class="cal-day-number">
{{ day.date | calendarDate:'monthViewDayNumber':locale }}</span>
</div>
<div *ngIf="day.events.length > 0">
<div *ngFor="let event of day.events; trackBy: trackByEventId; index as i">
<ng-template *ngIf="i < EVENT_LIMIT; then showEventsBlock; else showMoreBlock">
</ng-template>
<ng-template #showEventsBlock>
<div class="cal-events" *ngIf="i < EVENT_LIMIT" [ngStyle]="{ backgroundColor: event.color?.primary }"
[ngClass]="event?.cssClass" (mwlClick)="eventClicked.emit({event: event})" [mwlCalendarTooltip]="event.title | calendarEventTitle: 'monthTooltip':event"
[tooltipPlacement]="tooltipPlacement" [tooltipEvent]="event" [tooltipTemplate]="tooltipTemplate"
[tooltipAppendToBody]="tooltipAppendToBody" [tooltipDelay]="tooltipDelay">
{{event.title}}
</div>
</ng-template>
<ng-template #showMoreBlock>
<ng-container *ngIf="i === EVENT_LIMIT">
<div class="cal-events" (mwlClick)="handleMoreEvent($event,day.events)">
<a class="showmore"> {{day.events.length - EVENT_LIMIT}} more</a>
</div>
</ng-container>
</ng-template>
</div>
</div>
</ng-template>
ts:
handleMoreEvent(e: any , events: LogBookCalendarEvent[]) {
this.moreEvents = events;
this.moreEventStyles.top = `${e.srcElement.offsetTop}px`;
this.moreEventStyles.left = `${e.srcElement.offsetLeft}px`;
this.moreEventStyles = {...this.moreEventStyles};
}
Screen shot of the result :
On click of the 3 more :
It's a good idea, if you want to do it without popup you can do it like this:
using angular-calendar with a custom template as given here
ts:
import { Component, ChangeDetectionStrategy } from '#angular/core';
import { CalendarEvent } from 'angular-calendar';
import {
startOfDay,
addDays,
} from 'date-fns';
import { BehaviorSubject, Subject, interval } from 'rxjs';
#Component({
selector: 'mwl-demo-component',
changeDetection: ChangeDetectionStrategy.OnPush,
templateUrl: 'template.html'
})
export class DemoComponent {
view: string = 'month';
viewDate: Date = new Date();
events: CalendarEvent[] = [
{ start: new Date(), title: 'An event' },
{ start: new Date(), title: 'An event' },
{ start: new Date(), title: 'An event' },
{ start: new Date(), title: 'An event' },
{ start: new Date(), title: 'An event' },
{ start: new Date(), title: 'An event' },
{ start: new Date(), title: 'An event' },
{ start: addDays(startOfDay(new Date()), 1), title: 'different date' },
{ start: addDays(startOfDay(new Date()), 1), title: 'different date' },
{ start: addDays(startOfDay(new Date()), 1), title: 'different date' },
{ start: addDays(startOfDay(new Date()), 1), title: 'different date' },
{ start: addDays(startOfDay(new Date()), 1), title: 'different date' },
];
showMore = false;
showMoreDate = null;
showMoreClicked(date: Date){
this.showMoreDate = date;
this.showMore = ! this.showMore;
}
}
change html line of *ngfor to:
`*ngFor="let event of day.events | slice:0:(showMoreDate==day.date && showMore) ? undefined :3; trackBy: trackByEventId"`
change html span to:
`Show {{ day.events.length - 3 }} {{ (showMoreDate==day.date && showMore) ? 'less' : 'more' }} `
result
I want to design the ion-menu and implement css in the menu but where we will write the css i am not getting as there is no app.css is available.
I want to add the categories and inside that i want to add sub categories but from the web service. How to do this please help me.
I have tried but i am able to show the menu options static not dynamic which i will get from the api.
Please guide me what to do.
<ion-app>
<ion-menu contentId="content" side="start">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div *ngFor="let p of pages">
<ion-menu-toggle *ngIf="p.url">
<ion-item [routerLink]="p.url" routerDirection="root" routerLinkActive="active">
<ion-icon [name]="p.icon" slot="start"></ion-icon>
<ion-label>
{{p.title}}
</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-item button *ngIf="p.children?.length > 0" (click)="p.open = !p.open" [class.parent-active]="p.open"
style="font-weight: 500;" detail="false">
<ion-icon slot="start" name="arrow-forward" *ngIf="!p.open"></ion-icon>
<ion-icon slot="start" name="arrow-down" *ngIf="p.open"></ion-icon>
<ion-label>{{ p.title }}</ion-label>
</ion-item>
<ion-list *ngIf="p.open">
<ion-menu-toggle>
<ion-item *ngFor="let sub of p.children" class="sub-item" style="padding-left: 20px;
font-size: small;" [routerLink]="sub.url" routerDirection="root" routerLinkActive="active"
style="--ion-text-color: var(--ion-color-primary);">
<ion-icon [name]="sub.icon" slot="start"></ion-icon>
<ion-label>
{{ sub.title }}
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</div>
</ion-content>
</ion-menu>
<ion-router-outlet [swipeGesture]="false" id="content" main></ion-router-outlet>
</ion-app>
I want the dynamic data to display in the side menu and design the side menu.
app.component.ts
pages = [
{
title: 'Main',
url: '/home',
icon: 'home'
},
{
title: 'Categories',
children: [
{
title: 'categories',
url: '/categories',
icon: 'arrow-dropright'
},
{
title: 'wishlist',
url: '/wishlist',
icon: 'arrow-dropright'
}, {
title: 'Your Orders',
url: '/your-orders',
icon: 'arrow-dropright'
}, {
title: 'My Profile',
url: '/profile',
icon: 'play'
}
]
}, {
title: 'Offers',
children: [
{
title: 'categories',
url: '/categories',
icon: 'play'
},
{
title: 'wishlist',
url: '/wishlist',
icon: 'play'
},
]
}, {
title: 'LogOut',
url: '/user-login',
icon: 'log-out'
}
];
Use style below ion-content
for example this will make your ion-menu background black.Like that do for other elements inside your menu
<style>
ion-content{
background:black;
}
</style>
You can add app.componet.scss in src directory. And you have to add styleUrls to Component decorator like below:
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
encapsulation: ViewEncapsulation.None
})
I am using tiny mce html editor in my asp.net website.I want to use a asp button on that page to insert some value in database but asp button click event is not working.All i mean is postback on button is not working.
this is below my .aspx file code..
<head runat="server">
<title></title>
<script src="Script/jquery.1.8.2.min.js"></script>
<script src="/tinymce/js/tinymce/tinymce.min.js"></script>
<link href="StyleSheet.css" rel="stylesheet" />
<%--<script src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>--%>
<script>
tinymce.init({
selector: "textarea#<%=elm1.ClientID%>",
theme: "modern",
height: 300,
plugins: [
"advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker","searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
"save table contextmenu directionality emoticons template paste textcolor"
],
content_css: "css/content.css",
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons",
style_formats: [
{ title: 'Bold text', inline: 'b' },
{ title: 'Red text', inline: 'span', styles: { color: '#ff0000' } },
{ title: 'Red header', block: 'h1', styles: { color: '#ff0000' } },
{ title: 'Example 1', inline: 'span', classes: 'example1' },
{ title: 'Example 2', inline: 'span', classes: 'example2' },
{ title: 'Table styles' },
{ title: 'Table row 1', selector: 'tr', classes: 'tablerow1' }
]
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="elm1" runat="server" TextMode="MultiLine"></asp:TextBox>
<h3 style="color:#565656; margin-left:540px;">Admin panel to upload content</h3>
</div>
<div style="height:400px; width:500px; background-color:#ffffff;margin-top: 50px; margin:0 auto;box-shadow: 0px 10px 20px 3px #d3d3d3;">
<asp:TextBox ID="title_A" runat="server" placeholder=" Enter Title" CssClass="Admin_dial"></asp:TextBox>
<asp:TextBox ID="content_A" runat="server" placeholder=" Enter content" CssClass="Admin_dial"></asp:TextBox>
<asp:TextBox ID="author_A" runat="server" placeholder=" Enter author name" CssClass="Admin_dial"></asp:TextBox>
<asp:Button ID="UploadA_btn" runat="server" Text="Upload" CssClass="Admin_upload_btn" OnClick="UploadA_btn_Click" />
</div>
<div style="height:50px;"></div>
Here UploadA_btn_click event is not working.What i do to solve this problem?
Try OnClientClick="return Upload_btn_Click()"
or
Just add UploadA_btn_Click to the Click event in the buttons properties which will generate
Protected Sub Upload_btn_Click_Click(sender As Object, e As EventArgs) Handles Upload_btn_Click.Click
End Sub
I'm using jQuery UI to create a "button" to a given html element. I'm using Knockout.js to generate the html element (foreach).
However, I can't find the way how to pass a parameter to the click event for knockout.js generated items. In the following example, the somewhat static sampleButton works, but not the itemButton items.
http://jsfiddle.net/patware/QVeVH/
function ViewModel() {
var self = this;
self.ping = 'pong';
self.items = ko.observableArray([
{ display: 'Cars', id: 1 },
{ display: 'Fruits', id: 2 },
{ display: 'Humans', id: 3 },
{ display: 'Software', id: 4 },
{ display: 'Movies', id: 5 },
]);
}
ko.applyBindings(new ViewModel());
$("#sampleButton").button().data('someData',101);
$("#sampleButton").click(function(e){
alert('clicked sample: [' + $(this).data('someData') + ']');
});
$(".itemButton").button().data('someData',$(this).id);
$(".itemButton").click(function(){
alert('clicked item: [' + $(this).attr('foo') + ']');
});
ping-<span data-bind="text: ping"></span>
<div id="sample">
<div id="sampleButton">
<h3>Sample Button</h3>
Click here too
</div>
</div>
<div data-bind="foreach: items">
<div class="itemButton" data-bind="foo: id">
<h3 data-bind="text:display"></h3>
</div>
</div>
Consider using ko.dataFor instead of applying data with jquery.
Working sample based on your example http://jsfiddle.net/QVeVH/6/
You can set everything up using a custom binding.
http://jsfiddle.net/jearles/QVeVH/7/