I have issues with jqGrid column width.
Few options that I have set for my grid :
autowidth: true,
shrinkToFit: true,
width : 100%,
And the change that I have done in ui.jqGrid.css is as follows:
.ui-jqgrid .ui-jqgrid-htable {
table-layout:auto;
margin:0em;
} //for header - auto table layout.
Similarly I have done for body and footer.
Hope this helps. Please let me know in case there requires any other information.
Note:
I am using the latest jqGrid.
I referred to a similar question jqGrid header width different from data column width, but it was not useful in my case.
I have figured out the reason for the problem.
I had added a CSS previously for table ( meant for my custom table) and that has overridden the jQgrid CSS causing the issue.
table td {
padding: 5px;
border: solid 1px #e8eef4;
}
table th {
padding: 6px 5px;
text-align: left;
}
So I added the specific class the above one, so that it doesn't override jqGrid.
Sorry that I did not notice and figure it out earlier.
And also the need for change in table-layout property in jqgrid-css was not required. My motive being shrinktofit and autowidth.
Related
I have a table with headers for both the x and y axes, and want the table to scroll when it overflows on the y axis while retaining the header.
Using display: block; overflow-y: auto; in the <table> element gives me some scrolling, but I lose the y axis labels.
Here's a simple pen work-in-progress: https://codepen.io/Malgalin/pen/wNZRPz?editors=0100
I have also tried versions of making the th[scope='row'] elements have a fixed position, which sort of works, but it creates messy over-lapping headers and makes the initial blank top left corner cell disappear.
I'm happy to see answers using JS or jQuery if necessary.
You can use the sticky position for your headers. You need to change your HTML a little bit, you need a wrapper for the table.
<div id='table_wrapper'>
<table> .... </table>
</div>
Now you can set the TH elements to position: sticky and, for the thead, make it stick at top: 0px, for the tbody use left: 0px.
Using just that won't work on your actual code since you have some errors though. So, first close the thead tag and open a tbody tag properly (now you open the thead and close a tbody). The second thing you need to fix is to remove those display: block on the table elements, when you do that you break the table.
Check this edited codepen link https://codepen.io/anon/pen/daLrGZ?editors=1100
Note that you'll need to add some background to the th's.
EDIT: if you want the top left TH to stay over the rest THs add this:
table thead tr th:first-child {
left: 0px; //so it also sticks to the left
z-index: 2; //so it's over the rest
}
Maybe what you are looking is already solved, have a look and let me know:
https://stackoverflow.com/a/50649696/5796090
In the link above you can find a scrollable table with a fixed header using CSS Grid.
Basically you define 2 areas in your grid for thead and tbody and set an overflow for the second one.
table {
display: inline-grid;
grid-template-areas:
"head-fixed"
"body-scrollable";
}
thead {
grid-area: head-fixed;
}
tbody {
grid-area: body-scrollable;
overflow: auto;
height: 400px; /* define height depending on your needs */
}
Hope this help :)
Originally asked by #livfwd on GitHub.
It seems like the :before :after pseudo-elements break the table layout and put the placeholder in unexpected places when dragging rows within a table.
Are there any known workarounds for this?
ember-drag-sort uses a simple CSS technique to render the placeholder: :before and :after pseudoelements.
Unfortunately, this doesn't work with HTML tables because table semantics are very restrictive. To work around this problem, top/bottom padding on table cells can be used instead of selectors.
This is not a great solution because padding appears inside table cells. If you want your cells to have borders, you'll have to apply them to inner elements instead.
Tables are now part of the demo, please have a look.
Here are the CSS overrides used in the demo:
table {
width: 100%;
}
table.dragSortList.-isExpanded {
padding: 15px;
background-color: #f6f6f6;
}
table.dragSortList.-isExpanded.-isDraggingOver {
background-color: #eee;
}
table.dragSortList.-isExpanded.-isDraggingOver:before {
content: none;
}
tr.dragSortItem.-placeholderAbove:before,
tr.dragSortItem.-placeholderBelow:before {
content: none;
}
tr.dragSortItem.-placeholderAbove td {
padding-top: 25px;
}
tr.dragSortItem.-placeholderBelow td {
padding-bottom: 25px;
}
table .the-item {
margin: 0;
}
If this approach does not suit you, unfortunately, this addon currently cannot offer anything else. You'll have to either revert to divs or use another drag-sorting addon.
I'm getting this weird behavior from ui-grid which if I set the rowHeight to auto, each cell in a same row will have different height. One of the cells in each row will have multiline data, but apparently ui-grid will choke on that. (I colored the row so you can see what is wrong!) Any idea how to fix this? I mean to get same height for all the cells in each row. How do you handle different row heights in a same grid?
Use CSS
[ui-grid-row] {
display: table-row;
}
.ui-grid-row, .ui-grid-cell {
height: auto!important;
}
.ui-grid-cell {
float: none;
display: table-cell;
}
.ui-grid-header-cell, .ui-grid-cell-contents {
white-space: normal;
padding: 2px;
word-break: break-word;
}
Use JavaScript
When you are using multiselect the height of the check column don't change, so you can set enableRowHeaderSelection: false. It will hide this column but still you can select the rows or if you want you can use this function from #jibap to align containers http://plnkr.co/edit/JwbEmPhJq2LInfUNncdi?p=preview
Virtualization is pretty much impossible without pre-defined row heights. You'll find the same limitation with any virtualized list tool. Check Ionic's collection-repeat for instance.
The problem is that UI-Grid is only displaying a subset of all the rows at any given time, but in order for it make it appear like all the rows are there it has to create empty space around the rendered rows. If it doesn't know how tall all the rows are, it doesn't know how much empty space there should be.
If you wanted automatic row height it would have to render each row individually, measure it, then sum up all the heights. This would completely thrash the browser.
I'm using the "ngTable" component (enter link description here) in my AngularJS app to present tabular data. It's a little simpler to use than ngGrid, and I don't like how ngGrid configures your table (I especially don't like putting the table header strings in javascript, instead of in the HTML).
Although ngTable works well enough, there appear to be some limitations in its configurability. For instance, I'd like to just add column separators to the header and cells. The way ngTable is referenced in HTML, you don't specify the table header elements, just the cells. I suppose I could put a class on the "td" elements to add separators to the cells, but that wouldn't affect the header.
Anyone got some ideas of how to do this?
You can just do that in CSS
table.ng-table thead th:not(:first-child) {
border-left: 1px solid red;
}
table.ng-table thead th:not(:last-child) {
border-right: 1px solid red;
}
table.ng-table tbody td:not(:first-child) {
border-left: 1px solid blue;
}
table.ng-table tbody td:not(:last-child) {
border-right: 1px solid blue;
}
Example here: http://plnkr.co/edit/t77lzM1o6Xh2PBnhZqw6?p=preview
The only downside to this approach is that it won't work in IE <9.
To get it to work on IE <9 then you would have to add classes to each column when you define the <td> and match them in css.
If you only want a border for a specific column then the css is actually easier as you can just add a class to the column you want the border on and then in your css just add a border-left or border-right for that td.col-style-name
I want to add css class to td which is created dynamically and this is portion of my code
var newTD = document.createElement("td");
td is created but border is not coming.
td is added into table properly when user clicks on plus button.css is not applied.
css class is
table.ms_grid td, table.ms_grid table td
{
padding: 3px 5px;
border: 1px #D3E4F5 solid;
cursor: pointer;
}
this code is part of my project
please suggest solution.
Most table cell borders won't display unless there's something within.
The old method was to add a inside however I believe there's a CSS property to always show borders. Will edit if I find it.
There it is, empty-cells, supported in everything (current) except IE7 and below