Hi I have some issue regarding Css and I have not been able to do it.
how to move those numbers which are highlighted to left with names.
I have tried flex direction margin auto etc but I cannot get desired result.
here is my html code
<section class="favorites">
<div class="category" *ngFor="let category of categoryKeys">
<div class="sub-header">{{category}}</div>
<app-custom-accordion [closeOthers]="true">
<ngb-panel [disabled]="panel.Tests.length === 0" *ngFor="let panel of testSelectionSession.FavoritesByCategory[category]"
id="{{panel.Id}}" [title] = "panel.Name">
<ng-template ngbPanelTitle>
<span class="test-length" style=""> {{ '(' + panel.Tests.length + ')'}}</span>
<div class="action-items">
<span class="icon-set" [ngClass]="{'same-day-2x': isSameDay(panel.Code), 'next-day-2x': isNextDay(panel.Code)}"></span>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" [name]="panel.Id + '-' + panel.Moniker" [ngModel]="checkAllTestsSelected(panel)"
(ngModelChange)="onPanelCheckboxUpdate($event, panel)" [id]="panel.Id + '-' + panel.Moniker">
<span class="custom-control-indicator"></span>
</label>
</div>
</ng-template>
</ngb-panel>
</app-custom-accordion>
I am trying to move this tag to left
<span class="test-length" style=""> {{ '(' + panel.Tests.length + ')'}}</span>
can someone help me regarding this issue?
The simplest solution will be including
'(' + panel.Tests.length + ')'
in the panel title:
<ngb-panel [disabled]="panel.Tests.length === 0" *ngFor="let panel of testSelectionSession.FavoritesByCategory[category]"
id="{{panel.Id}}" [title] = "panel.Name + '(' + panel.Tests.length + ')'">
The component seriously resembles a table, making contents of a separate column float left seems hard to achieve. Although I'm not familiar with ngb-panel.
Related
I am trying to make the headers of my AgGrid table have 2 lines: the first line is the name, the 2nd line is the unit. I want the 2nd line's font size to be smaller than the 1st one.
I've tried to search for this but could not find the answer. I found this blog about styling the header and followed this answer to make my headers be in 2 lines. But none of them shows how to show 2-line headers and style each line independently. Appreciate any help.
I did this in my Markdown Editor using a Custom Header and having each line as as separate div.
The code for my custom header is here: https://github.com/eviltester/grid-table-editor/blob/master/customHeader.js
The basic HTML for the header was:
this.eGui.innerHTML = `
<div class="customHeaderTop">
<div class="customFilterMenuButton">
<i class="ag-icon ag-icon-filter"></i>
</div>
<div class="customHeaderLabel">${this.agParams.displayName}</div>
</div>
<div class="headerbuttons">
<span title="add left">[<+]</span>
<span title="rename">[~]</span>
<span title="delete">[x]</span>
<span title="duplicate">[+=]</span>
<span title="add right">[+>]</span>
</div>
`;
Custom Header Components are described here:
https://www.ag-grid.com/javascript-data-grid/component-header/
It is also possible to add a header template if rendering requirements are simple.
This is covered in the AG Grid Blog post https://blog.ag-grid.com/adding-hyperlinks-to-the-grid/
{
minWidth: 150,
field: 'athlete',
headerComponentParams: {
template:
'<div class="ag-cell-label-container" role="presentation">' +
' <span ref="eMenu" class="ag-header-icon ag-header-cell-menu-button"></span>' +
' <div ref="eLabel" class="ag-header-cell-label" role="presentation">' +
' <span ref="eSortOrder" class="ag-header-icon ag-sort-order" ></span>' +
' <span ref="eSortAsc" class="ag-header-icon ag-sort-ascending-icon" ></span>' +
' <span ref="eSortDesc" class="ag-header-icon ag-sort-descending-icon" ></span>' +
' <span ref="eSortNone" class="ag-header-icon ag-sort-none-icon" ></span>' +
' <span ref="eText" class="ag-header-cell-text" role="columnheader"></span>' +
' <span ref="eFilter" class="ag-header-icon ag-filter-icon"></span>' +
' </div>' +
'</div>'
},
}
Hey I have this panel which is consist of name and checkbox
what I want is when the checkbox is checked the background color of each panel should change and should stay there when the checkbox is checked.
I tried everything even ngClass but it changes the color but when I go back and come back to the panel the color is back to the way it is white
How can I do that?
my parent html
<section class="others">
<div class="sub-header">Others</div>
<p class="text-center">{{testText}}</p>
<app-custom-accordion [closeOthers]="true">
<ngb-panel [disabled]="true" *ngFor="let testPanel of otherTests" id="{{testPanel.Id}}" [title]="testPanel.Name">
<ng-template ngbPanelTitle>
<div class="action-items">
<span class="material-icons fav" [class.favorited]="testPanel.Favorite"
(click)="onFavoriteClick(testPanel)"></span>
<span class="icon-set"
[ngClass]="{'same-day-2x': isSameDay(testPanel.Code), 'next-day-2x': isNextDay(testPanel.Code)}"></span>
<label class="custom-control custom-checkbox">
<input
type="checkbox"
class="custom-control-input"
[name]="testPanel.Id + '-' + testPanel.Moniker"
[ngModel]="panelIds.indexOf(testPanel.Id) > -1"
(ngModelChange)="onPanelCheckboxUpdate($event, testPanel)"
[id]="testPanel.Id + '-' + testPanel.Moniker">
<span class="custom-control-indicator"></span>
</label>
</div>
</ng-template>
</ngb-panel>
child component app custom accordion
<div class="card">
<ng-template ngFor let-panel [ngForOf]="panels">
<div role="tab" id="{{panel.id}}-header" [class]="'card-header ' + (panel.type ? 'card-' + panel.type: type ? 'card-' + type : '')"
[class.active]="isOpen(panel.id)">
<a href (click)="!!toggle(panel.id)" [attr.tabindex]="(panel.disabled ? '-1' : null)" [attr.aria-expanded]="isOpen(panel.id)"
[attr.aria-controls]="(isOpen(panel.id) ? panel.id : null)" [attr.aria-disabled]="panel.disabled">{{panel.title}}</a>
<ng-template [ngTemplateOutlet]="panel.titleTpl?.templateRef"></ng-template>
<!-- expansion arrows -->
<div *ngIf="arrowExpand" (click)="toggle(panel.id)" [attr.aria-expanded]="isOpen(panel.id)">
<span class="material-icons expand"></span>
</div>
</div>
<div id="{{panel.id}}" role="tabpanel" [attr.aria-labelledby]="panel.id + '-header'" class="card-block" *ngIf="isOpen(panel.id) && panel.contentTpl">
<ng-template [ngTemplateOutlet]="panel.contentTpl?.templateRef"></ng-template>
</div>
I tried ngClass. for the time being it changes the color but I come back color goes back to default white.
Can anyone help?
Thanks
I am having a hard time figuring this one out.
I'm using Vue.js and I'm trying to create some sort of a dashboard where a user would be able to upload up to five images of visitors that are allowed to use some service that said user is providing.
Here is the code:
<div class="row" v-for="(n, i) in 5" :key="n">
<div :id="'popover' + visitor.id + '-' + i" variant="primary">
<div class="card visitor-image">
<b-popover :target="'popover' + visitor.id + '-' + i" triggers="click focus">
<template slot="title">Edit image</template>
<button
v-if="checkImage(i)"
class="btn btn-danger image-btns"
#click="deleteImage(visitor.id, visitor.Photos[i].id)"
>Delete</button>
<p
v-if="uploadProgress < 100 && uploadProgress > 0"
class="progress-text"
>Upload progress: {{ uploadProgress }}%</p>
<label
v-if="!checkImage(i)"
:for="'image-input' + visitor.id + '-' + i"
class="btn btn-primary image-btns"
>Upload</label>
<input
class="profile-image"
:id="'image-input' + visitor.id + '-' + i"
type="file"
:ref="'fileInput' + visitor.id + '-' + i"
style="display: none"
accept="image/gif, image/jpeg, image/png"
placeholder="Upload"
#change="selectFile($event, visitor.id, 'fileInput' + visitor.id + '-' + i)"
>
</b-popover>
<img
class="card-img-top profile-image"
v-if="checkImage(i)"
:src="getImage(i)"
:id="visitor.Photos[i].id"
>
<img class="card-img-top avatar-image" v-else src="../assets/avatar.png">
</div>
</div>
</div>
None of the functions are important here, the only thing that matters is this "v-for" loop I'm using.
As you can see, I'm iterating through all the visitors and their images and I'm binding a key for each one.
What I want to know is, how do I use that key so that once I click on one of the avatar images and upload a photo, that same photo is upload in that exact div?
Right now, wherever I click one of the five divs to upload an image, it will be displayed on the first div even if I click on the last div in the list.
Thanks
I have created the codepen for file upload inside the v-for loop. I have used splice for adding an image at a particular index. Please refer the following codepen for more detail.
codepen - https://codepen.io/anon/pen/XGYoyr
how can i make the whole row clickable and also when how to change the row color when i click the checkbox?
here is my html file
<section class="others">
<div class="sub-header">Others</div>
<p class="text-center" *ngIf="otherTests.length === 0">No Tests Available</p>
<app-custom-accordion [closeOthers]="true">
<ngb-panel [disabled]="true" *ngFor="let testPanel of otherTests" id=". {{testPanel.Id}}" [title]="testPanel.Name">
<ng-template ngbPanelTitle>
<div class="action-items">
<span class="material-icons fav" [class.favorited]="testPanel.Favorite" (click)="onFavoriteClick(testPanel)"></span>
<span class="icon-set" [ngClass]="{'same-day-2x': isSameDay(testPanel.Code), 'next-day-2x': isNextDay(testPanel.Code)}"></span>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" [name]="testPanel.Id + '-' + testPanel.Moniker" [ngModel]="panelIds.indexOf(testPanel.Id) > -1"
(ngModelChange)="onPanelCheckboxUpdate($event, testPanel)" [id]="testPanel.Id + '-' + testPanel.Moniker">
<span class="custom-control-indicator"></span>
</label>
</div>
</ng-template>
</ngb-panel>
here is my Ts file for checkbox change
onPanelCheckboxUpdate($event: boolean, panel: TestOrderPanel) {
let testPanelIds = panel.Tests.map(test => test.Id);
// Wipe any duplicates
this.panelIds = this.panelIds.filter(
panelId => panel.Id !== panelId && testPanelIds.indexOf(panelId) === -1
);
this.selectedPanels = this.selectedPanels.filter(
selectedPanel =>
panel.Id !== selectedPanel.Id &&
testPanelIds.indexOf(selectedPanel.Id) === -1
);
if ($event) {
this.panelIds.push(panel.Id);
this.selectedPanels.push(panel);
}
this.updateSession();
}
this is my app-custom-accordion component
<div class="card">
<ng-template ngFor let-panel [ngForOf]="panels">
<div role="tab" id="{{panel.id}}-header" [class]="'card-header ' +
(panel.type ? 'card-' + panel.type: type ? 'card-' + type : '')"
[class.active]="isOpen(panel.id)">
<a href (click)="!!toggle(panel.id)" [attr.tabindex]=" .
(panel.disabled
? '-1' : null)" [attr.aria-expanded]="isOpen(panel.id)"
[attr.aria-controls]="(isOpen(panel.id) ? panel.id : null)"
[attr.aria-disabled]="panel.disabled">{{panel.title}}</a>
<ng-template [ngTemplateOutlet]="panel.titleTpl?.templateRef"></ng-
template>
<!-- expansion arrows -->
<div *ngIf="arrowExpand" (click)="toggle(panel.id)" [attr.aria-
expanded]="isOpen(panel.id)">
<span class="material-icons expand"></span>
</div>
</div>
<div id="{{panel.id}}" role="tabpanel" [attr.aria-labelledby]="panel.id + '-header'" class="card-block" *ngIf="isOpen(panel.id) && panel.contentTpl">
<ng-template [ngTemplateOutlet]="panel.contentTpl?.templateRef"></ng-template>
</div>
</ng-template>
</div>
how to change the color of whole row when click on checkbox
like when checkbox is selected the whole row should be dark or whatever and when unchecked should go to previous color i.e white
can anyone help? thanks
Angular's ngStyle and NgClass directives can be used for what you're looking for. You'll need to store the state of the checkbox in a variable somewhere that the relevant rows can reach, and then you could do something like this:
<some-element [ngClass]="{'class-wanted-when-checked' : checkboxIsChecked}">...</some-element>
or this:
<some-element [ngStyle]="{'background-color': checkboxIsChecked ? "blue" : "white"}">...</some-element>
I agree with #Tyler but it colors all the rows, for coloring specific rows we need to do the following (Thanks to #Tyler I am using some of his code):
<tr *ngFor="let task of tasks" [ngStyle]="{'background-color': task.complete ? 'lightgreen' : 'white'}">
<td>
<input type="checkbox" (change)="task.complete=!task.complete">
</td>
</tr>
where task.complete is simply a boolean stored as variable.
I tried everything but cannot get the desired answer.
How can i make the whole row clickable and also how to change the row color when i click the checkbox?
Here is my html file which i have tried
<section class="others" >
<div class="sub-header">Others</div>
<p class="text-center" *ngIf="otherTests.length === 0">No Tests Available</p>
<app-custom-accordion [closeOthers]="true">
<ngb-panel [disabled]="true" *ngFor="let testPanel of otherTests let i = index;" id="{{testPanel.Id}}" [title]="testPanel.Name">
<ng-template ngbPanelTitle>
<div class="action-items" [ngStyle]="{'background-color': i.checked == true? '#00B7A8' : 'white'}">
<span class="material-icons fav" [ngStyle]="{'background-color': i.checked == true? '#00B7A8' : 'white'}" [class.favorited]="testPanel.Favorite" (click)="onFavoriteClick(testPanel)"></span>
<span class="icon-set" [ngClass]="{'same-day-2x': isSameDay(testPanel.Code), 'next-day-2x': isNextDay(testPanel.Code)}"></span>
<label class="custom-control custom-checkbox">
<input #i
type="checkbox"
class="custom-control-input"
[name]="testPanel.Id + '-' + testPanel.Moniker"
[ngModel]="panelIds.indexOf(testPanel.Id) > -1"
(ngModelChange)="onPanelCheckboxUpdate($event, testPanel)"
[id]="testPanel.Id + '-' + testPanel.Moniker">
<span class="custom-control-indicator"></span>
</label>
</div>
</ng-template>
</ngb-panel>
</app-custom-accordion>
</section>
and what i am getting from this
Here is my Ts file for checkbox change
onPanelCheckboxUpdate($event: boolean, panel: TestOrderPanel) {
this.checked = $event
let testPanelIds = panel.Tests.map(test => test.Id);
// Wipe any duplicates
this.panelIds = this.panelIds.filter(
panelId => panel.Id !== panelId && testPanelIds.indexOf(panelId) === -1
);
this.selectedPanels = this.selectedPanels.filter(
selectedPanel =>
panel.Id !== selectedPanel.Id &&
testPanelIds.indexOf(selectedPanel.Id) === -1
);
if ($event) {
this.panelIds.push(panel.Id);
this.selectedPanels.push(panel);
}
this.updateSession();
}
This is my app-custom-accordion component
<div class="card">
<ng-template ngFor let-panel [ngForOf]="panels">
<div role="tab" id="{{panel.id}}-header" [class]="'card-header ' +
(panel.type ? 'card-' + panel.type: type ? 'card-' + type : '')"
[class.active]="isOpen(panel.id)">
<a href (click)="!!toggle(panel.id)" [attr.tabindex]=" .
(panel.disabled
? '-1' : null)" [attr.aria-expanded]="isOpen(panel.id)"
[attr.aria-controls]="(isOpen(panel.id) ? panel.id : null)"
[attr.aria-disabled]="panel.disabled">{{panel.title}}</a>
<ng-template [ngTemplateOutlet]="panel.titleTpl?.templateRef"></ng-
template>
<!-- expansion arrows -->
<div *ngIf="arrowExpand" (click)="toggle(panel.id)" [attr.aria-
expanded]="isOpen(panel.id)">
<span class="material-icons expand"></span>
</div>
</div>
<div id="{{panel.id}}" role="tabpanel" [attr.aria-labelledby]="panel.id + '-header'" class="card-block" *ngIf="isOpen(panel.id) && panel.contentTpl">
<ng-template [ngTemplateOutlet]="panel.contentTpl?.templateRef"></ng-template>
</div>
</ng-template>
</div>
How to change the color of whole row when click on checkbox
like when checkbox is selected the whole row should be dark or whatever and when unchecked should go to previous color i.e white
can anyone help? thanks
<div class="action-items" [ngStyle]="{'background-color': i.checked == true? '#00B7A8' : 'white'}">
i is an index number defined by:
<ngb-panel ... *ngFor="let testPanel of otherTests let i = index;" ...>
So i.checked is undefined making i.checked == true always false.
You haven't shown what testPanel or otherTests are, but I assume the code you want is more like:
[ngStyle]="{'background-color': testPanel.checked? '#00B7A8' : 'white'}"
If this isn't your problem, please provide a working stackblitz example that shows the problem, or at least share all of your actual relevant code.