My goal is to build a table using CSS (display:table, table-row, table-cell) with 1 custom polymer-element defining the div for the table, and another polymer-element defining the divs for the rows and cells, like this
<my-table>
<my-row col1="contents of column 1" col2="column 2">
--html for content of column 3--
</my-row>
</my-table>
The problem I'm having is that the div created by with the "display:table;" isn't being recognized by the divs created by with the "display:table-row" and "display:table-cell". The divs created by seem to think they are in their own individual tables.
Is there a way to get this to work? If the answer is to use ::content ::shadow, then I need to be shown how because I can't get it to work and behave as a single large table.
You should style the host of the polymer element, not the divs inside it.
Here is an example: https://gist.github.com/jakemac53/0d073615d723502a61ca
Related
Using the ui-grid with great success with 3 nested levels. Business needs an expanded row to push down then next row rather than overlaying on top of successive rows. Not finding how this overflow/z-layer functionality is controlled inside of the ui-grid.js file. Any suggestion on how to get this to work? Thanks!
Figured it out. The ui-grid.js file contains all the templates at the bottom of the 28,000 lines. I pulled all the html for "ui-grid/expandableRow" into its own template file in my code and modified it to meet some needs. In the angularjs, I specify that template as such with my own naming convention:
expandableRowTemplate: 'AngularApp/Templates/expandableAssetsRowTemplate.html'
That templates's code looks like this. I had to remove the directive 'ui-grid-expandable-row' for some strange reason in order to work):
<div ui-grid="row.entity.subGridOptions" ui-grid-pagination ui-grid-expandable ui-grid-edit ui-grid-row-edit ui-grid-cellNav ui-grid-move-columns ui-grid-resize-columns
ng-if="expandableRow.shouldRenderExpand()"
class="expandableRow"
style="float:left; margin-top: 1px; margin-bottom: 1px"
ng-style="{width: (grid.renderContainers.body.getCanvasWidth()) + 'px' , height: row.expandedRowHeight + 'px' }">
</div>
The other thing that affected the outcome is an expandable row height in the parent grid's gridOptions:
expandableRowHeight: 390
The nested grid has a height specification, but this expanded row height allows the parent grid to expand the row to the correct height.
The end result of all this is that my parent grid's rows now expand and the nested grid pushes the rest of the parent rows downward rather then laying over them.
Note: I originally went with a vanilla expandableRowTemplate as found in the tutorials and that is why my expansion wasn't working right.
Sample of a bad template (as compared to the one above):
<div ui-grid="row.entity.subGridOptions" ui-grid-expandable
ui-grid-edit ui-grid-row-edit ui-grid-cellNav ui-grid-move-columns ui-grid-resize-column>
</div>
In my case I have a an ui-grid called myTable and inside it can be some rows of a sub-grid. The main grid is filled with an array array1.
Each element of array1 can contain an array of details.
Only I need to do this operation (to set height attribute of sub-grid):
$scope.myTable.expandableRowHeight *= ( 2 + row.entity.details.length ) ;
row.entity must be an element from array1 (the main grid's array)
Then, the expandCollapse method should be like this:
$scope.expandCollapseRow = function(row,$event){
$event.stopPropagation();
$scope.myTable.expandableRowHeight *= ( 2 + row.entity.details.length ) ;
$scope.gridApi.expandable.toggleRowExpansion(row.entity);
};
Please don't forget that expandableRowHeight is an existing attribute of angular-ui grid.
You can see the attribute into gird setup in this image:
How I can display the second word of header in column?
Now kendo grid doesnt show symbols which dont place in header
I want
Second
First
But now
Second Fi
Just add this CSS to allow the column header text to wrap when column width too small to display all words:
th.k-header{
white-space: normal !important;
}
DEMO
I currently have an html page including a series of patterns organized as follows :
a div including a jqplot aligned to the left of the page
the associated table below the jqplot.
I'd like to align the table to the very right of the jqplot.
Here is a link showing the current organization for the html :
http://snovae.in2p3.fr/canto/scratch/spectra_sample/SN2007le_fullrun.html
As for now I don't have any style within the html.
The jqplot is called with the div and the table is not currently within any div if this helps.
Any help will be greatly appreciated.
You should set your .jqplot-target elements to have a margin-left: 0px.
Those seem to have inline style set, act on this and set their style (which is always the same) via a css acting on their class, not on each individual elements.
I just discovered that text inputs within a div with data-role="fieldcontain" don't expand to the 100%, but if you place a text input outside of a fieldcontain it expands to the fullest. This is a bug that they are fixing, but meanwhile...
So I was wondering what is the use of that data-role="fieldcontain" in the first place? Why to put it? I saw it on the documents and I just put it in my html, but what is the use of putting it?
Thanks!
Looks like it's a Field Container for Grouping and Display
http://jquerymobile.com/demos/1.1.1/docs/api/data-attributes.html
Field container Container with data-role="fieldcontain" wrapped around label/form element pair
Controlgroup DIV or FIELDSET container with data-role="controlgroup". Visually integrate multiple button-styled
inputs of a single type (checkboxes, link-based buttons, radio
buttons, selects) into a group. For grouping form checkboxes and radio
buttons, the fieldset container is recommended inside a div container
with the data-role="fieldcontain", to improve label styling.
data-mini true | false - Compact sized version for all items in the
controlgroupdata-type horizontal | vertical - For horizontal or
vertical item alignment
As of jquerymobile 1.4 data-role="fieldcontain" is deprecated!
use class="ui-field-contain" instead.
see release notes http://jquerymobile.com/changelog/1.4.0/
I would like to make use the core jQuery libraries to do as per title. Is it possible to do this with the native jQuery UI library? I prefer not to use plugins as these are not hosted on any CDN (as far as I' am aware).
How can i filter the table by matching the typed input text against the 2nd table column?
<input type="text" id="filter" />
<table>
<tr><td>1</td><td>UK</td></tr>
<tr><td>2</td><td>USA</td></tr>
<tr><td>3</td><td>France</td></tr>
</table>
$('tr td:nth-child(2)') will give you all the 2nd TDs in that table. It is 1-based and will include in its count any non-TD children of the TR.
$('tr td:eq(1)') will also give you all the 2nd TDs in that table. It is 0-based and will only include in its count the TD children of the TR.
Once you wish to do something with the row containing a TD, you can use the TD's parent.
Briefly, you'll put an id on your table element. Then, when you leave the input element (or, in the onclick() handler of a button) you'll do the following:
Grab the table element.
Find each child in turn, which will be a row, preserving a reference to the element
Find the second child of the row and test it against the value of the input to see if it matches (exact match, contains, or whatever kind of test you want to apply).
If it matches, set a style indicating it matched onto the row. If not, set a style indicating "not matched" onto the row.
You'll also need a style sheet that makes matched items visible and not-matched items invisible (or uses dark and light text, or whatever visual indicator you want to use for matched & unmatched).
You can make this somewhat more robust if, instead of relying on the second cell on each row to hold the country name you use a class indicator on the cells that hold the country name. Then, instead of "Find the second child" you would "Find the child of class country. Doing this means that your application won't break when you add, remove, or rearrange columns.