From this code, which takes data from a database, I extract the fields that interest me and show them to the video.
#foreach (var item in Model.ProductList)
{
<tr>
<td onclick="myFunction(this)" class="view-message dont-show"><h5>#item.Id</h5></td>
<td onclick="myFunction(this)" class="view-message"><h5>#item.Name</h5></td>
<td onclick="myFunction(this)"><h4 style="margin-top: 5px;"><span class="label label-success ">#item.Model</span></h4></td>
<td onclick="myFunction(this)" class="view-message text-left"><h5>#item.Price</h5></td>
<td>
<form method="post">
<span class="btn-group pull-right" style="margin-top: 5px">
<a class="btn btn-warning btn-xs" asp-page="/Product/Edit" asp-route-id="#item.Id" style="background-color: green; height: 29px; margin-top: -1px;">
<i class="glyphicon glyphicon-edit"></i>
</a>
<button type="submit" class="btn btn-danger btn-xs" asp-page-handler="Delete" asp-route-id="#item.Id" style="height: 27px; margin-top: 0px;"
onclick="return confirm('Are you sure to delete this product?');">
<i class="glyphicon glyphicon-remove"></i>
</button>
</span>
</form>
</td>
</tr>
}
Question: How can I enter this data in cache (IMemoryCache)?
I use Core 2.1 and I would like to avoid using MVC and then using "controllers".
Thanks in advance for your help.
Related
Initially my page appears like this, with one input text box and a "+" button and a "-" button.
Image -
Now, if i click on the "+" button , the size between the first text-box and button increases. Please have a look -
Image -
Please guide on why such a gap appears. This gap doesn't appear when i click on subsequent "+" buttons.
code -
app.component.html
<div *ngIf="addContainer">
<p style="margin-left: 200px; font-size:18px">Please enter the node -</p>
<table align="center">
<tbody>
<tr>
<td>
<input *ngIf="addMore" type="text" placeholder="Enter a Node" value="Aadhar">
</td>
<td>
<button type="button" style="margin-left: 10px" (click)="addOneMore()" class="btn btn-success"> + </button>
</td>
<td>
<button type="button" style="margin-left: 10px" class="btn btn-danger"> - </button>
</td>
</tr>
<tr *ngFor="let container of containers" >
<div #myElement>
<td >
<input *ngIf="addMore" type="text" placeholder="Enter a Node" value="Aadhar">
</td>
<td>
<button type="button" style="margin-left: 10px" (click)="addOneMore()" class="btn btn-success"> + </button>
</td>
<td>
<button type="button" style="margin-left: 10px" (click)="myElement.remove()" class="btn btn-danger"> - </button>
</td>
</div>
</tr>
<tr>
<td style="text-align:center">
<button type="button" (click)="showGraphs()" class="btn btn-dark">Search</button>
</td>
</tr>
</tbody>
</table>
</div>
Its because of extra div inside the tr. replace the div by ng-container.
<tr *ngFor="let container of containers" >
<ng-container #myElement>
<td >
<input *ngIf="addMore" type="text" placeholder="Enter a Node" value="Aadhar">
</td>
<td>
<button type="button" style="margin-left: 10px" (click)="addOneMore()" class="btn btn-success"> + </button>
</td>
<td>
<button type="button" style="margin-left: 10px" (click)="myElement.remove()" class="btn btn-danger"> - </button>
</td>
</ng-container>
</tr>
OR
you can put the reference myElement at tr level
<tr *ngFor="let container of containers" #myElement >
<ng-container >
<td >
<input *ngIf="addMore" type="text" placeholder="Enter a Node" value="Aadhar">
</td>
<td>
<button type="button" style="margin-left: 10px" (click)="addOneMore()" class="btn btn-success"> + </button>
</td>
<td>
<button type="button" style="margin-left: 10px" (click)="myElement.remove()" class="btn btn-danger"> - </button>
</td>
</tr>
I did this -
app.component.ts
deleteOneMore(){
this.containers.splice(this.index, 1);
}
app.component.html
<tr *ngFor="let container of containers; let i = index;" >
<ng-container >
<td >
<input *ngIf="addMore" type="text" placeholder="Enter a Node" value="Aadhar">
</td>
<td >
<button type="button" style="margin-left: 10px" (click)="addOneMore()" class="btn btn-success"> + </button>
</td>
<td>
<button type="button" style="margin-left: 10px" (click)="deleteOneMore()" class="btn btn-danger"> - </button>
</td>
</ng-container>
</tr>
So here is my answer i think it will help you with your problem, you have used a class in every button called "btn" and it contain by default padding of padding: .375rem .75rem; so you guess my answer, you have to remove it and you will be fine.
when padding were not removed from btn class
when padding removed from btn classjust checked after commenting this btn padding in picture
How to get equal spacing in this group of buttons?
When I add pull-right to the class the search and plus buttons is set to below the search box.
<tr>
<th class="col-md-3">
<small>Firma</small>
<span class="glyphicon glyphicon-sort-by-alphabet glyph_sorting" aria-hidden="true"></span>
<span class="glyphicon glyphicon-sort-by-alphabet-alt glyph_sorting" aria-hidden="true"></span>
</th>
<th class="col-md-3"><small>Plaats</small></th>
<th class="col-md-3"><small>Telefoon</small></th>
<th class="col-md-3">
<form action="" method="post">
<div class="form-group col-xs-8">
<input type="text" class="form-control input-sm" placeholder="Search">
</div>
<button type="submit" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
<button type="button" class="btn btn-sm"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>
</form>
</th>
</tr>
Edit based on comment:
Set parent container (form) to flexbox row, and center it's children elements horizontally with even space in-between with justify-content:space-between & vertically with align-items:center.
Override bootstrap's .form-control's padding & margin, which is whats causing the space async between buttons & the search input.
form {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
}
div.form-group {
padding: 0;
margin: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table>
<tr>
<th class="col-md-3">
<small>Firma</small>
<span class="glyphicon glyphicon-sort-by-alphabet glyph_sorting" aria-hidden="true"></span>
<span class="glyphicon glyphicon-sort-by-alphabet-alt glyph_sorting" aria-hidden="true"></span>
</th>
<th class="col-md-3"><small>Plaats</small></th>
<th class="col-md-3"><small>Telefoon</small></th>
<th class="col-md-3">
<form action="" method="post">
<div class="form-group col-xs-8">
<input type="text" class="form-control input-sm" placeholder="Search">
</div>
<button type="submit" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
<button type="button" class="btn btn-sm"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>
</form>
</th>
</tr>
</table>
enter image description hereI have two button inside my and I need to align it in the center
<td align="center">
<form action="ReplyFound" method="post" class="pull-left">
<a class="btn btn-default "><em class="fa fa-pencil"></em></a>
</form>
<form action="DeleteMessage" method="post" class="pull-left">
<a class="btn btn-danger "><em class="fa fa-trash"></em></a>
</form>
</td>
Try:
display: block;
margin: auto;
Try This :
.divCenter {
width: 100%;
max-width: 960px;
margin: 0 auto;
text-align: center;
}
.pull-left {
display: inline-block;
margin: 5px;
background-color: #000;
color: #fff;
}
<div class="divCenter">
<td align="center">
<form action="ReplyFound" method="post" class="pull-left">
<a class="btn btn-default "><em class="fa fa-pencil">Button1</em></a>
</form>
<form action="DeleteMessage" method="post" class="pull-left">
<a class="btn btn-danger "><em class="fa fa-trash">Button2</em></a>
</form>
</td>
</div>
You can use following html for this
<td class="text-center">
<form action="ReplyFound" method="post" class="btn-block">
<a class="btn btn-default "><em class="fa fa-pencil"></em></a>
</form>
<form action="DeleteMessage" method="post" class="btn-block">
<a class="btn btn-danger "><em class="fa fa-trash"></em></a>
</form>
</td>
Missing closing tag </form>.
If you are not defining width when its width will be wrap content.
<table style="width:100%">
<tr>
<td align="center">
<form action="ReplyFound" method="post" class="pull-left">
<a class="btn btn-default ">Edit</a>
</form>
<form action="DeleteMessage" method="post" class="pull-left">
<a class="btn btn-danger ">Delete</a>
</form>
</td>
</tr>
</table>
You can use this
.centerBtn{
display:inline-block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table style="width:100%">
<tr>
<td align="center" >
<div class="centerBtn">
<form action="ReplyFound" method="post" class="pull-left">
<a class="btn btn-default "><em class="fa fa-pencil"></em></a>
</form>
<form action="DeleteMessage" method="post" class="pull-left">
<a class="btn btn-danger "><em class="fa fa-trash"></em></a>
</form>
</div>
</td>
</tr>
</table>
Here I am providing a screenshot and I outlined the area I wanted to collapse all the way to just right after the last blue buttom, touching it. I outlined the area I wanted to collapse in red. Is there a specific class that will let me do that?
Ty
code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="panel panel-primary col-md-6">
<div class="row">
<!-- Label -->
<button type="button" class="btn btn-info btn-xs btn-block" id='invoicelabel'><strong>Invoice CP</strong>
</button>
<!-- Invoice CP -->
<div class="btn-group btn-group-vertical col-md-3 test2">
<button class="btn btn-primary btn-sm" type="submit">Total Amount</button>
<button class="btn btn-primary btn-sm" type="submit">Duplicate</button>
<button class="btn btn-primary btn-sm" type="submit">Clear</button>
<button class="btn btn-primary btn-sm" type="submit">Currency</button>
<button class="btn btn-primary btn-sm" type="submit" disabled>.</button>
<button class="btn btn-primary btn-sm" type="submit" disabled>.</button>
</div>
<table class="table table-condensed">
<tbody class="col-md-10 test pull-right">
<tr>
<td class="default" width="20%">
<input type="text" class="btn btn-default btn-sm col-sm-12 floatright" placeholder="Pieces">
</td>
<td class="default" width="35%">
<input type="text" class="btn btn-default btn-sm col-sm-12 floatright" placeholder="Unit Price">
</td>
<td class="default" width="45%">
<input type="text" class="btn btn-default btn-sm col-sm-12 floatright" placeholder="Line Amount">
</td>
</tr>
<tr>
<td class="default" width="20%">
<input type="text" class="btn btn-default btn-sm col-sm-12 floatright" placeholder="Pieces">
</td>
<td class="default" width="35%">
<input type="text" class="btn btn-default btn-sm col-sm-12 floatright" placeholder="Unit Price">
</td>
<td class="default" width="45%">
<input type="text" class="btn btn-default btn-sm col-sm-12 floatright" placeholder="Line Amount">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Try checking the CSS height property of the .test or .test2. Probably it is set to a specific value. If you leave it blank, the area will fit to the content.
I'm new to Angular JS. I was working with Angular JS calendar and am trying to display the angular Datepicker inside Bootstrap modal window. However the Datepicker is displayed twice as shown in the image below.
Here's my modal html code.
<div class="modal-header">
<h3 class="modal-title">{{ vm.event.event.title }}</h3>
</div>
<div class="modal-body" ng-repeat="event in vm.event track by $index">
<h3 class="post-subtitle">
{{event.type}}
</h3>
<table class="table table-bordered">
<thead>
<th>Starts on</th>
<th>Ends on</th>
</thead>
<tbody>
<td>
<p class="input-group" style="max-width: 250px">
<input
type="text"
class="form-control"
readonly
uib-datepicker-popup="dd MMMM yyyy"
ng-model="event.startsAt"
is-open="event.startOpen"
close-text="Close" >
<span class="input-group-btn">
<button
type="button"
class="btn btn-default"
ng-click="vm.object.toggle($event, 'startOpen', event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
<uib-timepicker
ng-model="event.startsAt"
hour-step="1"
minute-step="15"
show-meridian="true">
</uib-timepicker>
</td>
<td>
<p class="input-group" style="max-width: 250px">
<input
type="text"
class="form-control"
readonly
uib-datepicker-popup="dd MMMM yyyy"
ng-model="event.endsAt"
is-open="event.endOpen"
close-text="Close">
<span class="input-group-btn">
<button
type="button"
class="btn btn-default"
ng-click="vm.object.toggle($event, 'endOpen', event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
<uib-timepicker
ng-model="event.endsAt"
hour-step="1"
minute-step="15"
show-meridian="true">
</uib-timepicker>
</td>
</tbody>
</table>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="$close()">OK</button>
</div>