I had the global table's css set so non-related jqGrid table cells render correctly in all web browser (IE, Firefox, Chrome, Safari, etc.).
table { display: table-cell; }
A few years later, I start using jqGrid for 1st time and noticed the table cells rendered fine in IE but not in Firefox, Safari and Chrome.
So, what css property should I inject into to the ui.jqgrid.css file for the jqGrid to render properly?
Thanks.
I am not sure that I understand your problem correctly. I suppose that you have to have the CSS
table { display: table-cell; }
because of some reason and you want do display jqGrid correctly. In the case you can just add CSS
.ui-jqgrid table { display: table; }
which override the "global" setting for all tables used by jqGrid.
See the demo which uses the styles and which displays the grid correctly.
Related
I'm using SEJDA API with PHP to convert HTML to PDF.
In this HTML, I have multiple tables with a variable number of rows, and each of them have a variable height, with a variable number of columns, etc.
Sometimes one (or more) table is long enough to be displayed on more than one page, so I can have a page with only rows of tbody but no thead "labels" to tell what each columns can represents.
Is there a proper way to force the thead to be shown on each page where the table is displayed ? The "css position:fixed" solution is not a good way because there is potentially more than one table and not all pages have a table on it.
Add this to your print styles:
thead {display: table-header-group;}
If your still having issues, try https://docamatic.com. There is a dynamic table template (JSON to PDF).
I have a Kendo UI Grid that has a drop down element on the form. When I export to a PDF the selected value appears on the PDF but has the outline of the select element around it. When exporting to a pdf how can I remove the outline of the element?
Like #Diptee Hamdapurkar mentioned, you have the .k-pdf-export as base for this.
.k-pdf-export .k-grid td{
border: 0;
}
here is the documentation.
https://www.telerik.com/kendo-angular-ui/components/pdfexport/content-styling/
We are currently using twitter Bootstrap for its grid system, navigation and input styling. In working with Kendo UI, we noticed that it has a theme system.
Is there a reference available on how to use the Kendo UI classes?
We imagine Kendo classes would replace our input and navigation markup, but what about our grid system? Does Kendo UI have a built-in CSS grid system?
Only the documentation of the classes. There's quite a bit of information but it's not exhaustive.
http://docs.kendoui.com/getting-started/web/appearance-styling
This is ancient now but just for anyone still wondering about the last part of the question:
We imagine Kendo classes would replace our input and navigation markup, but what about our grid system? Does Kendo UI have a built-in CSS grid system?
The answer to that is NO. Kendo has a data grid widget but no layout grid at this point in time. But they do keep adding to it. Their stuff is sort of compatible with the Bootstrap grid but if for instance you want to use the Bootstrap grid inside of a Kendo Window widget you need to adjust for the fact that they use different box sizing models:
/*=====================================================================*/
/* Box-sizing fix for using Bootstrap grid layout inside Kendo widgets */
/*=====================================================================*/
/* reset everything to the default box model */
*,
:before,
:after
{
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
This might be a little late but, just in case, there's a workaround. Fire up their handy ThemeBuilder. Click on "Download." Then look through the kendo.custom.css file they have. Lists all the CSS classes in plain sight.
You can also look through their kendo.all.css or kendo.common.css (depending on if you have their professional or open-source offering) in the src folder that came with your Kendo-UI download.
I am adding columns dynamically in the kendo ui grid. At the top of the grid the default text is displayed 'Drag a column header and drop it here to group by that column'.
At the footer of the grid the paging details are displayed including icon for navigation.
But, the grid is not displaying the border at the top and bottom, means the default text displayed at the top of the grid is not having the border and also the footer including the paging control the border is missing.
How can I add that border.
Thanks
For styling group header o a grid you need to include the definitions in k-group-header. Something like:
.k-grouping-header {
border: 5px groove red;
}
I am using jqgrid to display the data in 10 columns. There is one column PillName, we can store PillName as 100 caharacters in Database. While displaying in jqgrid, its displaying like in the following image:
How to show the value in a proper way so that jqgrid dont get distorted. Ideally, it should break after some characters.
or It can show some 10 characters and then after that ........(dots)?
Kindly Help?
Thanks.
I suppose that you have CSS conflicts between MVC and jqGrid. One sees problems already in the input field of the jqGrid pager. The problem for example can be fixed with additional CSS definition
input.ui-pg-input { width: auto; }
The close problem you have probably with <td> or <tr> elements. You can examine the styles of the grid cell with Developer Tools of Internet Explorer of Chrome oder with Firebug. You can also make a simple test and comment the whole MVC CSS or a large parts of the CSS. I suppose that the grid will looks OK after removing unneeded CSS declaration or including the fix like with the pager in the CSS of your projects.