When display component reportdetails it display below menu? - javascript

problem
second component - table html display below menu but i need it display on right of menu .
I work on angular 7 and I have two components
first component is report component contain on left side menu and it is be router outlet on app.component
second component is table html exist on reportdetails component and generated when click link menu .
first component report contain menu
<p>report-category works!</p>
<table *ngFor="let rep of reportlist">
<tr>
<td>{{rep.reportCategory}}</td>
</tr>
<tr *ngFor="let subrep of subreportlist">
<div *ngIf="subrep.reportCategoryID === rep.reportCategoryID">
<a href="/reportdetails?id={{subrep.reportID}}">
<i class="{{subrep.IconClass}}"></i>
<span class="title">{{subrep.reportName}}</span>
</a>
</div>
</tr>
</table>
second is report component contain table that display below menu and this is wrong
the correct i need is to display right of menu as picture below
reportdetails works!
<p>reportdetails works!</p>
<div>
<table class="table table-hover" >
<thead>
<tr>
<th>regulation</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let rep of reportdetailslist">
<td>{{rep.regulation}}</td>
</tr>
</tbody>
</table>
<p>reportdetails works!</p>
<div>
<table class="table table-hover" >
<thead>
<tr>
<th>regulation</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let rep of reportdetailslist">
<td>{{rep.regulation}}</td>
</tr>
</tbody>
</table>
</div>
fiddle link as below :
https://jsfiddle.net/015asjzv/1/
what I try
table{
float:right;
width:auto;
}
Last Updated
see link here
http://www.mediafire.com/view/wnptffqakjglkre/correctdata.png/file
it moved table from left to right but i need it top beside menu so what i do

So for what I can see at the moment u have 2 tables wrapped by divs that's why they show as block(divs have display: block; by default)
add another div around these 2
<div class='wrapper'>
// You have to make sure only this divs are direct child of wrapper.
// div table 1 || you can just remove the div and add table directly
// div table 2 || as divs with no class dont add any value
</div>
// css
.wrapper {
display: flex;
}
Good luck.
You can learn more of display flex here
Note: This could also be an issue of the parent component layout, but the fix would be the same.

Related

jquery accordion effect on table [duplicate]

This question already has answers here:
jQuery - Accordion Effect on a Table
(2 answers)
Closed 5 years ago.
I have a table of the following structure:
<table class="table">
<tbody>
<tr>
<td>
<div class="heading_accordion">
some text..
</div>
<div class="body_accordion">
some more text...
</div>
</td>
</tr>
<tr>
<td>
<div class="heading_accordion">
some other text..
</div>
<div class="body_accordion">
some more other text...
</div>
</td>
</tr>
</tbody>
</table>
and I am using this function to create an accordion effect (the table to load showing only the heading div and showing the body div when the heading div is clicked):
function the_accordion() {
$('.table').each(function() {
var thead = $(this).find('.heading_accordion');
var tbody = $(this).find('.body_accordion');
tbody.hide();
thead.click(function() {
tbody.toggle();
})
});
}
The problem I have is that when I click a row they all are toggled. I would like to individually alter the state of the rows so that only the one that is clicked is toggled and the rest remain untoggled.
you can use this function, or something like that
function init_accordion() {
$(".heading_accordion".click(function() {
var tbody = $(this).find('.body_accordion');
tbody.toggle();
}
}

Jquery Accordion function, alter class of parent

I have a bootstrap accordion table which is working fine. The glyphicon indicates which tablerows children-row is currently expanded. But something with the function seems to be wrong it doesn't change the class of the ancestor element as expected.
$('.accordion-text').on('shown.bs.collapse', function () {
$(this).closest(".indicator").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
});
$('.accordion-text').on('hidden.bs.collapse', function () {
$(this).closest(".indicator").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
});
Full code: http://jsfiddle.net/7pwg1j5f/616/
<tbody>
<tr id="package1" class="accordion-toggle" data-toggle="collapse" data-parent="#OrderPackages" data-target=".packageDetails1">
<td>123456</td>
<td>3</td>
<td><i class="indicator glyphicon glyphicon-chevron-up pull-right"></i>
</td>
</tr>
<tr>
<td colspan="3" class="hiddenRow">
<div class="accordion-text accordion-body collapse packageDetails1" id="">
<table>
<tr>
<td>Revealed item 1</td>
</tr>
<tr>
<td>Revealed item 2</td>
</tr>
</table>
</div>
</td>
</tr>
The way you were finding your .indicator element was not proper. It resides in the previous tr of .accordion elements parent tr. Just follow the structure and you will get the proper element. Also, you can combine both the events and use toggleClass instead of addClass and removeClass. So below is the updated solution.
$('.accordion1').on('shown.bs.collapse hidden.bs.collapse', function () {
$(this).closest('tr').prev(".accordion-toggle").find('.indicator').toggleClass("glyphicon-chevron-up glyphicon-chevron-down");
});
.closest('tr') - fetches the parent of .accordion1 div.
.prev('.accordion-toggle') - fetches the previous sibling of the
earlier obtained parent.
.find('.indicator') - find the .indicator element.
.toggleClass - toggles [add/removes] respective class.
Here is the Updated DEMO
Also note that I've made some changes in html to match the class
The problem is that your parents selector will never pickup cells from the previous row, you should select row, switch to previous and then find relevant element under that row:
$('.accordion1').on('show.bs.collapse', function () {
$(this).parentsUntil("tbody").prev().find(".indicator").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
});
$('.accordion1').on('hide.bs.collapse', function () {
$(this).parentsUntil("tbody").prev().find(".indicator").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
});

Updating angular object array on ng-click

Related to a previous post, I am really stuck on user click updating an object array in my angular app. In reality, the user click will force an http get. In the sample code here, I have simplified to a hard coded array. Also, the real app has multiple tabs, I have cut down the code to the crux, which is updating of the object on a click messing up the view. For example, the table in the view loses the selectable column. Other bad stuff happens in real app. I suspect some data binding issue?
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs">
<header class="mdl-layout__header">
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
Assets
<div class="mdl-layout-spacer"></div>
</div>
</header>
<main class="mdl-layout__content">
<section class="mdl-layout__tab-panel is-active" id="fixed-tab-1">
<div class="page-content">
<div class="table-content mdl-grid">
<div class="mdl-cell mdl-cell--6-col">
<table id=table1
class="table-fullwidth mdl-data-table mdl-data-table--selectable mdl-js-data-table mdl-shadow--4dp" >
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric"><span class="table-header">Asset</span></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in restdata">
<td class="mdl-data-table__cell--non-numeric mdl-typography--thin">{{ x.asset }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
</main>
</div>
My simple js is like this:
var app = angular.module('homeApp.protect', []);
app.controller('protectCtrl', ['$scope', function($scope) {
$scope.tabcount = 0;
$scope.restdata = [];
$scope.response = [ {"id":"1","asset":"V-1-A1"},
{"id":"2","asset":"V-2-A1"},
{"id":"3","asset":"V-1-A2"},
{"id":"4","asset":"V-2-A2"}];
// activate tabs entered by user
$scope.activateTab = function (tabId) {
$scope.tabcount++;
console.log("In activate tab " + tabId + " tabcount = " + $scope.tabcount);
// get lists of all assets for all agents
if (tabId == "Assets") {
angular.copy($scope.response, $scope.restdata);
console.log($scope.restdata);
};
};
//Default entry on page load
$scope.activateTab ("Assets")
}]);
On initial load, the selectable check boxes look fine. On subsequent tab clicks, they disappear from rows (appear in header only). I have seen other problem with dynamic data. Thanks.

jQuery dataTable overflows in bootstrap modal

I have a table inside a bootstrap modal. The content that I populate inside the dataTable cells is quite large, and instead of wrapping the text to fit the table inside the modal, it overflows the modal, like it is unable to pick up the modal width and wrap the text.
Screenshot:
I have tried various solutions, such as specifying wrap CSS as well as specifying the table width (in % and px) and setting the width property on the table (in % and px) but there is absolutely no change to the table. Any advice on how to correct this issue would be greatly appreciated.
Code Extract 1 (Modal):
<!-- List Questions Modal -->
<div class="modal fade" id="questionsModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" style="width: 95%">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4>Questions</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="responsive-table">
<table width="900px" class="table table-bordered" style="margin-bottom:2em; width: 900px;" id="questionsTable">
<thead>
<tr>
<th >Code</th>
<th>Title</th>
<th>Instruction</th>
<th>Extract</th>
<th>class="text-center">Active</th>
<th class="text-center">Edit</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
Code Extract 2 (dataTable population):
function showQuestions(quiz_id)
{
$('#questions_quiz_id').val('quiz_id');
window.questionsTable.fnClearTable();
$.post('{{ url("getGameQuestions") }}', {quiz_id : quiz_id})
.done(function(data)
{
if (typeof(data.error) != 'undefined')
{
$('#error-msg').html(data.error);
$('#page-error').fadeIn(300).delay(2000).fadeOut(500);
}
else
{
for(var d in data)
{
var question = data[d];
var active = (question.active == undefined || question.active == false) ? "Inactive" : "Active";
var ai = window.questionsTable.fnAddData([
question.code,
question.title,
question.instruction,
question.extract,
active,
'<i class="icon-pencil" style="cursor:pointer; color:#E48A07;" title="Edit" onclick="setQuestion('+question.id+')"></i>'
]);
var oSettings = window.questionsTable.fnSettings();
var addedRow = oSettings.aoData[ai[0]].nTr;
addedRow.cells.item(2).setAttribute('width','29%');
addedRow.cells.item(4).className = "text-center";
addedRow.cells.item(4).className = "text-center";
addedRow.cells.item(5).className = "text-center";
}
$('#questionsModal').modal('show');
}
});
}
Try removing
<div class="responsive-table"> it might be causing responsive widths in the modal to fail.
You could also try specifying a max-width on the table.
This might be slightly related although it was a problem with Bootstrap 2.3.2 and it looks like you are using 3.
http://www.bootply.com/88364
This question is asked here
datatables does not becomes responsive on bootstrap3 modal dialog
I would suggest you enable the Datatables Responsive extension, ditch the wrapper and use this snippet of code instead.
//once the modal has been shown
$('#yourModal').on('shown.bs.modal', function() {
//Get the datatable which has previously been initialized
var dataTable= $('#yourResponsiveDataTableInModal').DataTable();
//recalculate the dimensions
dataTable.columns.adjust().responsive.recalc();
});
After trying so many solutions i found one who works for me!
Just put the table inside a div and define the CSS inside the code.
<div style="overflow:auto;">
<table>
.....
</table>
</div>
I hope this help!!
Remove the <div class="row"> and check.
Am also experienced same problem,after i removed the div, i got it perfectly.
After trying so many solutions i found a solution.
Just put the table inside a div and define the CSS inside the code.
<div style="overflow:auto;">
<table>
.....
</table>
</div>
I hope this help!!
<div class="modal-body">
<div class="row table-responsive">
<div class="col-sm-12">
<table id="example" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th class="site_name">
Feedback
</th>
<th>
Ticket Id
</th>
<th>
Date of Creation
</th>
<th>
Classification
</th>
<th>
Topic
</th>
<th></th>
</tr>
</thead>
</table>
</div>
</div>
</div>
initialize the datatable like that
initialize the datatable when open the modal.first time when we open the modal i==1 second thime i==2 so datatble cant reinitalize again and again does not give any alert box like datatable already initalize
var i=1;
$('#myModal').on('shown.bs.modal', function (e) {
if(i==1){
var oTable=$('#questionsTable').DataTable();
}
i++;
});
Just insert your table inside a div with "table-responsive" class:
<div class="table-responsive">
//Your table here
</div>

Dynamic popover/tooltip via Bootstrap with flask & python

I'm trying to create dynamically generated tooltip/popover content for a site using bootstrap (3.1), flask and python.
I have hyper-linked items in a table. When I mouse over those hyperlinks, I want a tooltip to appear; when the user clicks on the hyperlink I want them to go to the individual item page. Code (shortened for brevity):
<table>
<thead>
<tr>
<th>Item</th>
<th>Quantity</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr>
<td>{% include 'itemlink.html' %}</td>
<td>12</td>
<td>red</td>
</tbody>
</table>
then in itemlink.html:
<a href="{{linkitem.get_url()}}" class="itemlink" data-item-id="{{linkitem.id}}">
<img src="{{linkitem.image}}" alt="Item {{linkitem.id}}" class="smallicon" />
{{linkitem|safe}}
</a>
Next: the content of what I want to be in the popover/tooltip box:
<div id="item_{{boxitem.id}}" class="itembox">
<div class="itemimage">
<img src="{{boxitem.image}}" alt="{{boxitem.name}}" title="{{boxitem.get_title()}}" />
</div>
<div class="iteminfo">
<div class="itemtitle">
{{boxitem.get_title()}}
</div>
<div class="itemdesc">
{% autoescape off %}{{boxitem.get_desc()}}{% endautoescape %}
</div>
</div>
</div>
I put this in a script on my page:
<script>
$(document).ready(function(){
$('#item_{{item.id}}').popover({
html: true,
placement: 'right',
trigger: 'hover',
selector: '[rel="popover"]'
});
});
</script>
I'm wondering if this part of the script is even possible?
$('#item_{{item.id}}').popover({
EDIT TO ADD: (it's not, it threw a server error)
EDIT again: It had to be
$('.itembox#item_'+$(this).data(itemID')).popover
On what element should I add the rel=popover?
I would give each item a static class like tool tip or give the table an id and use jQuery selector on the element in the table for the hover event.
$(document).ready(function(){
$('td.tooltip').popover({
html: true,
placement: 'right',
trigger: 'hover',
selector: '[rel="popover"]'
});
});

Categories