I've built my application on Bootstrap 4 and I've used Bootstrap-Table and Bootstrap-DateTime picker plugins. All worked fine till I decided to include Bootstrap-Select. Then the display went crazy.
By digging a bit, I notice that bootstrap.min.css was causing the problem (I can't yet speak for others files).
Wether I use the version (bootstrap-3.3.7) provided with Bootstrap-Select or the original I've been using so far that came with Bootstrap 4.
Below you'll see the rendering of both css files.
Rendering and issue with css from bootstrap-3.3.7 - Active tab does not display content until clicked on; controls are out of their canvas and characters are smaller:
Rendering and issue with css from bootstrap 4 - Select box does not display options, but characters rendering is correct:
At last here is my html file:
//**** NE FONCTIONNE PAS SI MIS DANS LE SECTION $(document).ready(function () {} ****
$('#table').bootstrapTable({
url: 'GetListeDemandeurs',
locale: 'fr-CA',
pagination: true,
paginationLoop: true,
search: true,
clickToSelect: true,
singleSelect: true,
sortable: true,
sortOrder: 'asc',
idField: 'Code_Demandeur',
sortName: 'Code_Demandeur',
});
var $table = $('#table');
//**** FIN SECTION NON FONCTIONNELLE ****
//**** Instance de la Bootstrap-DateTime picker ****
$('.form_date').datetimepicker({
language: 'fr',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0
});
//**** FIN Bootstrap-DateTime picker ****
$(document).ready(function () {
var enregChoisi = null;
$(function () {
//**** Action click de la ligne ****
$table.on('click-row.bs.table', function (e, row, $element) { //**** SECTION MISE EN COMMENTAIRE: BOUTON NE FONCTIONNE PAS ****
$('.success').removeClass('success');
$($element).addClass('success');
//**** On encapsule la ligne choisie ****
var index = $table.find('tr.success').data('index');
enregChoisi = $table.bootstrapTable('getData')[index];
//**** Active les boutons modifier et supprimer a la selection d'une ligne ****
document.getElementById('btnModif').disabled = false;
document.getElementById('btnSupp').disabled = false;
});
});
});
<!DOCTYPE html>
<html>
<head>
#{
ViewBag.Title = "Demandeurs (Liste des)";
}
<title></title>
#* ========================================= *#
#* **** Required meta tags **** *#
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
#* **** END required meta tags **** *#
<script src="~/Scripts/jquery-3.3.1.min.js"></script> #**** Version de JQUERY **** *#
#* **** Bootstrap-Select **** *#
<script src="~/Scripts/umd/popper.min.js"></script>
#*<script src="~/Scripts/jquery-3.3.1.min.js"></script>*#
<script src="~/Scripts/bootstrap-3.3.7/js/bootstrap.min.js"></script>
<link href="~/Scripts/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="~/Content/bootstrap-select.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="~/Scripts/bootstrap-select.min.js"></script>
<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="~/Scripts/i18n/defaults-fr_FR.min.js"></script>
#* **** FIN **** *#
#* **** Bootstrap, Bootstrap-Table **** *#
#* **** MIS EN COMMENTAIRE CAR CRÉE UN AFFICHAGE TRÈS PETIT DES COOLES BOOTSTRAPS
<link rel="stylesheet" href="~/Content/bootstrap.css"> **** *#
<link href="~/Content/bootstrap-table.css" rel="stylesheet" />
<script src="~/Scripts/bootstrap-table/bootstrap-table.js"></script>
<script src="~/Scripts/bootstrap-table/locale/bootstrap-table-fr-FR.min.js"></script>
#* **** FIN référence **** *#
#* **** Bootstrap-DateTime picker **** *#
<link href="~/Content/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
#* **** FIN référence **** *#
#* **** Font-Awesome **** *#
<link href="~/css/font-awesome.min.css" rel="stylesheet">
#* **** FIN référence **** *#
#* *************** DivTable.com ou astérisque aux champs obligatoires ***************** *#
<link rel="stylesheet" href="~/Content/css/css_custom/DivTable.css" />
#* *************** Fin DivTable.com ***************** *#
#* *************** Fonctions communes ***************** *#
<script src="~/Scripts/CustomJS/Fonctions_Communes.js"></script>
#* *************** Fin ***************** *#
</head>
<body>
#* ====================== SECTION COLONNE DU BOOTSTRAP-TABLE ====================== *#
<div class="container" id="divGrille" style="border:1px solid #cecece; background-color: Snow">
<table id="table">
<thead>
<tr>
<th data-field="state" data-radio="true" data-sortable="false" data-searchable="false" data-formatter="stateFormatter"></th>
<th data-field="Code_Demandeur" data-sortable="true" data-searchable="true">Code<i class="fa fa-fw fa-sort"></i></th>
<th data-field="Nom_Demandeur" data-sortable="true" data-searchable="true">Nom<i class="fa fa-fw fa-sort"></i></th>
<th data-field="Prenoms_Demandeur" data-sortable="true" data-searchable="true">Prénoms<i class="fa fa-fw fa-sort"></i></th>
<th data-field="Date_Naissance_Demandeur" data-sortable="true" data-searchable="true" data-align="right" data-formatter="dateFormat">
Date de naissance<i class="fa fa-fw fa-sort"></i>
</th>
<th data-field="Nom_Sexe" data-sortable="true" data-searchable="true">Sexe<i class="fa fa-fw fa-sort"></i></th>
<th data-field="Adresse_Demandeur" data-sortable="true" data-searchable="true">Adresse<i class="fa fa-fw fa-sort"></i></th>
<th data-field="Nom_Ville" data-sortable="true" data-searchable="true">Ville<i class="fa fa-fw fa-sort"></i></th>
<th data-field="Nom_Province" data-sortable="true" data-searchable="true">Province<i class="fa fa-fw fa-sort"></i></th>
<th data-field="CodePostal_Demandeur" data-sortable="true" data-searchable="true">CP<i class="fa fa-fw fa-sort"></i></th>
<th data-field="Tel1_Demandeur" data-sortable="true" data-searchable="true">Téléphone 1<i class="fa fa-fw fa-sort"></i></th>
<th data-field="Tel2_Demandeur" data-sortable="true" data-searchable="true">Téléphone 2<i class="fa fa-fw fa-sort"></i></th>
<th data-field="Tel3_Demandeur" data-sortable="true" data-searchable="true">Fax<i class="fa fa-fw fa-sort"></i></th>
<th data-field="Courriel1_Demandeur" data-sortable="true" data-searchable="true">Courriel 1<i class="fa fa-fw fa-sort"></i></th>
<th data-field="Courriel2_Demandeur" data-sortable="true" data-searchable="true">Courriel 2<i class="fa fa-fw fa-sort"></i></th>
<th data-field="Courriel3_Demandeur" data-sortable="true" data-searchable="true">Courriel 3<i class="fa fa-fw fa-sort"></i></th>
<th data-field="Nom_SituationMatrimoniale" data-sortable="true" data-searchable="true">Situation matrimoniale<i class="fa fa-fw fa-sort"></i></th>
<th data-field="Date_Ouverture_Dossier" data-sortable="true" data-searchable="true" data-align="right" data-formatter="dateFormat">
Date d'ouverture du dossier<i class="fa fa-fw fa-sort"></i>
</th>
<th data-field="Date_Cloture_Dossier" data-sortable="true" data-searchable="true" data-align="right" data-formatter="dateFormat">
Date de cloture du dossier<i class="fa fa-fw fa-sort"></i>
</th>
<th data-field="Nom_TrancheRevenu" data-sortable="true" data-searchable="true">Tranche de revenu<i class="fa fa-fw fa-sort"></i></th>
<th data-field="Nom_Occupation" data-sortable="true" data-searchable="true">Occupation<i class="fa fa-fw fa-sort"></i></th>
<th data-field="Nom_StatutLegal" data-sortable="true" data-searchable="true">Statut légall<i class="fa fa-fw fa-sort"></i></th>
<th data-field="Nom_Scolarite" data-sortable="true" data-searchable="true">Scolarité<i class="fa fa-fw fa-sort"></i></th>
<th data-field="Nom_Communaute" data-sortable="true" data-searchable="true">Communauté<i class="fa fa-fw fa-sort"></i></th>
<th data-field="Nom_SourceInformation" data-sortable="true" data-searchable="true">Source d'information<i class="fa fa-fw fa-sort"></i></th>
<th data-field="Cons" data-sortable="true" data-searchable="true">Conseiller<i class="fa fa-fw fa-sort"></i></th>
<th data-field="Handicape" data-sortable="false" data-searchable="false" data-align="center" data-formatter="ticksFormatter">
Handicapé?<i class="fa fa-fw fa-sort"></i>
</th>
<th data-field="Reference" data-sortable="true" data-searchable="true">Référence<i class="fa fa-fw fa-sort"></i></th>
<th data-field="Remarques_Demandeur" data-sortable="false" data-searchable="true">Remarques<i class="fa fa-fw fa-sort"></i></th>
<th data-field="Actif_Inactif" data-sortable="false" data-searchable="false" data-align="center" data-formatter="ticksFormatter">Actif / Inactif</th>
<th data-field="Dte_Saisie" data-sortable="true" data-searchable="false" data-align="right" data-formatter="dateFormat">Date de saisie <i class="fa fa-fw fa-sort"></i></th>
<th data-field="UserName" data-sortable="false" data-searchable="false">Utilisateur</th>
</tr>
</thead>
</table>
</div>
#* ====================== SECTION MODALE ====================== *#
<div class="bs-example" style="margin-top: 10px">
<!-- **** Boutons pour lancer le Modal **** -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#fenModAdm_Demandeurs" data-title="Ajouter">Ajouter</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#fenModAdm_Demandeurs" data-title="Modifier" id="btnModif" disabled>Modifier</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#fenModAdm_Demandeurs" data-title="Supprimer" id="btnSupp" disabled>Supprimer</button>
<!-- Modal HTML -->
<div id="fenModAdm_Demandeurs" class="modal fade" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal Window</h4>
</div>
<div class="modal-body">
<form role="form" id="form_Demandeurs">
<table style="width:100%">
<tr>
<td>
<div class="form-group">
<label for="txt_Code_Demandeur" class="control-label">Code:</label>
<input type="text" class="form-control" id="txt_Code_Demandeur" placeholder="Code" />
</div>
</td>
<td>
<div class="form-group required-field">
<label for="txt_Nom_Demandeur" class="control-label">Nom:</label>
<input type="text" class="form-control" id="txt_Nom_Demandeur" placeholder="Nom" onblur="TrimAndReplaceDoubleSpace(this)" autofocus />
</div>
</td>
<td>
<div class="form-group required-field">
<label for="txt_Prenoms_Demandeur" class="control-label">Prénoms:</label>
<input type="text" class="form-control" id="txt_Prenoms_Demandeur" placeholder="Prénoms" onblur="TrimAndReplaceDoubleSpace(this)" />
</div>
</td>
</tr>
</table>
#* *************** Onglets à l'intérieur du modal ****************** *#
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="contacts-tab" data-toggle="tab" href="#ongletContacts_Ddeurs"
role="tab" aria-controls="ongletContacts_Ddeurs" aria-selected="true">Contacts</a>
</li>
<li class="nav-item">
<a class="nav-link" id="EtatCivil-tab" data-toggle="tab" href="#ongletEtatCivil_Ddeurs"
role="tab" aria-controls="ongletEtatCivil_Ddeurs" aria-selected="false">État civil</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
#* ******** Onglet 1 "Contact": adresse géographique, courriel, téléphone... ***************** *#
<div class="tab-pane fade show active" id="ongletContacts_Ddeurs" role="tabpanel" aria-labelledby="contacts-tab">
<div style="border: solid 1px yellow; margin-top: 5px; padding: 5px 2px 10px 2px; ">
<table style="width:100%">
<tr>
<td colspan="3">
<div class="form-group">
<label for="txt_Adresse_Demandeur" class="control-label">Adresse:</label>
<input type="text" class="form-control" id="txt_Adresse_Demandeur" placeholder="Numéro, Rue"
onblur="TrimAndReplaceDoubleSpace(this)" />
</div>
</td>
</tr>
<tr>
<td>
<div class="form-group">
<label for="cbx_Ville" class="control-label">Ville:</label>
<input type="text" class="form-control" id="cbx_Ville" placeholder="Ville" />
</div>
</td>
<td>
<div class="form-group">
<label for="cbx_Province" class="control-label">Province:</label>
<input type="text" class="form-control" id="cbx_Province" placeholder="Province" />
</div>
</td>
<td>
<div class="form-group">
<label for="txt_CodePostal_Demandeur" class="control-label">CodePostal:</label>
<input type="text" class="form-control" id="txt_CodePostal_Demandeur" placeholder="Code Postal"
style="text-transform: uppercase" maxlength="7" onblur="TrimAndReplaceDoubleSpace(this)" />
</div>
</td>
</tr>
</table>
</div>
</div>
#* **** Onglet 2 "état civil": Sexe, Date de naissance, Langue maternelle... *#
<div class="tab-pane fade" id="ongletEtatCivil_Ddeurs" role="tabpanel" aria-labelledby="EtatCivil-tab">
<div style="border: solid 1px blue; margin-top: 5px; padding: 5px 2px 10px 2px; ">
<table style="width:100%">
<tr>
<td>
<div class="form-group required-field">
<label for="dte_Date_Naissance_Demandeur" class="control-label">Date de Naissance:</label>
#* **** Bootstrap-DateTime picker **** *#
<div class="input-group date form_date" data-date="" data-date-format="dd MM yyyy"
data-link-field="dte_Date_Naissance_Demandeur_Hidden" data-link-format="yyyy-mm-dd">
<input class="form-control" id="dte_Date_Naissance_Demandeur" size="16" type="text" value="" style="text-align:right;" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="hidden" id="dte_Date_Naissance_Demandeur_Hidden" value="" /><br />
</div>
#* **** FIN Bootstrap-DateTime picker **** *#
</div>
</td>
<td>
<div class="form-group">
<label for="cbx_Sexe" class="control-label">Sexe:</label>
<select class="selectpicker" id="cbx_Sexe">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>
</td>
<td>
<div class="form-group">
<label for="cbx_SituationMatrimoniale" class="control-label">Situation Matrimoniale:</label>
<input type="text" class="form-control" id="cbx_SituationMatrimoniale" placeholder="Situation Matrimoniale" />
</div>
</td>
</tr>
</table>
</div>
</div>
...
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" id="btnAnnuler">Annuler</button>
<button type="button" class="btn btn-primary" id="btnSauver" value="Sauvegarder"
onclick="CreateUpdateDelete_MenuAdmin(document.getElementById('form_Demandeurs'),
document.getElementById('btnSauver'))"></button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I managed to make the whole thing work.
Below is how the head of my HTML looks like:
<script src="~/Scripts/jquery-3.3.1.min.js"></script> #**** Version de JQUERY utilisée **** *#
#* **** Référence Font-Awesome **** *#
<link href="~/css/font-awesome.min.css" rel="stylesheet">
#* **** FIN référence **** *#
#* **** Référence Bootstrap-Select menus déroulants CSS / js **** *#
<script src="~/Scripts/umd/popper.min.js"></script>
<script src="~/Scripts/bootstrap-3.3.7/js/bootstrap.min.js"></script>
<link href="~/Scripts/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="~/Content/bootstrap-select.min.css">
<script src="~/Scripts/bootstrap-select.min.js"></script>
<script src="~/Scripts/i18n/defaults-fr_FR.min.js"></script>
#* **** FIN référence **** *#
#* **** Référence Bootstrap, Bootstrap-Table CSS / js **** *#
<link href="~/Content/bootstrap-table.css" rel="stylesheet" />
<script src="~/Scripts/bootstrap-table/bootstrap-table.js"></script>
<script src="~/Scripts/bootstrap-table/locale/bootstrap-table-fr-FR.min.js"></script>
#* **** FIN référence **** *#
#* **** Référence Bootstrap, Bootstrap-DateTime picker CSS / js **** *#
<script type="text/javascript" src="~/Scripts/bootstrap-datetimepicker/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="~/Scripts/bootstrap-datetimepicker/locales/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script>
<link href="~/Content/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
#* **** FIN référence **** *#
In the body, I have removed some tags and ready to continue.
Related
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">
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 ....
Good Afternoon,
I'm having a problem trying to get my font awesome icons to work as expected, I have a shopping cart where hardware can be ordered, an address field is provided for each item so the user can send hardware to different locations, as each location is provided I want the icon to change from a cross to a tick, I'm using AngluarJS form validation:
Problem I have is the icon only changes when the last address is entered, I'm sure I need to use an $index or something like it but can't figure it out:
Here is my code...
<table id="cart" class="table table-hover table-condensed">
<thead>
<tr>
<th style="width:55%;">${Product} </th>
<th style="width: 1%;">${Quantity}</th>
<th style="width: 24%;">${Delivery Address:}</th>
<th style="width: 1%;"></th>
<th style="width: 19%;"><span style="visibility: hidden;">${Item Controls}</span></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in c.data.cartItems track by item.sys_id | orderBy: 'order'">
<td data-th="Product">
<div class="row">
<div class="col-sm-2 visible-lg"><img ng-show="item.picture" ng-src="{{item.picture}}" alt="{{item.name}}" class="img-responsive item-image"/></div>
<div class="col-sm-10">
<h2 class="nomargin h4">{{item.name}}</h2>
<p class="hidden-xs">{{item.short_description}}</p>
{{item.sys_id}}
</div>
</div>
</td>
<td data-th="Quantity">
<input type="number"
title="${Quantity}"
ng-if="item.show_quantity"
class="form-control text-center"
ng-model="item.quantity"
min="1"
max="20"
ng-model-options="{ updateOn: 'blur' }"
ng-change="c.updateQuantity(item)">
<span ng-if="!item.show_quantity">-</span>
</td>
<td>
<select ng-model="address" name="address" ng-options="address.value for address in data.userAddress | filter:{u_active_address:'true'} track by address.value"
ng-change="c.updateAddress(item.quantity, item.sys_id, address.value, $index, item)"
id="address" class="dropdown pull-right" style="height: 30px;">
</select>
</td>
<td>
<i ng-show="myForm.address.$dirty" class="fa fa-check-circle" style="color:#008000;">{{myForm.address.$dirty}}</i>
<i ng-show="myForm.address.$pristine" class="fa fa-exclamation-circle" style="color:#FF6347;">{{myForm.address.$pristine}}</i>
</td>
<td class="col-md-12 text-right">
<button title="Edit" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal" aria-label="${Edit Item} {{item.name}}" ng-show="item.has_options" ng-click="c.editItem(item.sys_id)"><i class="fa fa-edit"></i></button>
<button title="Remove" class="btn btn-danger btn-sm" aria-label="${Remove Item From Cart} {{item.name}}" ng-click="c.removeItem($event, item)"><i class="fa fa-trash"></i></button>
</td>
</tr>
</tbody>
</table>
Lines of interest:
<select ng-model="address" name="address" ng-options="address.value for address in data.userAddress | filter:{u_active_address:'true'} track by address.value"
ng-change="c.updateAddress(item.quantity, item.sys_id, address.value, $index, item)"
id="address" class="dropdown pull-right" style="height: 30px;">
</select>
<td>
<i ng-show="myForm.address.$dirty" class="fa fa-check-circle" style="color:#008000;">{{myForm.address.$dirty}}</i>
<i ng-show="myForm.address.$pristine" class="fa fa-exclamation-circle" style="color:#FF6347;">{{myForm.address.$pristine}}</i>
</td>
Images Attached:
Cart OnLoad
Last Address Changed
Any help and I would be grateful
Found the solution here:
How to validate inputs dynamically created using ng-repeat, ng-show (angular)
Updated Code:
<td>
<select ng-model="address" name="address{{$index}}" ng-options="address.value for address in data.userAddress | filter:{u_active_address:'true'} track by address.value"
ng-change="c.updateAddress(item.quantity, item.sys_id, address.value, $index)"
id="address" class="dropdown pull-right" style="height: 30px;">
</select>
</td>
<td>
<i ng-show="myForm['address' + $index].$dirty" class="fa fa-check-circle" style="color:#008000;"> {{myForm.address.$dirty}}{{fieldUpdated}}</i>
<i ng-show="myForm['address' + $index].$pristine" class="fa fa-exclamation-circle" style="color:#FF6347;"> {{myForm.address.$pristine}}</i>
</td>
I am working on one page checkout system in asp.net core I am using a partial view for each the stages of course I no you can just use below, but I want to load the partial view on button click of checkout it will show stage 2 etc and hide stage 1. I no the question may have been ask before but I am using the new asp.net core and was wondering what is the best practise for it.
#Html.Partial("_checkoutStage1.cshtml");
#Html.Partial("_checkoutStage2.cshtml") ;
Which will render a partrial view but what I want to be able to do is click a button to show stage two.
I found a bit of javascript and tried it with this being in my main view
<script type="text/javascript">
$("#loadPartialView").click(function () {
$.get('#Url.Action("LoadStage2", "Basket")', {}, function (response) {
$("#Display").html(response);
});
});
</script>
My Button
<button id="search" class="btn btn-success">Checkout <span class="glyphicon glyphicon-play"></span>
</button>
My Controller which is in my basket controller. Another question I have can you move the partial views to another directory or is ~/views/basket/ _ underscore prefix the correct naming convention for partial views.
public ActionResult LoadStage2(string searchText)
{
return PartialView("~/Views/Basket/_checkoutStage2.cshtml");
}
Head of my layout page
<head>
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
<environment names="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
</head>
Can someone help me out with this obv we dont want the page to refresh so I need to place it in a div on the button click.
My Index.cshtml based on basket layout
#model List<solitudedccore.models.basket.basketlines>
#{
ViewData["Title"] = "Index";
Layout = "~/Views/Shared/_BasketLayout.cshtml";
}
<head>
<script type="text/javascript">
$("#checkout").click(function () {
$.get('#Url.Action("LoadStage2", "Basket")', {}, function (response) {
$("#Display").html(response);
});
});
</script>
</head>
#Html.Partial("_checkoutStage1.cshtml");
<div id="Display"></div>
Full basketlayout
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
<environment names="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</environment>
<script>
</script>
</head>
<body>
#RenderBody()
</body>
</html>
Checkout stage 1 includes the button which I want to load stage 2 from it might be my misunderstanding of page cycle coming from 15 years of web forms.
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-10 col-md-offset-1">
<table class="table table-hover">
<thead>
<tr>
<th>Product</th>
<th>Quantity</th>
<th class="text-center">Price</th>
<th class="text-center">Total</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-8 col-md-6">
<div class="media">
<a class="thumbnail pull-left" href="#"> <img class="media-object" src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-2/72/product-icon.png" style="width: 72px; height: 72px;"> </a>
<div class="media-body">
<h4 class="media-heading">Product name</h4>
<h5 class="media-heading"> by Brand name</h5>
<span>Status: </span><span class="text-success"><strong>In Stock</strong></span>
</div>
</div>
</td>
<td class="col-sm-1 col-md-1" style="text-align: center">
<input type="email" class="form-control" id="exampleInputEmail1" value="3">
</td>
<td class="col-sm-1 col-md-1 text-center"><strong>$4.87</strong></td>
<td class="col-sm-1 col-md-1 text-center"><strong>$14.61</strong></td>
<td class="col-sm-1 col-md-1">
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-remove"></span> Remove
</button>
</td>
</tr>
<tr>
<td class="col-md-6">
<div class="media">
<a class="thumbnail pull-left" href="#"> <img class="media-object" src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-2/72/product-icon.png" style="width: 72px; height: 72px;"> </a>
<div class="media-body">
<h4 class="media-heading">Product name</h4>
<h5 class="media-heading"> by Brand name</h5>
<span>Status: </span><span class="text-warning"><strong>Leaves warehouse in 2 - 3 weeks</strong></span>
</div>
</div>
</td>
<td class="col-md-1" style="text-align: center">
<input type="email" class="form-control" id="exampleInputEmail1" value="2">
</td>
<td class="col-md-1 text-center"><strong>$4.99</strong></td>
<td class="col-md-1 text-center"><strong>$9.98</strong></td>
<td class="col-md-1">
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-remove"></span> Remove
</button>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><h5>Subtotal</h5></td>
<td class="text-right"><h5><strong>$24.59</strong></h5></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><h5>Estimated shipping</h5></td>
<td class="text-right"><h5><strong>$6.94</strong></h5></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><h3>Total</h3></td>
<td class="text-right"><h3><strong>$31.53</strong></h3></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-shopping-cart"></span> Continue Shopping
</button>
</td>
<td>
<button id="checkout" class="btn btn-success">Checkout <span class="glyphicon glyphicon-play"></span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="detailsDiv" class="detailsDiv"></div>
At first glance, if you want to show Stage 2 by clicking on the button, your click listener would need to be bound to the $('#search') button. In your code you are binding a click event to $('#loadPartialView'), which you don't show anywhere.
You also need to do a bit of debugging to see exactly where the issue is. You've posted some code, but you don't indicate what exactly is happening with the current code. Does the partial view get returned through the get successfully? Is the click listener firing?
You could put a breakpoint on the line
$("#Display").html(response);
and see if response has any contents. Presumably they should be HTML.
Regarding your second question about naming conventions of partial views. Typically if a partial view is used across controllers, I put it in /Shared. But if it is only used within one controller (seems like your case) putting the partial within the controller folder is fine. Yes, the _ is the proper convention for naming partials.
I am using Twitter Bootstrap to make a quantity control functionality for my website. As you can see in the Code Snippet below, I want to have my text input of this control at 38px wide. Everything works fine when my table's cell is lower than 38px wide. But when I put something bigger (like a title) my quantity control brakes into parts!
So, my question is: How to zero the distance between the bootstrap input text and the button?
I want to achieve this, regardless of the length of the cell:
.quantity-style {
text-align: center;
min-width: 38px;
max-width: 38px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<table border="1" style="margin-left: 50px; margin-top: 50px;">
<tr>
<td style="padding: 10px;">
Hello - This is a test with big title
</td>
</tr>
<tr>
<td style="padding: 10px;">
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number btn-sm" disabled="disabled" data-type="minus" data-field="quant[2]">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<input type="text" name="quant[2]" class="form-control input-number input-sm quantity-style" value="0" min="0" max="15">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number btn-sm" data-type="plus" data-field="quant[2]">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</td>
</tr>
</table>
I added a new class quantity-wrapper to the parent of all 3 elements [ - | 0 | + ]
Then set the style to the desired width of 38px
Check it out:
.quantity-style{
text-align: center;
min-width: 38px;
max-width: 38px;
}
.quantity-wrapper{
width: 38px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<table border="1" style="margin-left: 50px; margin-top: 50px;">
<tr>
<td style="padding: 10px;">
Hello - This is a test with big title
</td>
</tr>
<tr>
<td style="padding: 10px;">
<div class="input-group quantity-wrapper">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number btn-sm" disabled="disabled" data-type="minus" data-field="quant[2]">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<input type="text" name="quant[2]" class="form-control input-number input-sm quantity-style" value="0" min="0" max="15">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number btn-sm" data-type="plus" data-field="quant[2]">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</td>
</tr>
</table>