I'm trying to adjust the table row height on a tabulator table. I'm trying to make the rows taller to make it easier to interact with for users on touchscreen devices.
I'm not finding anything in the documentation, and I haven't been successful adjusting the css. What is the proper way to make the rows taller? I'm trying to use Apple's suggestion of a 44px minimum.
You can do this in CSS by adjusting the cell padding, which by default is 4px
.tabulator-row .tabulator-cell{
padding:8px 4px;
}
Make sure to include this after the tabulator stylesheet
Related
I'm trying to print a Tabulator table using the print() method on the table object.
I need to set custom styling, so I'm setting the second parameter to true. This works in reproducing the styling of the table (with the usual HTML caveats, such as removed backgrounds).
However, I would like to use an entirely different style for printing. I tried to add rules of the following form to the stylesheet:
.tabulator-print-table .tabulator-headers {
border: black 3px;
}
However, these do not seem to have the desired effect (in the above example, I can't see any border in the printout).
That is totally possible, but i can see two issues with your current approach.
The first issue is that when doing whole table printing, the table is actually replaced by a standard HTML table because browsers know how to print this better, so only the classes defined in the Print Styling List are available, all other selection should be done using standard table elements, so to style a column header would be:
.tabulator-print-table th{
//style table column header
}
To style the row containing the table headers would be:
.tabulator-print-table thead tr{
//style table header row
}
The other issue you may be facing is if you have set the printStyled option to true in the table setup then it will be applying the existing table styles as inline styles to each of the print tables elements, so you may need to use the !important flag to override the inline styles:
border: black 3px !important;
When using fitColumns setting of tabulator, if the table is wider than the containing div, the columns shrink so they the table fits in the div. It appears one can use widthShrink: 0 to prevent column shrinking (I have not tried this yet). Is it possible to specify widthShrink for all columns? I am creating the table from an existing table, and hence do not specify columns and data manually.
Also, is it possible to prevent the scrollbar on the table div when the table gets wider than the containing div. I would prefer that the user scroll the entire page to see the table (instead of just the table div).
Thank you.
You are using the wrong layout mode if you want the columns to overflow the table, fitColumns is specifically designed to fit the columns to the table. the fitData layout mode will allow the columns to overflow the table naturally. You can set widthShrink: 0 on all the columns, but at that point you are essentially disabling the layout mode anyway.
There is no built in feature for allowing external scrolling of the table. The table is based in a div and so will take up 100% the width of its parent element.
It will then either handle scrolling inside the table or resize the columns to fit depending on how your table is configured
You could make some CSS tweaks to allow this form of display but it may cause the table to malfunction under certain circumstance, depending on your configuration.
You would need to include the following CSS after the tabulator style sheet has been included:
.tabulator, .tabulator-header, .tabulator-tableHolder{
overflow:visible !important;
}
But essentially at that point you may be better off just using a standard HTML table as you seem to be disabling a lot of the features that you would use Tabulator for.
In lotus notes there is a simple way to align a column value / icon:
Regarding XPages, I tried adding align:right into the <xp:this.iconSrc> property, but it isn't working.
Is there a chance/a way to do this?
Thanks for your time.
Try adding this to you view column style property
text-align: center;
DataViews really provide almost everything I want in Xpages views EXECPT that I cannot control how extra columns appear. They are always right aligned. Is there a way to make them left aligned? I don't want a tremendous amount of space between the summary column and the extra columns.
The column sizing seems in that way, because the width of the Summary columnn is set by renderer (100% for usual dataview).
If you could remove that width: 100% style, the sizing of column would be usual.
There are a couple of ways to do that but neither is elegant.
Using CSS will not be a nice technique, but it will work. Since we can't address that specific column with a class name and width style is inline, we can define myRowStyle as the rowStyleClass for our dataview control and use the following rule:
tr.myRowStyle td { width: auto !important; }
Now, we will consider some problems of course. Any inline or CSS definition for other columns will be overridden by this rule. Also if you use any table within these columns, they will be effected too.
You can define a more specific selector for minimum side effect, but this will not work for older browsers (e.g. IE8):
tr.myRowStyle > td:nth-child(2) { width: auto !important; }
Alternative way is to write a short dojo script which finds the second TD within every row and remove width property. You might put such as a script just after the data view. For browsers with a slow connection might see a flickering on rendering stage for this case.
I am using Dreamweaver cs6 to create a fluid layout. When the new document option window first opens it gives you options on the percentages and number of columns for each device. I have done this, but would like to change the percentages and number of columns after the document has been created. Is there a way to change the percentages and column numbers of a fluid layout in Dreamweaver cs6 after the document has been created?
You can edit these values in the css file DW asked you to create:
/*
Dreamweaver Fluid Grid Properties
----------------------------------
dw-num-cols-mobile: 5;
dw-num-cols-tablet: 8;
dw-num-cols-desktop: 10;
dw-gutter-percentage: 25;
Inspiration from "Responsive Web Design" by Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design
and Golden Grid System by Joni Korpi
http://goldengridsystem.com/
*/
After saving, exiting and re-opening your project the columns and gutter percentage will haven been updated.
Dreamweaver CS6: The Missing Manual (https://www.inkling.com/read/dreamweaver-cs6-missing-manual-david-sawyer-mcfarland-1st/chapter-11/fluid-grid-layouts) says:
Unfortunately, once you pick a gutter value, there’s no way to return to this [the "New Fluid Grid Layout"] screen and change it. In fact, since Dreamweaver uses this value to make some complex calculations concerning the columns you insert, there’s no easy way to change this value once you create the layout.
We could perhaps try changing the width and padding numbers in the existing FGL CSS (those numbers Dreamweaver calculated to the fourth decimal upon the file's creation), but it's probably easier just to create a new fluid grid layout style sheet. A more user-friendly solution would be welcome, however.
I had the same problem and i found a simple solution. You create a new fluid grid layout with the changes you wont to make you save it so that it will creat for you the new css and respond.min.js file. You delete all the other new files you created and you keep only the respond.min.js and you replace the old one with the new one and you finished. Oh keep a copy of the old one just to be sure.
I had the same problem and I found a pretty simple solution.
You need to create a new Fluid Grid layout (File - New Fluid Grid Layout), set up the number of columns, widths, and gutters as you want and then save somewhere the new css file. Styles that regulate layout (i.e., widths, margins between columns, and number of columns) are set under .gridContainer so you just need to replace .gridContainer styles in your old fluid layout css file with .gridContainer styles from your new fluid layout css file. Be sure to replace .gridContainer styles for all screen sizes you changed (desktop, table, mobile or all of them).