How to move multiple buttons to the top right - css

I have 10 buttons and I would like to place the buttons on the top right, but I don't know how to do it? Currently my buttons are at the bottom, I don't know how to move my buttons?
I would like to get this result, (see below)
example
I think I need to use a display:flex ?
Do you have any idea, please?
Here is my code below
Thank you in advance for your help et your time.
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<body>
<div class="home-content container">
<h1 class="text-center pt-5 pb-3">Signalétique</h1>
<div class="row pt-3 container">
<div class="card" style="width: 100%;">
<div class="card-body">
<table class="table table-hover table-striped" style="width: 60%">
<tbody>
<tr>
<th>Ticker</th>
<td>SOLB</td>
</tr>
<tr>
<th>Code SVM</th>
<td>347075</td>
</tr>
<tr>
<th>Code ISIN</th>
<td>BE00003470755</td>
</tr>
<tr>
<th>Genre</th>
<td>Actions</td>
</tr>
<tr>
<th>Pays d'origine</th>
<td>Belgique</td>
</tr>
<tr>
<th>Secteur économique</th>
<td>Matériaux</td>
</tr>
<tr>
<th>Devise de cotation</th>
<td>EUR</td>
</tr>
<tr>
<th>Groupe de cotation</th>
<td>(AO)</td>
</tr>
<tr>
<th>Unité de cotation</th>
<td>1,0000000</td>
</tr>
<tr>
<th>Site Internet</th>
<td>www.solvay.com</td>
</tr>
</tbody>
</table>
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary mb-2 ">Best Execution</button>
<button type="button" class="btn btn-primary mb-2">Etat du marché</button>
<button type="button" class="btn btn-primary mb-2">Graphiques Historiques</button>
<button type="button" class="btn btn-primary mb-2">Historique des cours</button>
<button type="button" class="btn btn-primary mb-2">Ordre</button>
</div>
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary mb-2 ms-2">Best Execution</button>
<button type="button" class="btn btn-primary mb-2 ms-2">Etat du marché</button>
<button type="button" class="btn btn-primary mb-2 ms-2">Graphiques Historiques</button>
<button type="button" class="btn btn-primary mb-2 ms-2">Historique des cours</button>
<button type="button" class="btn btn-primary mb-2 ms-2">Ordre</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>


Minor adjustments will need to be made to the columns, but here's a solution:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
<body>
<div class="home-content container">
<h1 class="text-center pt-5 pb-3">Signalétique</h1>
<div class="row pt-3 container">
<div class="card" style="width: 100%;">
<div class="card-body">
<div class="row">
<div class="col">
<table class="table table-hover table-striped" style="width: 60%;">
<tbody>
<tr>
<th>Ticker</th>
<td>SOLB</td>
</tr>
<tr>
<th>Code SVM</th>
<td>347075</td>
</tr>
<tr>
<th>Code ISIN</th>
<td>BE00003470755</td>
</tr>
<tr>
<th>Genre</th>
<td>Actions</td>
</tr>
<tr>
<th>Pays d'origine</th>
<td>Belgique</td>
</tr>
<tr>
<th>Secteur économique</th>
<td>Matériaux</td>
</tr>
<tr>
<th>Devise de cotation</th>
<td>EUR</td>
</tr>
<tr>
<th>Groupe de cotation</th>
<td>(AO)</td>
</tr>
<tr>
<th>Unité de cotation</th>
<td>1,0000000</td>
</tr>
<tr>
<th>Site Internet</th>
<td>www.solvay.com</td>
</tr>
</tbody>
</table>
</div>
<div class="col">
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary mb-2">
Best Execution
</button>
<button type="button" class="btn btn-primary mb-2">
Etat du marché
</button>
<button type="button" class="btn btn-primary mb-2">
Graphiques Historiques
</button>
<button type="button" class="btn btn-primary mb-2">
Historique des cours
</button>
<button type="button" class="btn btn-primary mb-2">
Ordre
</button>
</div>
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary mb-2 ms-2">
Best Execution
</button>
<button type="button" class="btn btn-primary mb-2 ms-2">
Etat du marché
</button>
<button type="button" class="btn btn-primary mb-2 ms-2">
Graphiques Historiques
</button>
<button type="button" class="btn btn-primary mb-2 ms-2">
Historique des cours
</button>
<button type="button" class="btn btn-primary mb-2 ms-2">
Ordre
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>


Try using a flexbox 👍🏼
First use main container then display it as flex and with some container and items properties you will get what you want
Display : flex
And proceed ....

Related

How to insert multiple checkbox values into firebase using vue js

I've a form that contains a textarea and a table with a list of many members (from a collection named Members). Each table's contain two checboxes: one to mark the presence of the member and the second one to mark his payment. After clicking on the submit button I'd like to have in my firebase database something like this:
Meeting collection:
associationId,
textareaValue,
createdAd
Presence collection:
memberId,
meetingId,
present: true or false,
createAt
Payment collection:
memberId,
meetingId,
payment: true or false,
createAt
<form #submit.prevent="handleSubmitNewMeeting">
<!-- step one -->
<div class="card" v-if="showFormPart1">
<div class="card-header">
<h4>Entrer le sujet principal de la réunion</h4>
</div>
<div class="card-body">
<div class="form-group">
<textarea class="form-control" v-model="subjects" required rows="3"></textarea>
</div>
<p></p>
<div class="row">
<div class="col-sm-6">
<button #click="showForm=false" class="btn btn-danger" style="width: 100%">
Annuler
</button>
</div>
<div class="col-sm-6">
<button
type="button" class="btn btn-outline-secondary" #click="showFormPart2=true;
showFormPart1=false;">
Suivant
</button>
</div>
</div>
</div>
</div>
<p></p>
<!-- step two -->
<div class="card" v-if="showFormPart2">
<div v-if="members">
<div class="card-header">
<h4>Cocher les présences et payements</h4>
</div>
<div class="card-block p-0">
<table class="table table-bordered">
<thead class="">
<tr align="center">
<th scope="col">Nom</th>
<th scope="col">Prénom</th>
<th scope="col">Téléphone</th>
<th scope="col">Présence</th>
<th scope="col">Payment</th>
</tr>
</thead>
<tbody>
<tr v-for="member in members" :key="member.id" align="center">
<td>{{ member.memberFirstname }}</td>
<td>{{ member.memberLastname }}</td>
<td>{{ member.memberPhoneNumber }}</td>
<td>
<label class="switch">
<input type="checkbox" class="default" v-model="present">
<span class="slider round"></span>
</label>
</td>
<td>
<label class="switch">
<input type="checkbox" class="default" v-model="payment">
<span class="slider round"></span>
</label>
</td>
</tr>
</tbody>
</table>
<p></p>
<div class="row">
<div class="col-sm-6">
<button
type="button" class="btn btn-outline-secondary" #click="showFormPart2=false;
showFormPart1=true;">
Précédent
</button>
</div>
<div class="col-sm-6">
<button class="btn btn-secondary"> Valider </button>
</div>
</div>
</div>
</div>
</div>
<p></p>
</form>
How to do these with firebase using Vue Js please ? thanks !

The anchor element doesn't recognized on specify positions with tag helpers .Net core 6

I'm working with .Net Core 6 and currently I have problems to make it works the elements with tag helpers.
<div class="container p-3">
<div class="row pt-4">
<div class="col-6">
<h2 class="text-primary">Category List</h2>
</div>
<div class="col-6 text-end">
<a asp-controller="Category" asp-action="Create" class="btn btn-primary">
<i class="bi bi-plus-circle"></i> Create new category
</a>
</div>
</div>
<br /><br />
<table class="table table-bordered table-striped" style="width: 100%;">
<thead>
<tr class="table-primary" ">
<th scope="row">Category Name</th>
<th scope="row">Display Order</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var category in Model)
{
<tr>
<td width="50%">#category.Name</td>
<td width="30%">#category.DisplayOrder</td>
<td>
<div class="w-75 btn-group" role="group">
<a asp-controller="Category" asp-action="Edit" asp-route-id="#category.Id" class="btn btn-primary mx-2">
<i class="bi bi-pencil-square"></i> Edit
</a>
</div>
</td>
</tr>
}
</tbody>
</table>
Here the first anchor works perfectly,
<a asp-controller="Category" asp-action="Create" class="btn btn-primary">
<i class="bi bi-plus-circle"></i> Create new category
</a>
But when I'm using the next one, and I run the application, the navigator does not recognize the tag and does not create automatically the sintax to add the href tag.
<a asp-controller="Category" asp-action="Edit" asp-route-id="#category.Id" class="btn btn-primary mx-2">
<i class="bi bi-pencil-square"></i> Edit
</a>

After testing, I finally found the reason.
The problem is with this line of code:
<tr class="table-primary" ">
It has one more ".
Remove it, the href will be displayed normally.
<tr class="table-primary">

How to set a same card Height in bootstrap 4

I cant make my cards have the same size
ive been working in this problem but i dont find a solucion at all... ive try it to use h-xxx, align-items-stretch and Height:100% but i cant make my cards have the same size, or the same height in this case
this is my actual code of what im doing
<div class="content">
<div class="container-fluid" style=" height:360px">
<div class="row align-items-stretch ">
<!-- DETALLES DEL PROYECTO -->
<div class="card h-100 w-40 ml-3" id="detalles" *ngFor="let c of proyectof">
<div class="card-header" align="center">
<h4 class="title">{{c.nombrep}}</h4>
</div>
<div class="container ">
<div class="row">
<div class="form-group col-md-6">
<label id="letras" for="Nombre">Nombre del Proyecto</label>
<input type="text" value={{c.nombrep}} class="form-control" id="NombreP" disabled name="NombreP"
maxlength="40" size="20">
</div>
<div class="form-group col-md-6">
<label for="ClienteP">Cliente</label>
<input type="text" value={{c.nombrecliente}} class="form-control" disabled id="ClienteP" name="ClienteP"
maxlength="20" size="20">
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="AdminP">Administrador del Proyecto</label>
<input type="text" value={{persona}} pattern="[A-Za-z]+" disabled class="form-control" id="AdminP"
name="AdminP" maxlength="40" size="20">
</div>
<div class="form-group col-md-6">
<label for="CodigoP">Codigo</label>
<input type="text" pattern="[+#*\d*]+" value={{c.numero}} disabled maxlength="10" class="form-control"
id="CodigoP" name="CodigoP" maxlength="40">
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="FechaIP">Fecha de Inicio</label>
<input type="text" value="{{c.fechaini | date: 'yyyy-MM-dd'}}" class="form-control btn-outline-secondary"
disabled id="FechaIP">
</div>
<div class="form-group col-md-6">
<label for="FechaCP">Fecha de Culminacion</label>
<input type="text" value="{{c.fechafin | date: 'yyyy-MM-dd'}}" class="form-control btn-outline-secondary"
disabled id="FechaCP">
</div>
</div>
<div class="row justify-content-center">
<div class="form-group ">
<label>Plataforma</label><br />
<select class="btn btn-outline-secondary" disabled style="border-color:rgba(165, 157, 157, 0.664)">
<option *ngIf="c.tipo=='USSD'" value="1">USSD</option>
<option *ngIf="c.tipo=='SMS'" value="1">SMS</option>
</select>
</div>
</div>
</div>
</div>
<!-- CASOS DE PRUEBA -->
<div class="card h-100 ml-3 d-flex " id="card">
<div class="card-header" align="center">
<p class="text-muted">Casos de Pruebas Creados</p>
</div>
<!-- <div class="header" align="center" style="padding-top:15px">
<p class="text-muted">Casos de Pruebas Creados</p>
</div> -->
<div id="tabla" class="table-responsive text-nowrap" style="overflow:auto;">
<table class="table table-hover">
<thead class="text-black-50">
<tr id="personalizacion">
<th>
<div class="checkbox custom-control custom-checkbox">
<mat-checkbox color="primary" id="uno" [checked]="checkBoxMayor" type="checkbox"
(change)="checkAll()"></mat-checkbox>
<label for="checkbox1"></label>
</div>
</th>
<th scope="col">Nombre del Caso</th>
<th scope="col">Estatus</th>
<th scope="col">Herramientas</th>
</tr>
</thead>
<tbody *ngFor="let a of casosdeprueba; let b = index">
<tr>
<td>
<div class="checkbox">
<mat-checkbox color="primary" #box id='{{a.idcdp}}/{{a.nombrecdp}}' [checked]="check"
type="checkbox" (change)="cambiarCheckbox($event, box.id)"></mat-checkbox>
<label for={{a.idcdp}}></label>
</div>
</td>
<!-- Esto es lo que estaba dentro del tb del nombre del caso prueba
display:block;text-overflow: ellipsis;width: 150px;overflow: hidden;
y fue removido dejando solo esto
white-space: nowrap;
-->
<td style="white-space: nowrap" mat-raised-button matTooltip={{a.nombrecdp}}>{{a.nombrecdp}}</td>
<td mat-raised-button matTooltip="Sin Ejecutar" *ngIf="a.idestado === 2 && a.proceso!='ejecutando'">
<button class="tune" type="submit"><i class="fa fa-circle pointer" style="color:yellow"></i></button>
</td>
<td mat-raised-button matTooltip="Exitoso, presione para conocer mas detalles"
*ngIf="a.idestado === 0 && a.proceso!='ejecutando'"> <button class="tune"
[routerLink]="['/Gestion/Estado_del_caso', id, a.idcdp]" type="submit"><i
class="fa fa-circle text-success pointer"></i></button>
</td>
<td mat-raised-button matTooltip="Fallido, presione para conocer mas detalles"
*ngIf="a.idestado === 1 && a.proceso!='ejecutando'"><button class="tune"
[routerLink]="['/Gestion/Estado_del_caso', id, a.idcdp]" type="submit"><i
class="fa fa-circle text-danger pointer"></i></button>
</td>
<td *ngIf="a.proceso === 'ejecutando'">
<div class="loader" id="loader">Loading...</div>
</td>
<td>
<div class="btn-group btn-group-justified ">
<!-- <button [routerLink]="['/Gestion/Estado_del_caso', id, a.idcdp]" type="submit" class="btn btn-primary">Estado</button> -->
<button class="tune" [routerLink]="['/Gestion/Historial_del_caso', id, a.idcdp]" type="submit"><i
class="icon" mat-raised-button matTooltip="Histórico" class="material-icons pointer">
description
</i></button>
<button class="tune" [routerLink]="['/Gestion/Detalles_del_caso', id, a.idcdp]" type="submit"><i
mat-raised-button matTooltip="Descripción" class="material-icons pointer">
remove_red_eye
</i></button>
</div>
<div class="btn-group btn-group-justified ">
<button class="tune" [routerLink]="['/Gestion/Modificando', id, a.idcdp]" type="submit"><i
mat-raised-button matTooltip="Editar caso de prueba" class="material-icons pointer">
create
</i></button>
<button class="tune" [routerLink]="['/Gestion/Copiando', id, a.idcdp]" type="submit"><i
mat-raised-button matTooltip="Copiar caso de prueba" class="material-icons pointer">
file_copy
</i></button>
<button class="tune" (click)="borrarcdp(a.idcdp)" type="submit"><i mat-raised-button
matTooltip="Eliminar Caso de Prueba" class="material-icons pointer">
delete
</i></button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer text-muted text-center">
<div class="btn-group btn-group-justified ">
<!-- <button [routerLink]="['/Gestion/Estado_del_caso', id, a.idcdp]" type="submit" class="btn btn-primary">Estado</button> -->
<button *ngIf="show4" class="tune" type="submit" (click)="iniEjecucion()"><i class="icon" mat-raised-button
matTooltip="Ejecutar Casos de Prueba" class="material-icons pointer">
directions_run
</i></button>
<button *ngIf="!show4" class="tune" type="submit" disabled><i class="icon" mat-raised-button
matTooltip="Ejecutar Casos de Prueba" class="material-icons pointer">
directions_run
</i></button>
<button *ngIf="show4" class="tune" type="submit" data-toggle="modal" data-target="#datos">
<i mat-raised-button matTooltip="Agendar Ejecucion de Proyectos"
class="material-icons pointer">
alarm
</i></button>
<button *ngIf="!show4" class="tune" disabled type="submit"><i mat-raised-button
matTooltip="Agendar Ejecucion de Proyectos" class="material-icons pointer">
alarm
</i></button>
<button class="tune" [routerLink]="['/Gestion/Creando_caso_de_prueba', id ]" type="submit"><i
mat-raised-button matTooltip="Crear un nuevo Caso de Prueba" class="material-icons pointer">
add_circle
</i></button>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#datos">Agendar
</button>
</div>
</div>
</div>
</div>
</div>
this is what i get with the code that i attached
but i need my two cards with the same height , the problem itsef comes when i add more items to my table, because its start to grow, and overpass the height of the left card, if a set a static heigth, the card losses his responsive feature

i think in this situation the only thing is to set a fixed height like, height: 500px, or 50vh.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<style>
.align-items-stretch.row {
height: 50vh;
}
</style>
<div class="content">
<div class="container-fluid" style=" height:360px">
<div class="row align-items-stretch ">
<!-- DETALLES DEL PROYECTO -->
<div class="card h-100 w-40 ml-3" id="detalles" *ngFor="let c of proyectof">
<div class="card-header" align="center">
<h4 class="title">{{c.nombrep}}</h4>
</div>
<div class="container ">
<div class="row">
<div class="form-group col-md-6">
<label id="letras" for="Nombre">Nombre del Proyecto</label>
<input type="text" value={{c.nombrep}} class="form-control" id="NombreP" disabled name="NombreP"
maxlength="40" size="20">
</div>
<div class="form-group col-md-6">
<label for="ClienteP">Cliente</label>
<input type="text" value={{c.nombrecliente}} class="form-control" disabled id="ClienteP" name="ClienteP"
maxlength="20" size="20">
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="AdminP">Administrador del Proyecto</label>
<input type="text" value={{persona}} pattern="[A-Za-z]+" disabled class="form-control" id="AdminP"
name="AdminP" maxlength="40" size="20">
</div>
<div class="form-group col-md-6">
<label for="CodigoP">Codigo</label>
<input type="text" pattern="[+#*\d*]+" value={{c.numero}} disabled maxlength="10" class="form-control"
id="CodigoP" name="CodigoP" maxlength="40">
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="FechaIP">Fecha de Inicio</label>
<input type="text" value="{{c.fechaini | date: 'yyyy-MM-dd'}}" class="form-control btn-outline-secondary"
disabled id="FechaIP">
</div>
<div class="form-group col-md-6">
<label for="FechaCP">Fecha de Culminacion</label>
<input type="text" value="{{c.fechafin | date: 'yyyy-MM-dd'}}" class="form-control btn-outline-secondary"
disabled id="FechaCP">
</div>
</div>
<div class="row justify-content-center">
<div class="form-group ">
<label>Plataforma</label><br />
<select class="btn btn-outline-secondary" disabled style="border-color:rgba(165, 157, 157, 0.664)">
<option *ngIf="c.tipo=='USSD'" value="1">USSD</option>
<option *ngIf="c.tipo=='SMS'" value="1">SMS</option>
</select>
</div>
</div>
</div>
</div>
<!-- CASOS DE PRUEBA -->
<div class="card h-100 ml-3 d-flex " id="card">
<div class="card-header" align="center">
<p class="text-muted">Casos de Pruebas Creados</p>
</div>
<!-- <div class="header" align="center" style="padding-top:15px">
<p class="text-muted">Casos de Pruebas Creados</p>
</div> -->
<div id="tabla" class="table-responsive text-nowrap" style="overflow:auto;">
<table class="table table-hover">
<thead class="text-black-50">
<tr id="personalizacion">
<th>
<div class="checkbox custom-control custom-checkbox">
<mat-checkbox color="primary" id="uno" [checked]="checkBoxMayor" type="checkbox"
(change)="checkAll()"></mat-checkbox>
<label for="checkbox1"></label>
</div>
</th>
<th scope="col">Nombre del Caso</th>
<th scope="col">Estatus</th>
<th scope="col">Herramientas</th>
</tr>
</thead>
<tbody *ngFor="let a of casosdeprueba; let b = index">
<tr>
<td>
<div class="checkbox">
<mat-checkbox color="primary" #box id='{{a.idcdp}}/{{a.nombrecdp}}' [checked]="check"
type="checkbox" (change)="cambiarCheckbox($event, box.id)"></mat-checkbox>
<label for={{a.idcdp}}></label>
</div>
</td>
<!-- Esto es lo que estaba dentro del tb del nombre del caso prueba
display:block;text-overflow: ellipsis;width: 150px;overflow: hidden;
y fue removido dejando solo esto
white-space: nowrap;
-->
<td style="white-space: nowrap" mat-raised-button matTooltip={{a.nombrecdp}}>{{a.nombrecdp}}</td>
<td mat-raised-button matTooltip="Sin Ejecutar" *ngIf="a.idestado === 2 && a.proceso!='ejecutando'">
<button class="tune" type="submit"><i class="fa fa-circle pointer" style="color:yellow"></i></button>
</td>
<td mat-raised-button matTooltip="Exitoso, presione para conocer mas detalles"
*ngIf="a.idestado === 0 && a.proceso!='ejecutando'"> <button class="tune"
[routerLink]="['/Gestion/Estado_del_caso', id, a.idcdp]" type="submit"><i
class="fa fa-circle text-success pointer"></i></button>
</td>
<td mat-raised-button matTooltip="Fallido, presione para conocer mas detalles"
*ngIf="a.idestado === 1 && a.proceso!='ejecutando'"><button class="tune"
[routerLink]="['/Gestion/Estado_del_caso', id, a.idcdp]" type="submit"><i
class="fa fa-circle text-danger pointer"></i></button>
</td>
<td *ngIf="a.proceso === 'ejecutando'">
<div class="loader" id="loader">Loading...</div>
</td>
<td>
<div class="btn-group btn-group-justified ">
<!-- <button [routerLink]="['/Gestion/Estado_del_caso', id, a.idcdp]" type="submit" class="btn btn-primary">Estado</button> -->
<button class="tune" [routerLink]="['/Gestion/Historial_del_caso', id, a.idcdp]" type="submit"><i
class="icon" mat-raised-button matTooltip="Histórico" class="material-icons pointer">
description
</i></button>
<button class="tune" [routerLink]="['/Gestion/Detalles_del_caso', id, a.idcdp]" type="submit"><i
mat-raised-button matTooltip="Descripción" class="material-icons pointer">
remove_red_eye
</i></button>
</div>
<div class="btn-group btn-group-justified ">
<button class="tune" [routerLink]="['/Gestion/Modificando', id, a.idcdp]" type="submit"><i
mat-raised-button matTooltip="Editar caso de prueba" class="material-icons pointer">
create
</i></button>
<button class="tune" [routerLink]="['/Gestion/Copiando', id, a.idcdp]" type="submit"><i
mat-raised-button matTooltip="Copiar caso de prueba" class="material-icons pointer">
file_copy
</i></button>
<button class="tune" (click)="borrarcdp(a.idcdp)" type="submit"><i mat-raised-button
matTooltip="Eliminar Caso de Prueba" class="material-icons pointer">
delete
</i></button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer text-muted text-center">
<div class="btn-group btn-group-justified ">
<!-- <button [routerLink]="['/Gestion/Estado_del_caso', id, a.idcdp]" type="submit" class="btn btn-primary">Estado</button> -->
<button *ngIf="show4" class="tune" type="submit" (click)="iniEjecucion()"><i class="icon" mat-raised-button
matTooltip="Ejecutar Casos de Prueba" class="material-icons pointer">
directions_run
</i></button>
<button *ngIf="!show4" class="tune" type="submit" disabled><i class="icon" mat-raised-button
matTooltip="Ejecutar Casos de Prueba" class="material-icons pointer">
directions_run
</i></button>
<button *ngIf="show4" class="tune" type="submit" data-toggle="modal" data-target="#datos">
<i mat-raised-button matTooltip="Agendar Ejecucion de Proyectos"
class="material-icons pointer">
alarm
</i></button>
<button *ngIf="!show4" class="tune" disabled type="submit"><i mat-raised-button
matTooltip="Agendar Ejecucion de Proyectos" class="material-icons pointer">
alarm
</i></button>
<button class="tune" [routerLink]="['/Gestion/Creando_caso_de_prueba', id ]" type="submit"><i
mat-raised-button matTooltip="Crear un nuevo Caso de Prueba" class="material-icons pointer">
add_circle
</i></button>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#datos">Agendar
</button>
</div>
</div>
</div>
</div>
</div>

https://getbootstrap.com/docs/4.0/components/card/#card-groups
https://getbootstrap.com/docs/4.0/components/card/#card-decks
Check out card groups and decks. These create uniform sizing. You can also look into how this is implemented to learn how to do it manually if desired.

Bootstrap Pop-up Modal is not showing up. Instead I get black screen

I am working on 2 bootstrap modals - Update modal & delete modal.
Update modal is working perfectly fine on click of update button.
But when I click on delete button(same as for update), delete modal doesnt pop-up, instead I get a black screen.
I am struggling on this issue quite long and not able to get the solution for this.
I have tried doing "inspect element" & compare both the modals, but it seems fine to me.
Also, I have found similar queries on SOF but it did not work.
I have add/remove different css & js files in the script tag but still it didn't work for me.
Below is the code :-
CSS & js links inside head tag :-
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Update & Delete Buttons to call Modals :-
<td align="center">
<!-- Update Button -->
<button class="btn btn-primary btn-xs" onclick="editEmp(${emp.empid})" data-toggle="modal" data-target="#editemp" data-title="Edit"><em class="glyphicon glyphicon-pencil"></em></button>
<!-- Delete Button -->
<button class="btn btn-danger btn-xs" data-toggle="modal" data-target="#deleteemp" data-title="Delete"><em class="glyphicon glyphicon-trash"></em></button>
</td>
Update Modal :-
<div class="modal fade" id="editemp" tabindex="-1" role="dialog"
aria-labelledby="edit" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" style="left: -600px" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</div>
<form:form id = "regForm" action="registerEmp" modelAttribute="empreg">
<!-- some form elements -->
</form:form>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
Delete Modal
<div class="modal fade" id="deleteemp" tabindex="-1" role="dialog"
aria-labelledby="edit" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" style="left: -640px;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
<h4 class="modal-title custom_align" id="Heading">Delete this
entry</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger">
<span class="glyphicon glyphicon-warning-sign"></span> Are you
sure you want to delete this Record?
</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-success">
<span class="glyphicon glyphicon-ok-sign"></span> Yes
</button>
<button type="button" class="btn btn-default" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span> No
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
Any help is really appreciated.

#CoderDS
Link For Reference
You have missed a closing div. This should get your work done.
Updated HTML
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default panel-table">
<div class="panel-heading">
<div class="row">
<div class="col col-xs-6">
<h3 class="panel-title">Employee Details</h3>
</div>
<div class="col col-xs-6 text-right">
<button type="button" class="btn btn-sm btn-primary btn-create" onclick="createNew()">Create New</button>
</div>
</div>
</div>
<div class="panel-body table-responsive">
<table class="table table-striped table-bordered table-list">
<thead>
<tr>
<th><em class="fa fa-cog"></em></th>
<th class="hidden-xs">Employee Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Address</th>
<th>Country</th>
<th>Contact</th>
<th>Email</th>
<th>Gender</th>
<th>Date of Birth</th>
<th>Education</th>
<th>UserName</th>
<th>Password</th>
</tr>
</thead>
<tbody id="myTable">
<!-- foreach -->
<c:forEach items="${data}" var="emp">
<tr>
<td align="center">
<button class="btn btn-primary btn-xs" onclick="editEmp(${emp.empid})" data-toggle="modal" data-target="#editemp" data-title="Edit"><em class="glyphicon glyphicon-pencil"></em></button>
<button class="btn btn-danger btn-xs" onclick="deleteemp(${emp.empid})" data-toggle="modal" data-target="#delemp" data-title="Delete"><em class="glyphicon glyphicon-trash"></em></button>
</td>
<td class="hidden-xs">${emp.empid}</td>
<td>${emp.firstname}</td>
<td>${emp.lastname}</td>
<td>${emp.address}</td>
<td>${emp.country}</td>
<td>${emp.contact}</td>
<td>${emp.email}</td>
<td>${emp.gender}</td>
<td>${emp.dob}</td>
<td>${emp.education}</td>
<td>${emp.username}</td>
<td>${emp.password}</td>
</tr>
</c:forEach>
<!-- foreach -->
</tbody>
</table>
</div>
<div class="panel-footer">
<div class="row">
<div class="col col-xs-4">Page 1 of 5
</div>
<div class="col col-xs-8">
<ul class="pagination hidden-xs pull-right" id="myPager">
</ul>
<ul class="pagination visible-xs pull-right">
<li>«</li>
<li>»</li>
</ul>
</div>
<div class="col-md-12 text-center">
<ul class="pagination pagination-lg pager" id="myPager"></ul>
</div></div>
</div>
</div>
</div></div></div>
<div class="modal fade" id="editemp" tabindex="-1" role="dialog"
aria-labelledby="edit" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
<h4 class="modal-title custom_align" id="Heading">Employee
Details</h4>
</div>
<form:form id = "regForm" action="registerEmp" modelAttribute="empreg">
<div class="modal-body">
<form:hidden path="empid" id="empid"/>
<div class="form-group">
<label class="control-label" for="firstname">Name</label>
<!-- <label>First Name</label> -->
<form:input path="firstname" id="firstname" class="form-control " type="text"></form:input>
</div>
<div class="form-group">
<label class=" control-label" for="lastname">Last Name</label>
<form:input path="lastname" id="lastname" class="form-control " type="text"></form:input>
</div>
<div class="form-group">
<label class=" control-label" for="address">Address</label>
<!-- <label>Address</label> -->
<form:textarea path="address" id="address" class="form-control " placeholder="Enter Address" type="text"></form:textarea>
</div>
<div class="form-group">
<label>Country</label>
<form:select path="country" id="country" class="form-control" placeholder="Select your country">
<form:option value="select">Select Your Country</form:option>
<form:option value="India">India</form:option>
<form:option value="USA">USA</form:option>
<form:option value="Australia">Australia</form:option>
<form:option value="England">England</form:option>
<form:option value="Germany">Germany</form:option>
<form:option value="China">China</form:option>
<form:option value="Pakistan">Pakistan</form:option>
</form:select>
</div>
<div class="form-group">
<label class="control-label" for="gender">Gender</label>
<div class="">
<label class="radio-inline" for="gender-0"> <form:radiobutton
path="gender" name="gender" id="gender-0" value="Male" />
Male
</label> <label class="radio-inline" for="gender-1"> <form:radiobutton
path="gender" name="gender" id="gender-1" value="Female" />
Female
</label>
</div>
</div>
<div class="form-group">
<label>Date of Birth</label>
<form:input path="dob" id="dob" class="form-control " placeholder="Enter Date of Birth" type="date"></form:input>
</div>
<div class="form-group">
<label>Contact</label>
<form:input path="contact" id="contact" class="form-control " placeholder="Enter Mobile/phone number" type="text"></form:input>
</div>
<div class="form-group">
<label>Email Address</label>
<form:input path="Email" id="email" class="form-control " placeholder="xyz#abc.com" type="text"></form:input>
<div class="form-group">
</div>
<div class="form-group">
<label>Education</label>
<form:input path="education" id="education" class="form-control " placeholder="Enter highest education" type="text"></form:input>
</div>
</div>
<div class="form-group">
<label>Username</label>
<form:input path="username" id="username" class="form-control " placeholder="Enter username" type="text"></form:input>
</div><br><br>
<div class="form-group">
<label>Password</label>
<form:password path="password" id="password" class="form-control " placeholder="Enter password" ></form:password>
</div>
<div class="modal-footer ">
<button type="submit" class="btn btn-warning btn-lg"
style="width: 100%;">
<span class="glyphicon glyphicon-ok-sign"></span> Update
</button>
</div>
</form:form>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</div>
<div class="modal fade" id="delemp" tabindex="-1" role="dialog"
aria-labelledby="edit" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
<h4 class="modal-title custom_align" id="Heading">Delete this
entry</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger">
<span class="glyphicon glyphicon-warning-sign"></span> Are you
sure you want to delete this Record?
</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-success">
<span class="glyphicon glyphicon-ok-sign"></span> Yes
</button>
<button type="button" class="btn btn-default" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span> No
</button>
</div>
</div>
<!-- /.modal-content -->
</div>

table modal won't read any other rows reactjs

I have a problem it only reads the first row item, i dont know why it does that.. how can i use foreach loop for this... or any kind of code so it will work because it doesn't read any other row besides the first one im so confused because I haven't done reactjs before
PS: the data came from an api from asp.net...
you can check the image here
renderItem(d, i) {
debugger
return <tr key={i} >
<td> {d.Employee_ID} </td>
<td>{d.Employee_Name}</td>
<td>{d.Address}</td>
<td><center>
<button className ="btn btn-info" onClick={() => this.props.onClick(i) } data-toggle="modal" data-target="#UpdateEmployee">Edit</button></center></td>
<td><center><button className ="btn btn-danger">Delete</button></center></td>
<div className="modal fade" id="UpdateEmployee" role="dialog">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal">×</button>
<h4 className="modal-title">Update Employee</h4>
</div>
<div className="container">
<div className="modal-body">
<table>
<tbody>
<tr>
<td>Name</td>
<td> <input type="text"value={d.Employee_Name} /> </td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" value={d.Address} /> </td>
</tr>
</tbody>
</table>
</div>
</div>
<div className="modal-footer">
<botton className="btn btn-info"> Update Employee</botton>
<button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</tr>
}

import React from 'react';
import 'whatwg-fetch';
export default class employee extends React.Component {
constructor() {
super();
this.state = { jsonReturnedValue: [] }
}
renderItem(d, i) {
debugger
return <tr key={i} >
<td> {d.Employee_ID} </td>
<td>{d.Employee_Name}</td>
<td>{d.Address }</td>
<td><center><button className ="btn btn-info" onClick={() => this.props.onClick(i) } data-toggle="modal" data-target="#UpdateEmployee">Edit</button></center></td>
<td><center><button className ="btn btn-danger">Delete</button></center></td>
<div className="modal fade" id="UpdateEmployee" role="dialog">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal">×</button>
<h4 className="modal-title">Update Employee</h4>
</div>
<div className="container">
<div className="modal-body">
<table>
<tbody>
<tr>
<td>Name</td>
<td> <input type="text"value={d.Employee_Name} /> </td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" value={d.Address} /> </td>
</tr>
</tbody>
</table>
</div>
</div>
<div className="modal-footer">
<botton className="btn btn-info"> Update Employee</botton>
<button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</tr>
}
componentDidMount() {
fetch('http://localhost:5118/api/employeedetails/getemployeedetails')
.then((response) => {
return response.json()})
.then((json) => {
this.setState({jsonReturnedValue : json});
});
}
render() {
let {jsonReturnedValue} = this.state;
return(
<div>
<div className="container">
<h1> Listof Employees </h1>
<button className ='btn btn-warning right ' data-toggle="modal" data-target="#AddEmployee"> Add an Employee</button>
<table className= "table table-bordered">
<tbody>
<tr>
<th>ID</th>
<th>Name</th>
<th>Address</th>
<th>Update</th>
<th>Delete</th>
</tr>
{jsonReturnedValue.map((d,i) => this.renderItem(d,i))}
</tbody>
</table>
</div>
{/*Adding*/}
<div className="modal fade" id="AddEmployee" role="dialog">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal">×</button>
<h4 className="modal-title">Add New Employee</h4>
</div>
<div className="container">
<div className="modal-body">
<table>
<tbody>
<tr>
<td>Name</td>
<td>
<input type="text"
name={this.props.Employee_Name}
className="EmployeeDetails"
value={this.props.value}
onChange={this.props.handleChange}/>
</td>
</tr>
<tr>
<td>Address</td>
<td>
<input type="text"
name={this.props.address}
className="EmployeeDetails"
value={this.props.value}
onChange={this.props.handleChange}/>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div className="modal-footer">
<botton className="btn btn-info" onClick = {this.save}> Add Employee</botton>
<button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
);
}
}`

I think something like this should work
import React from 'react';
import 'whatwg-fetch';
export default class employee extends React.Component {
let index = -1;
constructor() {
super();
this.state = { jsonReturnedValue: [] ,
name: '',
address: ''
}
}
renderItem(d, i) {
debugger
index++;
let name = d.Employee_Name;
let address = d.Address;
return <tr key={i} >
<td> {d.Employee_ID} </td>
<td>{d.Employee_Name}</td>
<td>{d.Address }</td>
<td><center><button className ="btn btn-info" onClick={() => this.props.onClick(i) } data-toggle="modal" data-target="#UpdateEmployee">Edit</button></center></td>
<td><center><button className ="btn btn-danger">Delete</button></center></td>
<div className="modal fade" id="UpdateEmployee" role="dialog">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal">×</button>
<h4 className="modal-title">Update Employee</h4>
</div>
<div className="container">
<div className="modal-body">
<table>
<tbody>
<tr>
<td>Name</td>
<td> <input type="text"value={this.state.jsonReturnedValue[index].Employee_Name} /> </td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" value={this.state.jsonReturnedValue[index].Address} /> </td>
</tr>
</tbody>
</table>
</div>
</div>
<div className="modal-footer">
<botton className="btn btn-info"> Update Employee</botton>
<button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</tr>
}
componentDidMount() {
fetch('http://localhost:5118/api/employeedetails/getemployeedetails')
.then((response) => {
return response.json()})
.then((json) => {
this.setState({jsonReturnedValue : json});
});
}
render() {
let {jsonReturnedValue} = this.state;
return(
<div>
<div className="container">
<h1> Listof Employees </h1>
<button className ='btn btn-warning right ' data-toggle="modal" data-target="#AddEmployee"> Add an Employee</button>
<table className= "table table-bordered">
<tbody>
<tr>
<th>ID</th>
<th>Name</th>
<th>Address</th>
<th>Update</th>
<th>Delete</th>
</tr>
{jsonReturnedValue.map((d,i) => this.renderItem(d,i))}
</tbody>
</table>
</div>
{/*Adding*/}
<div className="modal fade" id="AddEmployee" role="dialog">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal">×</button>
<h4 className="modal-title">Add New Employee</h4>
</div>
<div className="container">
<div className="modal-body">
<table>
<tbody>
<tr>
<td>Name</td>
<td>
<input type="text"
name={this.props.Employee_Name}
className="EmployeeDetails"
value={this.props.value}
onChange={this.props.handleChange}/>
</td>
</tr>
<tr>
<td>Address</td>
<td>
<input type="text"
name={this.props.address}
className="EmployeeDetails"
value={this.props.value}
onChange={this.props.handleChange}/>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div className="modal-footer">
<botton className="btn btn-info" onClick = {this.save}> Add Employee</botton>
<button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
);
}
}

Resources