here's my profile.js
profileContainer.innerHTML =
`
<div class="col-md-12">
<section class="jumbotron my-5">
<h3 class="text-center">First Name: ${data.firstName}</h3>
<h3 class="text-center">Last Name: ${data.lastName}</h3>
<h3 class="text-center">Email: ${data.email}</h3>
<h3 class="text-center">Contact Number: ${data.mobileNo}</h3>
<h3 class="mt-5">Class History</h3>
<table class="table">
<thead>
<tr>
<th> Course Name </th>
<th> Enrolled On </th>
<th> Status </th>
</tr>
</thead>
<tbody id="coursesContainer"></tbody>
</table>
</section>
</div>
`
and this is my profile.html
<main class="container my-5">
<div id="profileContainer" class="row">
<div class="col-md-12">
<section class="jumbotron text-center my-5">
<h2 class="my-5"><span class="spinner-border text-primary"></span> Fetching User
Details...</h2>
</section>
</div>
</div>
<!-- end row -->
</main>
This is the expected output:
profile
I tried changing the background color of the profile from gray to another color, but targeting the profileContainer through style.css only changes color of the outer border.. please help
if you want to update the whole page i.e overwrite the whole html code you need to add a button that initiates the page update event or you wont see any user interaction .
under tag add a button
<main class="container my-5">
<div id="profileContainer" class="row">
<div class="col-md-12">
<section class="jumbotron text-center my-5">
<h2 class="my-5"><span class="spinner-border text-primary"></span> Fetching User
Details...</h2>
<button onclick="myfunction()">click me</button>
</section>
</div>
</div>
<!-- end row -->
</main>
your JS code should be updated as
function myfunction() {
document.getElementById("profileContainer").innerHTML="<div class="col-md-12">
<section class="jumbotron my-5">
<h3 class="text-center">First Name: ${data.firstName}</h3>
<h3 class="text-center">Last Name: ${data.lastName}</h3>
<h3 class="text-center">Email: ${data.email}</h3>
<h3 class="text-center">Contact Number: ${data.mobileNo}</h3>
<h3 class="mt-5">Class History</h3>
<table class="table">
<thead>
<tr>
<th> Course Name </th>
<th> Enrolled On </th>
<th> Status </th>
</tr>
</thead>
<tbody id="coursesContainer"></tbody>
</table>
</section>
</div>" ; }
You can target classes or IDs specified within JS the same way you would any other HTML. Depending on the specific element on the page you're trying to style, you could try targeting .jumbotron
Without seeing what CSS already exists to know what elements styling is currently being applied to (i.e., which class the gray background and border radius are actually tied to), it's hard to provide specifics.
What basically we do is that we provide an id or class to the element. Try to do that and then code the css in the stylesheet. This is the easy and foremost way to get out of this rid.
You can select the HTML element that you want to change by giving it an ID and select by using the JavaScript property which is getelementbyid, and changing its inner HTML by using the innerhtml property.
Related
Currently, I have a table and page built using Bootstrap. Here is the code:
<div class="row my-2">
<div class="col-12 col-md-8">
<div class="d-md-flex justify-content-between">
<div>
<h1 class="text-uppercase">Clients</h1>
</div>
<div>
<input class="form-control-sm bg-dark text-light border-dark me-4" type="text" id="criteria" placeholder="Rechercher" onkeyup="showCustomers();">
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-8">
<table class="table table-dark table-borderless table-lines">
<thead>
<tr>
<th scope="col">Login</th>
<th scope="col">Num. Client</th>
<th scope="col">Date inscription</th>
<th scope="col">Dernier accès</th>
<th scope="col">Forfait</th>
<th scope="col">Crédit</th>
</tr>
</thead>
<tbody id="result">
<script>
showCustomers("xxx");
</script>
</tbody>
</table>
</div>
<div class="col-12 col-md-4">
<div id="customerInfos" class="collapse">
<p>Sélectionnez un client afin d'obtenir les détails et les paramètres associés.</p>
</div>
</div>
</div>
Here is my table loaded :
<tr class="clickable-row <?=$classeStatut?>" data-utiId="<?=$uti_id?>" onclick="showUtilisateur(this);">
<td data-label="Login">
<div class="d-flex justify-content-end justify-content-md-start">
<div>
<img class="me-2" src="<?=getPP($uti_login)?>" width="20"></img>
</div>
<div class="circle <?=$connectionStatus?> d-none d-md-block mt-2 me-1">
</div>
<div>
<?=mhe($uti_login)?>
</div>
<?php if ($uti_profil==1) { ?>
<div>
<i class="bi bi-shield-check mx-2 text-success"></i>
</div>
<?php } ?>
</div>
</td>
<td data-label="# Client"><?=mhe(POSTE_PREFIX . $uti_numposte)?></td>
<td data-label="Inscrit"><?=mhe(makeFRDate($uti_date_inscription))?></td>
<td data-label="Dernière co."><?=makeFRDate(mhe($uti_lastaccess))?></td>
<td data-label="Forfait"><?=mhe($for_nom)?></td>
<td data-label="Crédit"><span class="<?=$classCredit?>"><?=mhe($uti_credit)?> €</span></td>
</tr>
So when I click on a row of the table, the showUtilisateur() function will be executed and put some infos on the customerInfos div.
That works perfectly, but I want to improve the layout of the customerInfos div.
On small screens, currently I have to go to the bottom of the page to see the div
When I click on a row, I would like to open the div as a new view, and allow to return to the table view with a "back" button.
I'm not sure how to define this kind of layout.
Thanks for your suggestions
In your CSS, you'll want to separate out whatever you define as a "small screen" from larger screens, based on whatever width creates the problems for you. You'll be creating a manual breakpoint where you create a new CSS for it.
Let's say that you decide that a small screen is anything under 600px in width. At the top of your CSS page, write this:
#media screen and (min-width: 600px) {
Make sure to put the closing bracket at the bottom of your CSS
Next, below your closing bracket, type this:
#media screen and (max-width: 599px){
Copy and paste everything in your CSS above inside of those brackets. Then you can start changing the pieces that you need to change. (Make sure to put the closing bracket at the bottom of the CSS.)
With the manual breakpoints, you can define new formulas to adjust the view for your smaller screens. Hope that helps!
If a button in my HTML is clicked, it should search / find the next parent 'table' element and delete it completly. How can I do that? Please check JS to find out what I have already test it.
My HTML:
<table class="table table-bordered">
<!-- OTHER HTML CODE with div etc. DONT REMOVE/TOUCH THIS! -->
</table>
<table class="table table-bordered"> <!-- THIS table element should delete, if the button is clicked -->
<hr class="my-4 border-dark" id="hereWeGo">
<div class="row">
<div class="col-auto justify-content-around d-flex flex-column border">
<button type="button" class="remove btn btn-danger" id="RemoveBtn">Remove</button>
</div>
<div class="col border">
<B>Title...</B><br />
<hr class="my-1">
Link...
</div>
</div>
</table>
<table class="table table-bordered">
<!-- OTHER HTML CODE with div etc. DONT REMOVE/TOUCH THIS! -->
</table>
My JS:
$(document).on('click', '.remove', function() {
//$(this).parents('table').remove();
//alert("im here");
//$(this).parents('table').remove();
//alert($(this).parents('hr').html());
//$('div.row').remove();
// after this is run, it should remove the <table class="table table-bordered"> element....
});
Use closest:
$(this).closest("table").remove();
However, your HTML is not valid: table cannot have div or hr tags as direct children, and so the table is not really the parent of the button. Browsers "fix" the error, and move all those invalid child elements out of the table.
This solution will only work if you make your table structure valid HTML. So, no children of it should be div.
For instance:
$(document).on('click', '.remove', function() {
$(this).closest("table").remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<hr class="my-4 border-dark" id="hereWeGo">
<table class="table table-bordered"> <!-- THIS table element should delete, if the button is clicked -->
<tr class="row">
<td class="col-auto justify-content-around d-flex flex-column border">
<button type="button" class="remove btn btn-danger" id="RemoveBtn">Remove</button>
</td>
<td class="col border">
<B>Title...</B><br />
<hr class="my-1">
Link...
</td>
</tr>
</table>
What you are looking for is the JQuery closest() function.
I am trying to implement a table in my page. One of the values is rendering too big which looks odd in table cell. Is there any way I can utilize additional width of another <td> for a particular div (I don't want to use colspan for td). SO to achieve this I need to extend the width of that particular DIV. giving a div a width and display absolute property is a bad idea! What else should I do?
MY html-
<table>
<tr>
<th style="width:105px;">
<strong>Sr NO.</strong>
</th>
<th style="width:65px;">
<strong>Type</strong>
</th>
<th style="width:165px;">
<strong>Classification</strong>
</th>
<th style="width:80px;">
<strong>Book No</strong>
</th>
<th>
<strong>Agency</strong>
</th>
<th>
<strong>Date</strong>
</th>
</tr>
<tr ng-repeat="request in msc.minutesData">
<td>
<div class="minutes-subject-container">
<div class="p-t-xs">
{{request.id}}
</div>
<div class="flex-container">
<div class="minutes-info--subrow-subject" style="width:105px">
<label>subject</label>
<div class="minutes-info--subject">
<span>
{{request.subject}}
</span>
</div>
</div>
</div>
</div>
</td>
<td>
<div class="p-t-xs">
{{request.type}}
</div>
</td>
<td>
<div class="minutes-desc-container">
<div class="p-t-xs">
{{request.classification}}
</div>
<div class="flex-container">
<div class="minutes-info--subrow-desc" style="width:165px">
<label>Description</label>
<div class="minutes-info--descriptiopn">
<span>
{{request.description}}
</span>
</div>
</div>
</div>
</div>
</td>
<td>
<div class="p-t-xs">
{{request.bookNo}}
</div>
</td>
<td>
<div class="p-t-xs">
{{request.agency}}
</div>
</td>
<td style="width:110px;">
<div class="minutes-info">
<div class="minutes-info--firstrow">
<div>
<span class="minutes-spanrow">
{{request.date | date: "EEE, d MMM yyyy"}}</span>
</div>
</div>
<div class="flex-container">
<div class="minutes-info--secondrow">
<span class="link-to" ng-click="msc.geturlData(request)">
<img src="img/Doc-Viewer-icon.svg" title="التقرير">
</span>
</div>
</div>
</div>
</td>
</tr>
</table>
Attaching screenshot of my table view to get more insight of my issue. Could someone help me to get solution approach?
Giving width to a container in pixels is a bad idea. It makes it totally absolute and the width won't adjust in different resolutions. You can use percentage. And for your specific problem, you can use try to calculate the percentage that should be applied based on the content. Then using binding allot the percentage width to the containers.
Component template should contain exactly one root element. If you are
using v-if on multiple elements, use v-else-if to chain them instead.
ERROR Failed to compile with 1 errors
error in ./src/App.vue
(Emitted value instead of an instance of Error)
Error compiling template:
<div id="app" class="container">
<div class="page-header">
<h1>Vue.js 2 & Firebase Sample Application</h1>
</div>
</div class="panel panel-default">
<div class="panel-heading">
<h3>Book Lists</h3>
</div>
<div clas ="panel-body">
<table class="table table-striped">
<thead>
<tr>
<th>
Title
</th>
<th>
Author
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
Here's my export default
export default {
name: 'app',
firebase: {
books: booksRef
},
components: {
Hello
}
}
What part should I fix to remove the error?
Component template should contain exactly one root element.
<template>
<root-element-1></root-element-1>
<root-element-2></root-element-2>
</template>
this will be the fix
<template>
<div>
<root-element-1></root-element-1>
<root-element-2></root-element-2>
</div>
</template>
In your case
</div class="panel panel-default">
needs to be
<div class="panel panel-default">
Official Documentation
On the official documentation, about Conditional Rendering,
somewhat "multiple" root element could be used when using v-if and v-else combo.
<template v-if="true">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>
Here is the fixed code :
<div id="app" class="container">
<div class="page-header">
<h1>Vue.js 2 & Firebase Sample Application</h1>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3>Book Lists</h3>
</div>
<div clas ="panel-body">
<table class="table table-striped">
<thead>
<tr>
<th> Title </th>
<th> Author</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
I'm trying to print an content of my html page.
I'm using this angularPrint but the problem im having is that in the page preview i'm getting to pages. the first one has content and the second one is a blank page. I'm trying to get rid of the blank page.
this is my html
<div id="invoice" print-section="" print-only="">
<div class="invoice">
<div class="invoice-company">{{user.store.name}}</div>
<div class="invoice-header">
<div class="invoice-from"><small>from</small>
<address class="m-t-5 m-b-5"><strong>{{user.store.name}}.</strong><br/>{{user.store.address.street}}<br/>{{user.store.address.city}}, {{user.store.address.zipCode}}<br/>Phone: {{user.store.phone}}</address>
</div>
<div class="invoice-date">
<div class="date m-t-5">{{saleDate | date:'MM/dd/yyyy'}}</div>
<div class="invoice-detail"># {{saleId}}<br/>Cashier {{user.firstName}}</div>
</div>
</div>
<div class="invoice-content">
<div class="table-responsive">
<table class="table table-invoice">
<thead>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in sale.items">
<td>{{item.name}} {{item.size}}</td>
<td>{{item.price | currency}}</td>
</tr>
<tr ng-repeat="discount in sale.discounts">
<td>{{discount.name}}</td>
<td>- {{discount.price | currency}}</td>
</tr>
</tbody>
</table>
</div>
<div class="invoice-price">
<div class="invoice-price-left">
<div class="invoice-price-row">
<div class="sub-price"><small>SUBTOTAL</small>{{sale.subtotal | currency}}</div>
<div class="sub-price"><i class="fa fa-plus"></i></div>
<div class="sub-price"><small>TAX</small>{{sale.tax}}</div>
</div>
</div>
<div class="invoice-price-right"><small>TOTAL</small>{{sale.total | currency}}</div>
</div>
</div>
<div class="invoice-footer text-muted">
<p class="text-center m-b-5">Thank you for coming.<br/>We hope you'll visit again.</p>
</div>
</div>
</div>
this is the directive that trigger the print action
<button type="button" print-btn="">Print</button>
I want a solution it doesn't matter if I have to use plain javascript/jQuery or no directive at all. I just to be able to populate an invoice and print it.
Thank you in advance.
you could add
#invoice:last-child {
page-break-after: auto;
}
to remove the last page
Note: Not supported in IE