Nebular Tree Grid table body scrollable - css

Is it possible to make just the table body without the table header of a table (tree Grid) in nebular theme vertically scrollable?
The basic tree grid looks like this:
<table [nbTreeGrid]="dataSource">
<tr nbTreeGridHeaderRow *nbTreeGridHeaderRowDef="allColumns"></tr>
<tr nbTreeGridRow *nbTreeGridRowDef="let row; columns: allColumns" (click)="doSth(row.data)"></tr>
<ng-container nbTreeGridColumnDef="name">
<th nbTreeGridHeaderCell *nbTreeGridHeaderCellDef >Name</th>
<td nbTreeGridCell *nbTreeGridCellDef="let row">
{{ row.data.name }}
</td>
</ng-container>
<ng-container nbTreeGridColumnDef="age">
<th nbTreeGridHeaderCell *nbTreeGridHeaderCellDef >Age</th>
<td nbTreeGridCell *nbTreeGridCellDef="let row">
{{ row.data.age }}
</td>
</ng-container>
<!-- and so on ... -->
</table>
I achieved to wrap it into a nb-list so that makes it scrollable but the table header will not stay in place.
<nb-list style="max-height: 250px;">
<nb-list-item>
<table [nbTreeGrid]="dataSource">
<tr nbTreeGridHeaderRow *nbTreeGridHeaderRowDef="allColumns"></tr>
<tr nbTreeGridRow *nbTreeGridRowDef="let row; columns: allColumns" (click)="doSth(row.data)"></tr>
<ng-container nbTreeGridColumnDef="name">
<th nbTreeGridHeaderCell *nbTreeGridHeaderCellDef >Name</th>
<td nbTreeGridCell *nbTreeGridCellDef="let row">
{{ row.data.name }}
</td>
</ng-container>
<ng-container nbTreeGridColumnDef="age">
<th nbTreeGridHeaderCell *nbTreeGridHeaderCellDef >Age</th>
<td nbTreeGridCell *nbTreeGridCellDef="let row">
{{ row.data.age }}
</td>
</ng-container>
<!-- and so on ... -->
</table>
</nb-list-item>
</nb-list>
When i examine the HTML structure in browser i see that the HTML element i want to be scrollable is <tbody> element. So i also tried to add some css but also without effect
tbody {
max-height: 100px !important;
overflow-y: scroll !important;
}
I just cant access the tbody element and give it a class that i can handle with css or something so i just dont know what to do anymore...

Related

How to adjust v-simple-table column width in Vuetify.js component?

I have used vuetify.js as my latest projects UI component.
I try to adjust width of v-simple-table of th,td using css,
but nothing happen.
I want to adjust every th,td width 50px.
So I made code at codepen and like below.
<template>
<div id="app">
<v-app id="inspire">
<v-card width="500px">
<v-simple-table>
<template v-slot:default>
<thead>
<tr>
<th class="text-left" v-for="n in 20">
{{n}}
</th>
</tr>
</thead>
<tbody>
<tr>
<td v-for="n in 20">{{ n }}</td>
</tr>
</tbody>
</template>
</v-simple-table>
</v-card>
</v-app>
</div>
</template>
<style scoped>
.v-data-table > .v-data-table__wrapper > table > thead > tr > th,td {
width: 50px !important;
}
</style>
I thought that css pass is effective to width, but never change.
How do I adjust width of v-simple-table?
Does anyone help me, please?
change your style to
min-width: 50px !important;

How to align p-table and p-chart elements side by side

I have a very little experience developing UI but I wanted to accomplish a task quickly where I have to put a p-table and p-chart elements side by side. I tried to use flex layout as well as float left and right as below but not getting the expected result. How can this be fixed?
<div fxLayout="row" fxLayoutAlign="start center">
<div fxFlex="50%" class="floatLeft">
<p-table [value]="summaryList" [scrollable]="true" scrollHeight="200px"
[resizableColumns]="true" [style]="{width:'500px'}">
<ng-template pTemplate="caption">
XXX Summary
</ng-template>
<ng-template pTemplate="header">
<tr>
<th *ngFor="let col of summaryColumns" [pSortableColumn]="col.field">
{{col.header}}
<p-sortIcon [field]="col.field"></p-sortIcon>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-summaryList>
<tr>
<td *ngFor="let col of summaryColumns">
{{summaryList[col.field]}}
</td>
</tr>
</ng-template>
</p-table>
</div>
<div class="col-md-4 content-section implementation" fxFlex="50%" class="floatRight">
<p-chart type="line" [data]="dailyData" title="XXX Chart" extender="overrideXAxis"></p-chart>
</div>
</div>
You can try doing this.
<div class="container">
<p-table [value]="summaryList" height="200" [scrollable]="true" scrollHeight="100px" [resizableColumns]="true" [style]="{width:'50%', float:'left'} ">
<ng-template pTemplate="caption">
My Awesome Summary
</ng-template>
<ng-template pTemplate="header">
<tr>
<th *ngFor="let col of summaryColumns" [pSortableColumn]="col.field">
{{col.header}}
<p-sortIcon [field]="col.field"></p-sortIcon>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-summaryList>
<tr>
<td *ngFor="let col of summaryColumns">
{{summaryList[col.field]}}
</td>
</tr>
</ng-template>
</p-table>
<p-chart height="250" [responsive]="false" type="bar" [data]="data" [options]="options" [style]="{width:'48%', float:'right'}"></p-chart>
</div>
then add style to your component.css
.container{
display: flex;
justify-content: center;
align-items: center;
}

angularjs grid list top alignment

I am trying top align the table within my grid list so all the tables across the rows line up.
I am using layout="column" layout-align="start center"> base on https://material.angularjs.org/latest/layout/alignment#layout-row-layout-align-center-center.
However, it is not still not working, the tables are center align rather than top align.
Any suggestion?
<md-content>
<md-grid-list md-cols="3" md-gutter="1em" md-row-height="2:1" >
<md-grid-tile ng-repeat="user in users" class="curvetable2" layout="column" layout-align="start center">
<md-grid-tile-header class="curvetable3" >
<h3><a style="color:white" ng-click="userCompletedCoursesDisplay(user.username, user.name)">{{user.name}}</a> <a ng-if="user.ismanager == 'yes'" style="color:#ffff99" ng-click="directManager(user.username, user.name)"> Manager - View Team</a></h3>
</md-grid-tile-header>
<div style="width:90%;">
</br></br>
<table style="width:100%;" >
<tr ng-repeat="course in user.course">
<td valign="top"><a ng-click="courseDisplay(course.id, user.username, 'organization')">{{course.name}}</a></td>
<td valign="top">{{course.date}} </td>
</tr>
<tr ng-if="user.more==true">
<td valign="top"><a ng-click="userCompletedCoursesDisplay(user.username, user.name)">Additional Courses</a></td>
</tr>
</table>
</div>
</md-grid-tile>
</md-grid-list>
</md-content>

Selecteting element if previous TD with CSS

If have the following HTML (there could be more TDs), can I select ALL <div>s with style divE in all TDs before the one with id="current"?
I think i can do it with jQuery, but can this be done with pure CSS?
HTML
<table id="myTbl" cellpadding="0" cellspacing="0">
<tr>
<td>
<div class="red">asdasd</div>
<div class="divE"></div>
<div class="divE"></div>
content
</td>
<td id="current">
<div class="red">asdasd</div>
<div class="divE"></div>
<div class="divE"></div>
content
</td>
<td>
<div class="red">asdasd</div>
<div class="divE"></div>
<div class="divE"></div>
content
</td>
</tr>
</table>
There's no before selector, but what you can do is select all tds (that aren't #current), and then "reset" (or "undo") the styles on all the tds after #current.
td:not(#current) div.divE{
/* Styles for <td>s before "#current" */
}
td#current ~ td div.divE{ /* This means all "td div.divE" after "td#current" */
/* Reset/undo styles for all other <td>s */
}
DEMO: http://jsfiddle.net/MYhPP/2/

overriding primefaces 3.1 css for datatable

I am trying to override the css classes from primefaces 3.1, I was looking for a pattern for the class name to override.
I tried:
.ui-datatable table {}
.ui-datatable .ui-datatable-header,.ui-datatable .ui-datatable-footer {}
.ui-datatable .ui-datatable-header {}
.ui-datatable th,.ui-datatable tfoot td {}
.ui-datatable .ui-datatable-data td,.ui-datatable .ui-datatable-data-empty td{}
But only the rows content got centralized but was not able to change header bgcolor and other stuff.
Then I realized that may be the classes I overwrote might not have been used.
Surprisingly, I found the generated source code are not using these as class...
<div id="form:j_id1915418705_722af8cd" class="ui-datatable ui-widget">
<table role="grid"><thead><tr role="row">
<th id="form:j_id1915418705_722af8cd:j_id1915418705_722af894" class="ui-state-default" role="columnheader">
<div class="ui-dt-c">
<span><span class="outputText">Model</span></span>
</div>
</th>
<th id="form:j_id1915418705_722af8cd:j_id1915418705_722af942" class="ui-state-default" role="columnheader">
<div class="ui-dt-c">
<span><span class="outputText">Color</span></span>
</div>
</th></tr></thead><tfoot></tfoot>
<tbody id="form:j_id1915418705_722af8cd_data" class="ui-datatable-data ui-widget-content">
<tr data-ri="0" data-rk="BMW" class="ui-widget-content ui-datatable-even" role="row" aria-selected="false">
<td role="gridcell">
<div class="ui-dt-c">
<span class="outputText">BMW</span>
</div>
</td>
<td role="gridcell">
<div class="ui-dt-c">
<span class="outputText">Black</span>
</div>
</td>
</tr>
<tr data-ri="1" data-rk="Audi" class="ui-widget-content ui-datatable-odd" role="row" aria-selected="false">
<td role="gridcell">
<div class="ui-dt-c">
<span class="outputText">Audi</span>
</div>
</td>
<td role="gridcell">
<div class="ui-dt-c">
<span class="outputText">White</span>
</div>
</td>
</tr>
</tbody>
</table><input type="hidden" id="form:j_id1915418705_722af8cd_selection" name="form:j_id1915418705_722af8cd_selection" value="" autocomplete="off" />
Can somebody tell me how to I be able to change table headers, borders, alternate rows color...
Can somebody provide me a pattern for How to know what class in PF to override looking at the generted source code.
Thanks in advance.
First of the classes are included here in the markup:
<div id="form:j_id1915418705_722af8cd" class="ui-datatable ui-widget">
The other child classes automatically apply themselves to the other elements.
Your custom CSS may actually be overridden by the Primefaces CSS styles if you are including these styles in a seperate CSS file linked from head.
To make sure that your custom CSS applies itself to the page try adding the custom CSS inline to the page body and see if it applies then.

Resources