I have implemented a dynamically generated html table in angular 7. I have also implemented a toggle mode that enables the user to toggle between edit and read-only mode. Clicking on edit makes the cells editable by showing the respective controls. Currently the problem that I am facing is that clicking on edit button is expanding the cell to a large extent. I need to have fixed width in either mode. At the moment if you see the CSS , I have set the min-width to the td and th to 250px. I tried width and max-width properties but not working.
Read only mode
Edit mode
html component
<style>
th,
td {
padding: 7px;
min-width: 250px;
}
.btn {}
.tableItem {
text-align: center;
border-left: solid 1px lightgrey;
border-top: solid 1px lightgrey;
border-right: solid 1px lightgrey;
border-bottom: solid 1px lightgrey;
}
.rowItem:hover {
background-color: #f5f7f7;
}
label {
margin-left: 0.5rem;
vertical-align: middle
}
.panel-heading {
color: white;
background-color: #F59850;
border-color: #ddd;
overflow: hidden;
padding-top: 5px !important;
padding-bottom: 5px !important;
}
.panel-heading .left-label {
display: inline-block;
padding-top: 5px !important;
}
.scrollClass {
overflow-x: scroll;
display: grid;
}
.panel-heading label {
margin-bottom: 0px !important;
}
</style>
<div>
<input type="checkbox" id="chk" style="width: 13px; height: 13px;" checked="checked"
(click)="isInvestedSelected($event)" />
<label for="chkInvested">Invested</label>
</div>
<div class="card scrollClass">
<div class="card-header panel-heading">
<span class="left-label" style="font-size: 18px; font-weight: bold; ">Legal Fund Classes</span>
<div class="pull-right" style="padding-right:10px; display: inline-block; vertical-align:middle">
<!-- <label style="text-align: center; vertical-align:middle" class="btn btn-default pull-right"> <i
data-bind="visible: true" class="fa fa-plus-square"></i><input type="checkbox" class="hidden" /> Add
Class</label> -->
<button style="text-align: center; vertical-align:middle" class="btn btn-default pull-right"
(click)="openFundClassModal()"> <i data-bind="visible: true" class="fa fa-plus-square"></i> Add
Class</button>
</div>
</div>
<div *ngIf="LegalFundClasses && LegalFundClasses.LegalFundClassDetailsViewModel && ColumnNames">
<table class="fundClassesTable table-striped">
<tr *ngFor="let c of ColumnNames">
<th class="tableItem bold"></th>
<ng-container *ngFor="let f of LegalFundClasses.LegalFundClassDetailsViewModel; let i=index">
<td class="tableItem" *ngIf="c == ColumnNames[0]"></td>
<td class="tableItem" *ngIf="c == ColumnNames[1]"></td>
<td class="tableItem" *ngIf="c == ColumnNames[2]"></td>
<td class="tableItem" *ngIf="c == ColumnNames[3]">COMMERCIAL TERMS</td>
<td class="tableItem" *ngIf="c == ColumnNames[4]">
<div *ngIf="EditMode[f.Id]">
<button type="button" class="btn btn-default btn" style="float: left;"
(click)="reviewClicked(f.Id,1)">Review Terms</button>
</div>
</td>
<td colspan="7" class="tableItem" *ngIf="c == ColumnNames[5] && i<1"></td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[6]" class="tableItem"> </td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[6]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.CurrencyId" [defaultItem]="defaultItem"
class="form-control form-control-sm" [data]="LegalFundClasses.Currencies"
[filterable]="false" textField="Name" [valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[7]" class="tableItem"> </td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[7]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.ManagerStrategyId"
[defaultItem]="defaultItem" class="form-control form-control-sm"
[data]="LegalFundClasses.ManagerStrategies" [filterable]="false" textField="Name"
[valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[8]" class="tableItem"> </td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[8]" class="tableItem">
<kendo-multiselect [data]="LegalFundClasses.Currencies" style="width:100%; height: 29.5px;" [(ngModel)]="f.OtherCurrencyName" [textField]="'Name'"
[valueField]="'Id'" [autoClose]="false">
<ng-template kendoMultiSelectItemTemplate let-dataItem>
<input type="checkbox" class="k-checkbox" [checked]="isItemSelected(dataItem.Name)">
<label class="k-checkbox-label"></label>
</ng-template>
</kendo-multiselect>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[9]" class="tableItem"> </td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[9]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.SubVotingId" [defaultItem]="defaultItem"
class="form-control form-control-sm" [data]="LegalFundClasses.LiqVoting"
[filterable]="false" textField="Name" [valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[10]" class="tableItem"> </td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[10]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.SubHotIssueId" [defaultItem]="defaultItem"
class="form-control form-control-sm" [data]="LegalFundClasses.LiqHotIssue"
[filterable]="false" textField="Name" [valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td colspan="7" class="tableItem" *ngIf="c == ColumnNames[11] && i<1" ></td>
<td colspan="7" class="tableItem" *ngIf="c == ColumnNames[12] && i<1"></td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[13]" class="tableItem"></td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[13]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.RedsFrqncyId" [defaultItem]="defaultItem"
class="form-control form-control-sm" [data]="LegalFundClasses.LiqRedsFrequency"
[filterable]="false" textField="Name" [valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[14]" class="tableItem"></td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[14]" class="tableItem" style="width:100%">
<!-- <input kendoTextBox [(ngModel)]="f.RedsNoticeDays" style="width: 100%; height: 29.5px;" > -->
<kendo-numerictextbox [(ngModel)]="f.RedsNoticeDays" style="width: 100%; height: 29.5px;"></kendo-numerictextbox>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[15]" class="tableItem"></td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[15]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.NoticeTypeOfDaysId"
[defaultItem]="defaultItem" class="form-control form-control-sm"
[data]="LegalFundClasses.LiqTypeOfDays" [filterable]="false" textField="Name"
[valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td colspan="7" class="tableItem" *ngIf="c == ColumnNames[16] && i<1"></td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[17]" class="tableItem"></td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[17]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.LockupTypeId" [defaultItem]="defaultItem"
class="form-control form-control-sm" [data]="LegalFundClasses.LiqLockupType"
[filterable]="false" textField="Name" [valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[18]" class="tableItem"></td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[18]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.HardDurationMonthsId"
[defaultItem]="defaultItem" class="form-control form-control-sm"
[data]="LegalFundClasses.LiqDurationMonths" [filterable]="false" textField="Name"
[valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[19]" class="tableItem"></td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[19]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.SoftDurationMonthsId"
[defaultItem]="defaultItem" class="form-control form-control-sm"
[data]="LegalFundClasses.LiqDurationMonths" [filterable]="false" textField="Name"
[valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[20]" class="tableItem"></td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[20]" class="tableItem" style="width:100%">
<kendo-numerictextbox [(ngModel)]="f.LockupFees0To12Pct" style="width: 100%; height: 29.5px;"></kendo-numerictextbox>
<!-- <input kendoTextBox [(ngModel)]="f.LockupFees0To12Pct" style="width: 100%; height: 29.5px;" /> -->
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[21]" class="tableItem"></td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[21]" class="tableItem" style="width:100%">
<kendo-numerictextbox [(ngModel)]="f.LockupFees12To24Pct" style="width: 100%; height: 29.5px;"></kendo-numerictextbox>
<!-- <input kendoTextBox [(ngModel)]="f.LockupFees12To24Pct" style="width: 100%; height: 29.5px;" /> -->
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[22]" class="tableItem"></td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[22]" class="tableItem" style="width:100%">
<kendo-numerictextbox [(ngModel)]="f.LockupFees24To36Pct" style="width: 100%; height: 29.5px;"></kendo-numerictextbox>
<!-- <input kendoTextBox [(ngModel)]="f.LockupFees24To36Pct" style="width: 100%; height: 29.5px;" /> -->
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[23]" class="tableItem"></td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[23]" class="tableItem" style="width:100%">
<kendo-numerictextbox [(ngModel)]="f.WebfolioRedsFee" style="width: 100%; height: 29.5px;"></kendo-numerictextbox>
<!-- <input kendoTextBox [(ngModel)]="f.WebfolioRedsFee" style="width:100%; height: 29.5px;" /> -->
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[24]" class="tableItem"></td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[24]" class="tableItem" style="width:100%">
<input kendoTextBox [(ngModel)]="f.LockupComments" style="width: 100%; height: 29.5px;" />
</td>
<td colspan="7" class="tableItem" *ngIf="c == ColumnNames[25] && i<1"></td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[26]" class="tableItem">
</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[26]" class="tableItem">
<label style="font-size: 13px;font-weight: normal;cursor: pointer">
<input type="checkbox" value=""
style="width: 13px; height: 13px;" /> Yes </label>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[27]" class="tableItem"></td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[27]" class="tableItem"><input kendoTextBox [(ngModel)]="f.GateInvestorPct"
style="width: 100%; height: 29.5px;" /></td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[28]" class="tableItem"></td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[28]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.GateSourceId" [defaultItem]="defaultItem"
class="form-control form-control-sm" [data]="LegalFundClasses.LiqGateSource"
[filterable]="false" textField="Name" [valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[29]" class="tableItem"></td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[29]" class="tableItem" style="width:100%">
<input kendoTextBox [(ngModel)]="f.GateFundClassPct" style="width:100%; height: 29.5px;" />
</td>
<td class="tableItem" *ngIf="c == ColumnNames[30]"></td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[31]" class="tableItem"></td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[31]" class="tableItem" style="width:100%">
<input kendoTextBox [(ngModel)]="f.IntialProceeds" style="width: 100%; height: 29.5px;" />
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[32]" class="tableItem"></td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[32]" class="tableItem" style="width:100%">
<input kendoTextBox [(ngModel)]="f.PaymentInDays" style="width: 100%; height: 29.5px;" />
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[33]" class="tableItem"></td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[33]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.PaymentTypeOfDaysId"
[defaultItem]="defaultItem" class="form-control form-control-sm"
[data]="LegalFundClasses.LiqTypeOfDays" [filterable]="false" textField="Name"
[valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td class="tableItem" *ngIf="c == ColumnNames[34]" ></td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[35]" class="tableItem"></td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[35]" class="tableItem" style="width:100%">
<input kendoTextBox [(ngModel)]="f.HoldbackPercentage" style="width: 100%; height: 29.5px;" />
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[36]" class="tableItem"></td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[36]" class="tableItem" style="width:100%">
<input kendoTextBox [(ngModel)]="f.HoldbackPayment" style="width: 100%; height: 29.5px;" />
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[37]" class="tableItem"></td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[37]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.HoldbackTypeOfDaysId"
[defaultItem]="defaultItem" class="form-control form-control-sm"
[data]="LegalFundClasses.LiqTypeOfDays" [filterable]="false" textField="Name"
[valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td colspan="7" class="tableItem" *ngIf="c == ColumnNames[38] && i<1"></td>
<td class="tableItem" *ngIf="c == ColumnNames[39]">
<button type="button" class="btn btn-default btn" style="float: left;"
(click)="reviewClicked(f.value.Id,2)">Review Fees</button>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[40]" class="tableItem"></td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[40]" class="tableItem" style="width:100%">
<kendo-numerictextbox [(ngModel)]="f.ManagementFeeRate" style="width: 100%; height: 29.5px;"></kendo-numerictextbox>
<!-- <input kendoTextBox [(ngModel)]="f.ManagementFeeRate" style="width: 100%; height: 29.5px;" /> -->
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[41]" class="tableItem"></td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[41]" class="tableItem" style="width:100%">
<kendo-numerictextbox [(ngModel)]="f.IncentiveFeeRate" style="width: 100%; height: 29.5px;"></kendo-numerictextbox>
<!-- <input kendoTextBox [(ngModel)]="f.IncentiveFeeRate" style="width: 100%; height: 29.5px;" /> -->
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[42]" class="tableItem"></td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[42]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.RealizationFrequencyId"
[defaultItem]="defaultItem" class="form-control form-control-sm"
[data]="LegalFundClasses.LiqFrequencys" [filterable]="false" textField="Name"
[valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[43]" class="tableItem"></td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[43]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.HighWaterMarkId"
[defaultItem]="defaultItem" class="form-control form-control-sm"
[data]="LegalFundClasses.LiqHighWaterMarks" [filterable]="false" textField="Name"
[valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[44]" class="tableItem"></td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[44]" class="tableItem">
<label style="font-size: 13px;font-weight: normal;cursor: pointer">
<input type="checkbox" value="" style="width: 13px; height: 13px;" /> Yes
</label>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[45]" class="tableItem"></td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[45]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.HurdleRateBasisId"
[defaultItem]="defaultItem" class="form-control form-control-sm"
[data]="LegalFundClasses.LiqHurdleRateBasis" [filterable]="false" textField="Name"
[valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[46]" class="tableItem"></td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[46]" class="tableItem" style="width:100%">
<kendo-numerictextbox [(ngModel)]="f.HurdleRatePct" style="width: 100%; height: 29.5px;"></kendo-numerictextbox>
<!-- <input kendoTextBox [(ngModel)]="f.HurdleRatePct" style="width: 100%; height: 29.5px;" /> -->
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[47]" class="tableItem"></td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[47]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.HurdleRateIndexId"
[defaultItem]="defaultItem" class="form-control form-control-sm"
[data]="LegalFundClasses.LiqHurdleRateIndex" [filterable]="false" textField="Name"
[valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[48]" class="tableItem"></td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[48]" class="tableItem" style="width:100%">
<!-- <input kendoTextBox [(ngModel)]="f.HurdleRatePct" style="width: 100%; height: 29.5px;" /> -->
<kendo-numerictextbox [(ngModel)]="f.PreferredReturnRatePct" style="width: 100%; height: 29.5px;"></kendo-numerictextbox>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[49]" class="tableItem"></td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[49]" class="tableItem" style="width:100%">
<input kendoTextBox [(ngModel)]="f.GpCatchUp" style="width:100%; height: 29.5px;" />
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[50]" class="tableItem"></td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[50]" class="tableItem" style="width:100%">
<input kendoTextBox [(ngModel)]="f.PrefferedReturnComments"
style="width: 100%; height: 29.5px;" />
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[51]" class="tableItem"></td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[51]" class="tableItem">
<label style="font-size: 13px;font-weight: normal;cursor: pointer">
<input type="checkbox" value="" style="width: 13px; height: 13px;" /> Yes
</label>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[52]" class="tableItem"></td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[52]" class="tableItem" style="width:100%">
<!-- <input kendoTextBox [(ngModel)]="f.ClawbackPercentage" style="width: 100%; height: 29.5px;" /> -->
<kendo-numerictextbox [(ngModel)]="f.ClawbackPercentage" style="width: 100%; height: 29.5px;"></kendo-numerictextbox>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[53]" class="tableItem"></td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[53]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.AssetFeeDiscountTypeId"
[defaultItem]="defaultItem" class="form-control form-control-sm"
[data]="LegalFundClasses.FeeDicountTypes" [filterable]="false" textField="Name"
[valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[54]" class="tableItem"></td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[54]" class="tableItem" style="width:100%">
<!-- <input kendoTextBox [(ngModel)]="f.FeeComments" style="width: 100%; height: 29.5px;" /> -->
<textarea kendoTextArea [(ngModel)]="f.FeeComments" style="width: 100%; height:200px;" ></textarea>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[55]" class="tableItem"></td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[55]" class="tableItem">
<label style="font-size: 13px;font-weight: normal;cursor: pointer">
<input type="checkbox" value=""
style="width: 13px; height: 13px;" /> Yes </label>
</td>
<td class="tableItem" *ngIf="c == ColumnNames[56]">
<button *ngIf="!EditMode[f.Id]" type="button" class="btn btn-primary btn mr-1 col-sm-4"
(click)="buttonClicked(f.Id)">Edit</button>
<button *ngIf="EditMode[f.Id]" type="button" class="btn btn-primary btn mr-1 col-sm-3"
(click)="Update(f.Id)">Save</button>
<button *ngIf="EditMode[f.Id]" type="button" class="btn btn-primary btn mr-1 col-sm-3"
(click)="Delete(f.Id)">Delete</button>
<button *ngIf="EditMode[f.Id]" type="button" class="btn btn-primary btn mr-1 col-sm-3"
(click)="buttonClicked(f.Id)">Cancel</button>
</td>
</ng-container>
</tr>
</table>
</div>
</div>
from table column width changing while toggling between readonly and edit mode
No comments:
Post a Comment