I want to hide overflow text in a DataTable cell primeNg, but nothing seems to work.
I didn't find anything on their documentation that could help me.
<p-dataTable #dataTable
tableStyleClass="defaultDataTable"
[value]="rows | async"
resizableColumns="false"
reorderableColumns="true"
responsive="true"
[rowHover]="true"
[(selection)]="selectedRows"
[rowStyleClass]="getRowClass"
[loading] = "loading"
(onRowClick)="onSelect($event)"
(onRowSelect)="onSelect($event)"
(onRowUnselect)="onSelect($event)"
(onRowDblclick)="onRowDblclick($event)"
(onHeaderCheckboxToggle)="checkAll($event)">
<p-footer class="table-footer p-text-muted" *ngIf="showFooter">
<ng-container i18n> {{footerText}}: {{dataTable?.dataToRender?.length || 0}} </ng-container>
</p-footer>
<p-column *ngIf="hasCheckboxColumn == true" [field]="IsSelected" [header]="" selectionMode="multiple"
onclick="checkAll($event)" [sortable]="false" ></p-column>
<p-column *ngFor="let column of columns" [field]="column.prop" [style] = "{width: '20%'}" [header]="column.name" [hidden]="!column.visible" [sortable]="isLockColumn(column.name) == false" >
<ng-template let-col let-row="rowData" pTemplate="body">
<div *ngIf="isValueBoolean(row[col.field]); else renderValue" align="center" title=" ">
<md-checkbox [(ngModel)]="row[col.field]" (change)="lockColumnChecked($event, row)" style = "width:20%;text-overflow: ellipsis;" [disabled]="true"></md-checkbox>
</div>
<ng-template #renderValue style = "width:20%;text-overflow: ellipsis;"><span style = "width:20%;text-overflow: ellipsis;" [mdTooltip]="getTooltip(row, column)" mdTooltipPosition="before">{{row[col.field]}}</span></ng-template>
</ng-template>
<ng-template *ngIf="isLockColumn(column.name)" pTemplate="header">
<div class="lock-header">
<md-checkbox [(ngModel)]="headerSelectClicked" (click)="changeStateOfRows(headerSelectClicked, rows, 'IsLocked')" class="lock-header-checkbox"></md-checkbox>
<i class="fa fa-lock fa-1x" aria-hidden="true"></i>
</div>
</ng-template>
</p-column>
.ui-datatable-data> tr> td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 150px;
}
this is the final solution...Thank you guys !
Just add the style for white-space in p-column. that worked for me.
Related
I am using this carousal from ng-bootstrap :
<ngb-carousel [showNavigationArrows]="showNavigationArrows" [showNavigationIndicators]="showNavigationIndicators">
<ng-template ngbSlide>
<div class="picsum-img-wrapper">
<img src="assets\fsfhjllz_vegetables-banner.png" class="mh-100" style="width: 100%; height: 30vh; object-fit:cover;">
</div>
</ng-template>
<ng-template ngbSlide>
<div class="picsum-img-wrapper">
<img src="assets\vh9oeys6_fruit-banner.png" class="mh-100" style="width: 100%; height: 30vh; object-fit: cover;">
</div>
</ng-template>
</ngb-carousel>
And it shows this text on top of image like:: slide 1 of 2 .
How do I remove this text and only show image.
It is showing up as this when inspected in browser::
<div role="tabpanel" class="carousel-item" id="slide-ngb-slide-1">
<span class="sr-only"> Slide 2 of 2 </span> // this one
Here is the source code of this peace:
<span class="sr-only" i18n="Currently selected slide number read by screen reader##ngb.carousel.slide-number">
Slide {{i + 1}} of {{c}}
</span>
I see 2 possibilities to hide this text:
add the CSS to hide .carousel-inner .sr-only to hide this element, eg
.carousel-inner .sr-only {
display: none;
}
set the value of the translation key ngb.carousel.slide-number to an empty string. Guidelines on internatiolization.
i am trying to do a progression stepper as shown in this image
this is my code in css
.mat-step-header[aria-selected="true"] {
background-color: #07C496;
}
.mat-step-header[ng-reflect-active='true']{
background-color: #07C496;
}
html :
<mat-horizontal-stepper #stepper labelPosition="bottom" linear >
<ng-template matStepperIcon="edit" let-index="index"> {{index + 1}}
</ng-template>
<mat-step>
<ng-template matStepLabel>test</ng-template>
<div>
</mat-step>
<mat-step>
<ng-template matStepLabel>test</ng-template>
<div>
</mat-step>
<mat-step>
<ng-template matStepLabel>test</ng-template>
<div>
</mat-step>
<mat-step>
<ng-template matStepLabel>test</ng-template>
<div>
</mat-step>
</mat-horizontal-stepper>
this thing works in developement mode only and but doesn't work in prod mode cause ng-reflect-active doesnt exists in prod mode. can anyone help me to do this in css only pls.
You can simulate select all elements before behavior with the help of general sibling combinator (~) :
.mat-step-header {
background-color: #07C496 !important;
}
.mat-step-header[aria-selected="true"] ~ * {
background-color: transparent !important;
}
Stackblitz Example
I am using PrimeNG components in Angular 5 project. In my landing I have requirements like resize column and filters(pop up).
Pop up is showing correctly on table without using resize column class pResizableColumn. But when I use resize column class, pop up is limited to that header column only, rest of the part is hiding that because that pResizableColumn is using position relative.
I want to show pop up with column resize function, if any one know please help me out.
Below Images is the shows clearly.
Popu up showing proper
Pop up hiding when i use resize column
file.html
<div class="card-body" style="padding:0">
<div class="tab-content">
<div role="tabpanel" class="landing-table tab-pane active" id="all_cases">
<p-table (click)="hideFilterPopup()" (scroll)="hideFilterPopup()" #dt [columns]="cols" [value]="fetchCases" [totalRecords]="totalRecords"
[rows]="10" [(selection)]="selectedTableRow" [resizableColumns]="true" dataKey="ticketRef" (onRowSelect)="openDetailsAndView($event.data.ticketRef)"
[scrollable]="true" scrollHeight="350px" [style]="{width:'100%'}">
<ng-template pTemplate="colgroup" let-columns>
<colgroup>
<col style="width:30px">
<col style="width:150px">
<col *ngFor="let col of columns" style="width:150px">
</colgroup>
</ng-template>
<ng-template pTemplate="header" let-columns let-fetchCases>
<tr>
<th style="width:30px"></th>
<th id="case_reference" pResizableColumn>Ticket Reference
<span class="lnr lnr-funnel"></span>
<p-sortIcon [pSortableColumn]="fetchCases.ticketRef" [field]="fetchCases.ticketRef" ariaLabel="Activate to sort" ariaLabelDesc="Activate to sort in descending order"
ariaLabelAsc="Activate to sort in ascending order"></p-sortIcon>
</th>
<th *ngFor="let col of columns" pResizableColumn>
{{col.title}}
<p-sortIcon [pSortableColumn]="col.mapper" [field]="col.mapper" ariaLabel="Activate to sort" ariaLabelDesc="Activate to sort in descending order"
ariaLabelAsc="Activate to sort in ascending order"></p-sortIcon>
<div class="inlineFilters" [ngClass]="selectedFilter === col.title ? 'displayBlock' : 'displayNone'">
<div class="row marginZro">
<input class="col-sm-12 inlineInput" type="text" placeholder="Filter...">
<button class="col-sm-6 btn btn-stable">Search</button>
<button class="col-sm-6 btn btn-stable">Clear</button>
</div>
</div>
<span class="lnr lnr-funnel" (click)="opeenFilter(col.title)"></span>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-fetchCases let-columns="columns">
<tr [pSelectableRow]="fetchCases">
<td style="width:30px">
<p-tableCheckbox [value]="fetchCases"></p-tableCheckbox>
</td>
<td class="caseRefLink ui-resizable-column" (click)="openHandlingTab(fetchCases)">
<div class="extentedNotes" title="{{fetchCases.ticketRef}}">{{fetchCases.ticketRef}}</div>
</td>
<td *ngFor="let col of columns" class="ui-resizable-column">
<div class="extentedNotes" title="{{fetchCases[col.field]}}" [ngClass]="{'timeLeftCol':(col.mapper == 'timeLeft'),
'rag-status-green':(col.mapper == 'timeLeft' && fetchCases['rag'] == 'Green'),
'rag-status-red':(col.mapper == 'timeLeft' && fetchCases['rag'] == 'Red'),
'rag-status-yellow':(col.mapper == 'timeLeft' && fetchCases['rag'] == 'Amber')}">{{fetchCases[col.mapper]}}</div>
</td>
</tr>
</ng-template>
</p-table>
</div>
</div>
<p-paginator *ngIf="totalRecords > 10" [rows]="10" [totalRecords]="totalRecords" [first]="first" (onPageChange)="loadTicketDetailsLazy($event)"></p-paginator>
</div>
component.ts
opeenFilter(selectedFilter){
event.stopPropagation()
if(this.selectedFilter == selectedFilter) {
this.selectedFilter = "";
}else {
this.selectedFilter = selectedFilter;
}
}
hideFilterPopup(){
if(this.selectedFilter != ""){
this.selectedFilter = "";
}
}
style.css
.inlineFilters {
position: absolute;
z-index: 2;
padding: 5px;
background: #EFEFEF;
border-radius: 5px;
max-width: 15%;
}
.inlineFilters .inlineInput {
margin-bottom: 5px;
}
.inlineFilters button {
padding: 0 !important;
}
Change the position of the inlineFilters class and replace absolute with fixed :
.inlineFilters {
position: fixed;
z-index: 2;
padding: 5px;
background: #EFEFEF;
border-radius: 5px;
width: 188px;
}
I have created a form that adds input dynamically with an add and remove button. I would place them on the right
I can't click on remove button exept the lastet one
HTML file:
<mat-step [stepControl]="secondFormGroup">
<form [formGroup]="secondFormGroup">
<ng-template matStepLabel>Constituez votre équipe</ng-template>
<div formArrayName="pers" *ngFor="let control of secondFormGroup.controls.pers.controls; let i= index">
<mat-form-field>
<input matInput placeholder="Nom collaborateur #{{i+1}}" [formControl]="control.controls.name" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Poste" [formControl]="control.controls.poste" required>
</mat-form-field>
<button *ngIf="secondFormGroup.controls.pers.controls.length > 1" (click)="deleteItem()" mat-mini-fab color="warn" class="rightButton"><mat-icon >remove</mat-icon>
</button>
</div>
<div>{{secondFormGroup.value | json}}</div>
<button (click)="addItem()" mat-mini-fab color="primary" class="rightButton"><mat-icon >add</mat-icon>
</button>
</form>
</mat-step>
CSS file :
.rightButton {
position: relative;
float: right;
}
When I disable rightButton class on the remove button , I could click on all of the buttons without a problem but they are not right positioned as I want.
Try this
.rightButton {
position: relative;
z-index: 99;
float: right;
}
This will make the button to be on top of all the HTML elements on the form. The z-index property only works on positioned elements (absolute, relative, fixed, and sticky)
For me z-index didnt work.
There was something in front of that button that is not visible. Making the button as a separate row helped.
In Bootstrap 4 this is how I made it a separate row:
<div class="row block-section">
<a data-placement="top" class="btn btn-sm btn-danger"
href="#" onclick="deleteClicked('video1');return false;">Delete </a>
</div>
Then it started working on mobile device even with
float: right
I have a button in angular 4 material table cell that I'd like to appear only when hover on table row:
<md-cell *cdkCellDef="let row" contenteditable='false' >
<div *ngIf="!row.editorEnabled" >{{row.goalStatusName}}
<button md-icon-button><md-icon (click)="row.editorEnabled=true;" mdTooltip="Edit">mode_edit</md-icon></button>
</div>
</md-cell>
How do I achieve this?
Update:
Entire code:
<md-cell *cdkCellDef="let row" contenteditable='false' >
<div *ngIf="!row.editorEnabled" >{{row.goalStatusName}}
<button md-icon-button><md-icon (click)="row.editorEnabled=true;" class="editButton" mdTooltip="Edit">mode_edit</md-icon></button>
</div>
<div *ngIf="row.editorEnabled" >
<md-input-container><input mdInput [(ngModel)]="row.goalStatusName" #goalName></md-input-container>
<button md-icon-button>
<md-icon (click)="modifyGoal(row.goalStatusId,row.goalStatusName)" mdTooltip="Save" style="color:green;font:bold;" >done</md-icon>
</button>
<button md-icon-button>
<md-icon (click)="row.editorEnabled=false" mdTooltip="Cancel" style="color:red;font:bold;" >clear</md-icon>
</button>
</div>
</md-cell>
button{ display:none}
md-cell:hover{
button{
display:block
}
}
.editButton{ visibility: hidden}
md-cell:hover .editButton{
visibility: visible;
}
This worked!