I m trying to align two tables side by side.It is coming but its combining both tables as below.How to seperate two tables
.scss
when i give margin left completely moving
.tablediv {
margin-top: 2.2vw;
float: left;
margin-left: 0vw;
overflow:auto;
}
.html
<div *ngFor="let Table of Global_TablePerCard[TablePerCardIndexCounter]">
<div class="tablediv">
<table class="tablesalign">
<thead class="tableheader">
<div *ngFor = "let Param of Table; let j=index">
<div *ngIf = "j == 0; else elsetag">
<th class="col" *ngFor="let value of Param">
{{value}}
</th>
</div>
<div>
<ng-template #elsetag>
<tr>
<td *ngFor="let value of Param">
{{value}}
</td>
</tr>
</ng-template>
</div>
</div>
</thead>
</table>
</div>
</div>
It's working fine with padding.
padding: 2px 4px 2px 4px;
Related
I am building a To-Do application, and want to remove a row when I click the button.
This is my table HTML:
<table *ngFor="let todo of todos; let i = index;" class="todo {{(todo.completed ? 'done' : '')}}" >
<!-- Position Column -->
<td style="width: 10%;text-align: left;">{{i+1}}</td>
<!-- Name Column -->
<td style="width: 80%;text-align: left;" (dblclick)="toggleDone(i)">{{todos[i].content}}</td>
<!-- Weight Column -->
<td style="width: 10%;text-align: left;">
<button class="delete" mat-raised-button color="warn" (click)="deleteTodo(i)">Sil</button>
</td>
</table>
This is my deleteTodo method. I get the console message with the right index but it won't delete from the table:
deleteTodo(id:number){
this.todos=this.todos.splice(id,1);
console.log(id +"silindi");
Here are the changes you need to do:
CSS - Use classes instead of placing all the styles on the elements:
.position {
width: 10%;
text-align: left;
}
.name {
width: 80%;
text-align: left;
}
.weight {
width: 10%;
text-align: left;
}
HTML:
<table>
<!-- The ngFor should be on the tr (table row) element, not the table element. Same goes for the "todo" and "done" classes -->
<tr *ngFor="let todo of todos; let i = index;" class="todo" [class.done]="todo.completed">
<td class="position">{{i+1}}</td>
<!-- Use todo instead of todos[i] -->
<td class="name" (dblclick)="toggleDone(i)">{{todo.content}}</td>
<td class="weight">
<button class="delete" mat-raised-button color="warn" (click)="deleteTodo(i)">Sil</button>
</td>
</tr>
</table>
TypeScript in your component:
deleteTodo(id: number) {
this.todos.splice(id, 1);
this.todos = [...this.todos];
console.log(id +"silindi");
}
Try this change:
deleteTodo(id:number){
const deletedElemnt = this.todos.splice(id,1);
console.log(id +"silindi");
console.log("deleted row: ", deletedElemnt );
console.log("todos list: ", this.todos );
}
The this.todos.splice(id,1) operation was deleting the desired row, but at the same time was returning the deleted element.
You were assigning that returned element to your whole list of todos, so finally your 'todos' list were just 1 row, the deleted element.
I am working on a project which requires me to make table using *ngFor directive of Angular. But after several failed attempts I couldn't get the table layout properly . The table cells don't match up with headings and the width of table rows is also not consistent as you can see in the pic . I'm new to Angular and also don't have much experience in debugging css. I think the problem is due to *ngFor directive. Here is the HTML and CSS code snippet. There is *ngIf condition on each td as the table should show the data in a row only when the user clicks it. I'll be very thankful for any help or guidance given.
* {
color: hsla(210, 100%, 100%, 0.9) !important;
background: hsla(210, 100%, 50%, 0.5) !important;
outline: solid 0.25rem hsla(210, 100%, 100%, 0.5) !important;
}
.border {
border: 1px solid #cecece;
}
.heading {
width: 100%;
float: left;
}
th {
background-color: #4CAF50;
color: white;
width: 100px;
}
table {
width: 100%;
}
#container {
width: 98.7%;
height: 300px;
overflow-x: scroll;
overflow-y: scroll;
position: fixed;
}
td {
width: 100px;
}
<table class="table table-bordered table-hover">
<thead class="thead-dark">
<tr>
<th class="text-center">registrationNo</th>
<!--adding heading to criterias using *ngFor -->
<div formArrayName="participants" *ngFor="let candidate of myForm.controls.participants['controls'];let i = index;">
<div [formGroupName]="i">
<div formArrayName="criteriaArray" class="d-inline-block" *ngFor="let criteria of candidate.get('criteriaArray').controls;let j = index;">
<div [formGroupName]="j">
<th *ngIf="(i === 0) && (EditRowId2 !== criteria.get('id').value)" class="text-center" style="width: 100%" (click)="Edit2(criteria.get('id').value)">{{criteria.get('criteriaName').value}}</th>
<th *ngIf="(i === 0) && (EditRowId2 === criteria.get('id').value)" class="text-center" style="width: 100%"><input type="text" formControlName="criteriaName"></th>
</div>
</div>
</div>
</div>
</tr>
</thead>
<tbody>
<tr>
<td>Maximum Marks</td>
<!--adding maximum marks row to the table using *ngFor -->
<div (click)="Edit(0)" formArrayName="participants" *ngFor="let candidate of myForm.controls.participants['controls'];let i = index;">
<div [formGroupName]="i">
<div formArrayName="criteriaArray" class="d-inline-block" *ngFor="let criteria of candidate.get('criteriaArray').controls;let j = index;">
<div [formGroupName]="j">
<td *ngIf="(i === 0) && (EditRowId2 !== criteria.get('id').value)" (click)="Edit2(criteria.get('id').value)">{{criteria.get('max_marks').value}}</td>
<td *ngIf="(EditRowId2 === criteria.get('id').value) && (i===0)"> <input type="number" formControlName="max_marks"> </td>
</div>
</div>
</div>
</div>
</tr>
<div formArrayName="participants" *ngFor="let candidate of myForm.controls.participants['controls'];let i = index;" (click)=Edit2(0)>
<div [formGroupName]="i">
<tr>
<td> {{candidate.get('registrationNo').value}} </td>
<div formArrayName="criteriaArray" class="d-inline-block" *ngFor="let criteria of candidate.get('criteriaArray').controls;let j = index;">
<div [formGroupName]="j">
<td *ngIf="EditRowId === candidate.get('id').value"> <input [class.is-invalid]="criteria.errors?.notValid" type="number" formControlName="marks" (click)="changeButtonColor(i)"> </td>
<td [class.is-invalid]="criteria.errors?.notValid" *ngIf="EditRowId !== candidate.get('id').value" (click)="Edit(candidate.get('id').value)">-----</td>
<small *ngIf="criteria.errors?.notValid" class="text-danger">Invalid marks</small>
</div>
</div>
<button *ngIf="candidate.get('dataSaveCheck').value === true" type="button" value="candidate.get('id').value" class="btn btn-primary btn-sm m-2" (click)="saveCandidateForm(candidate , i )" [disabled]='!userForm.form.valid'>save</button>
<button *ngIf="candidate.get('dataSaveCheck').value === false" type="button" value="candidate.get('id').value" class="btn btn-danger btn-sm m-2" (click)="saveCandidateForm(candidate , i )" [disabled]='!userForm.form.valid'>save</button>
</tr>
</div>
</div>
</tbody>
</table>
I have a Bootstrap table using table-hover and everything works properly .table-hover enables a hover state on table rows within a <tbody>. I also have this method:
listClick(event, newValue) {
this.UploaderService.getFileName(newValue[1])
}
which sets name of the file from the specified row and then other methods from
UploaderService uses this variable to execute specified operations like deleting, uploading etc.
My problem is that everything works fine, unfortunately the line being clicked is not highlighted so the user is not completely aware of the selected row. I would like to leave this line highlighted at the moment of clicking a specific action on this object, such as deleting etc.
Furthermore I would like to have a possibility to select multiple rows using combination for instance of mouse clicking + cmd in case of mac os. Any ideas how can I do this?
<div style="display: block;" class="table-div content table-responsive table-full-width" >
<table class="Table table table-hover">
<div>
<thead >
<tr >
<th style="width: 20vw; min-width: 150px; text-align: left " *ngFor="let cell of this.UploaderService.tableData2.headerRow">{{ cell }}</th>
</tr>
</thead>
</div>
<tbody style=" overflow:auto; height:60vh; margin-bottom:1vh; display: block; left: 0vw; right: 0vw">
<tr *ngFor="let item of this.UploaderService.uploader.queue">
<td><button type="button" (click)="item.remove()">Cancel</button>
<div class="progress">
<div class="progress-bar bg-success"
[ngStyle]="{'width':item.progress+'%'}"></div>
</div>
</td>
<td>
<div >{{item.file.name}}</div>
</td>
<td>
<div >{{item.file.size}}</div>
</td>
<td>
<div >{{item.file.type}}</div>
</td>
<td>
<div >{{item.file.lastModifiedDate}}</div>
</td>
<tr *ngFor="let row of this.UploaderService.tableData2.dataRows">
<td [ngClass]="{'active': selectedItem == cell}" (click)="listClick($event, row)" (dblclick)="listDoubleClick($event, row)" style="cursor: pointer; width: 20vw; min-width: 150px; text-align: left" *ngFor="let cell of dateFormat(row)">{{cell}}</td>
</tr>
</tbody>
</table>
</div>
I try like this:
ts:
listClick(event, row) {
row.isSelected = !row.isSelected;
this.UploaderService.getFileName(row[1])
}
html:
<tr *ngFor="let row of this.UploaderService.tableData2.dataRows">
<td [ngClass]="{'active': row.isSelected}" (click)="listClick($event, row)" (dblclick)="listDoubleClick($event, row)" style="cursor: pointer; width: 20vw; min-width: 150px; text-align: left" *ngFor="let cell of dateFormat(row)">{{cell}}</td>
</tr>
A simple way is just to add one attribute like:
isSelected: boolean to you dataRows when one or more of them is selected;
listClick(event, newValue, cell) {
cell.isSelected = !cell.isSelected;
this.UploaderService.getFileName(newValue[1])
}
but i highly recommend you to use this excellent data table in angular
ngxDataTable
hope it help.
In bootstrap 5 you need to use bootstrap class "table-active".
html:
<tr [class.table-active]="i == currentRowIndex" *ngFor="let row of this.UploaderService.tableData2.dataRows; let i = index" (click)="onRowClick(i)">
ts:
currentRowIndex: number = -1;
onRowClick(index: number) {
this.currentRowIndex = index;
}
This has been bugging me a lot and when I try to google anything related to the subject, all I get is Stack Overflow questions about vertical-align not working on divs or similar elements.
I have this HTML table where as you can see, I set the style of each td to vertical-align:middle through an HTML inline style attribute:
<div ng-hide="getShoppingCart().length===0" class="col-md-10 col-md-offset-1">
<table class="table table-striped">
<tr>
<th class="col-md-2"></th>
<th class="col-md-3">Name</th>
<th class="col-md-2">Size</th>
<th class="col-md-2">Price</th>
<th class="col-md-2">Quantity</th>
<th class="col-md-1"></th>
</tr>
<tr ng-repeat="article in getShoppingCart()" style="height:120px;">
<!-- Image -->
<td class="col-md-2" align="center" style="vertical-align:middle;">
<img ng-src="{{article.media.images[0].smallHdUrl}}" class="img-responsive" style="height:120px;" >
</td>
<!-- Name -->
<td class="col-md-3" style="vertical-align:middle;">
<p>{{ article.name }}</p>
</td>
<!-- Size -->
<td class="col-md-2" style="vertical-align:middle;">
<p>{{ article.unit.size }}</p>
</td>
<!-- Price -->
<td class="col-md-2" style="vertical-align:middle;">
<p>£ {{ getTotalPriceForArticle($index) | number : 2 }}</p>
</td>
<!-- Quantity -->
<td class="col-md-2" style="vertical-align:middle;">
<button class="btn minusButtons" ng-click="decrementQuantity(article, $index)">–</button>
<input type="number" class="form-control" style="position:relative;top:2px;width:4vw;display:inline-block;" ng-model="getQuantities()[$index]"/>
<button class="btn plusButtons" ng-click="incrementQuantity(article, $index)">+</button>
</td>
<td class="col-md-1" align="left" style="vertical-align:middle;">
<button ng-click="removeArticleAtIndex($index)" class="btn redButtons" style="margin-left:0;">
<span class="glyphicon glyphicon-trash"></span>
</button>
</td>
</tr>
</table>
<div class="col-md-12" style="font-size:2vw; text-align:right;">
Total Price: £ {{ getTotalPrice() | number : 2 }}
</div>
So naturally I thought I could remove all of these inline styles and add this global rule in my external CSS file:
td {
vertical-align: middle;
}
But when I do that, the contents of the table's cells stop being aligned to the middle. I'm sure that the CSS file is properly linked as other elements are clearly affected by it. Also I checked the rest of the CSS and there are no other rules with higher priority overriding this property for this table. Any ideas?
Note: As you can probably figure out from the code, I'm using AngularJS and the table rows are being generated using ng-repeat, in case it could have something to do with the problem.
It's due to bootstrap overriding this with a higher specificity. This is what I see in the chrome developer console for td's:
.table>tbody>tr>td {
padding: 8px;
line-height: 1.42857143;
vertical-align: top;
border-top: 1px solid #ddd;
}
I would recommend doing something like the following:
.table.td-vertical-center>tbody>tr>td {
vertical-align: middle;
}
Then in your table element you can do this:
<table class="table table-striped td-vertical-center">
This will allow you to wrap this style in a custom class that will not override bootstrap by default, as well as give it enough specificity to update the table cells.
You can see a working example of a bootply here
Try this
td, th {
vertical-align: middle !important;
}
I am creating a table in html and it needs to be scrollable. So I changed the display to block and made overflow-y scroll. When I do this it makes the columns header not spaced out so there is a lot of excess space. I know the display block setting is what causes this, but I need to make it scrollable. how do I set this in css and html?
table {
margin-bottom: 40px;
width: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
height: 250px !important;
overflow-y: scroll;
display: block;
}
<table>
<thead>
<tr class="rowTable header">
<th class="cell">Date Submitted</th>
<th class="cell">Bounty Name</th>
<th class="cell">Company</th>
<th class="cell">Paid</th>
<th class="cell">Details</th>
<th class="cell">Response</th>
</tr>
</thead>
<tbody>
{% for report in recentReports %}
<tr class="rowTable">
<td class="cell">{{report.date}}</td>
<td class="cell"><a href="/_hunter/bounty/{{report.bountyID}}">{{report.name}}</td>
<td class="cell">{{report.company}}</td>
<td class="cell">{{report.amountPaid}}</td>
<td class="cell">
<button type="button" class="detailsButton" data-toggle="modal"
data-target="#detailsModal" data-whatever="#getbootstrap"
data-ID={{report.reportID}}>
View
</button>
</td>
<td class="cell">
<button type="button" class="messageButton" data-toggle="modal"
data-target="#messageModal" data-whatever="#getbootstrap"
data-ID={{report.reportID}}>
View
</button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
Here is a photo of what happens. I think its clear to see that what i want is the columns take take up the entire table evenly. The image is of just the table, not the entire webpage.
You need to do what #Johannes suggests:
<div id="wrapper">
<!-- put your table here-->
</div>
Change your Css to:
#wrapper {
margin-bottom: 40px;
width: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
height: 250px !important;
overflow-y: scroll;
display: block;
}
table{
width:100%
}
And you are done. If you find this answer useful, please up vote #Johannes answer. And if you feel Happy up vote mine to.
See example:
https://jsfiddle.net/ex239ck6/
put the table in a DIV that has the settings your table has now (i.e. height and overflow), and let the table be a table...