I have a Kendo grid with too many columns. Initially I chose to hide some columns, but later I decided to display all the columns with a horizontal scrollbar.
I did this by assigning a width to each column. When I did so, the lines between each column are not in sync with the header lines.
I mean, the lines in the data part of the grid, are moved slightly to the left with respect to the header lines.
To clarify, when I give the width for each column in pixels the above problem persists. But, when I give the width in %, the scrollbar is not displayed.
I want to display the scrollbar to show all the columns.
Any ideas about how to do this?
Here is quite straight forward grid with horizontal scrollbar (ignore the virtualization) http://demos.kendoui.com/web/grid/virtualization-remote-data.html.
Have a width on your grid or it's parent and width for each column with their sum over the actual grid width then you get your scrollbar:
{ field: "OrderID", title: "Order ID", width: 60 },
(I did quite few Kendo grids in the past and never experienced such issue. Sounds like you setting up the column width directly on the html, I can't see how else would Kendo get out off sync.)
Related
Created a Grid using Kendo MVC Grid. I haven't added any fixed column width and Kendo is adjusting the column width based on the content/header length. But the spacing between the columns are not consistent.
I would like to know that how the Kendo distributing the empty spaces? Or how Kendo distribute the column widths.
I'm trying understand more about the empty space distribution on Grids.
Thanks You!
I'm creating a pivot table using jqgrid with group headers. I do some calculation on input data to figure out if combined column width would exceed the fixed width of grid. If it does not exceed then i would change shrinkToFit : truefor grid to occupy full width. If I do it, then dragging column width creates alignment issues between header and body.
Problem gets worse if frozen column are enabled. The fixed header div wont expand like the column underneath it if shrinkToFit is enabled.
Here is a demo to understand the problem : http://codepen.io/anon/pen/NbxWrQ
Any leads will be helpful.
Thanks in advance.
You can use a GeneXus HTML table to layout text blocks and attributes. If I add a second table to contain some other information that I want to conditionally display, quite often, the first cell is a different width to the first cells of the table stacked above it.
How do you make all the columns/cells the same width so that stacked tables display with their contents correctly aligned?
This is for GeneXus Web in Evo 2 & 3.
Thanks
Put a value in the width property of the client table first cell.
So, put the same value in the width property of the password table first cell.
Remember that the width value must be enough for both tables. In your case, the biggest textblock is the "Client Name". So, choose a width enough for that.
Best regards.
If you don't set a width, HTML will assume the minimum width required to accommodate the content. If you don't want it to be set automatically when when the page is displayed, you have to decide on a width.
In your case, you have to put the same width value for a cell (any cell) in the first column of both tables.
jqGrid edit and view forms row labels (they are same as column captions ) are set at runtime.
Sometimes they are narrow and sometimes wide.
For narrow labels column width in too big. There is too much empty place between label text and value field.
It looks like labelswidth: '30%' value is hard coded.
How to adjust edit and view form labels columns width automatically so that if all labels are narrow, column width is smaller ?
The first which I would try to do is to use the values in pixel instead of percents:
labelswidth: 80, width: 600
I'm having hard time with tables and column widths.
Update: I'm using XHTML Strict 1.0.
The page is: http://www.pro-turk.net/try
The first problem I have is, I have a column with a fixed width of 100px and 4px padding, but it disobeys my padding depending on the value. The column width (as the distance between two borders according to W3C Box Model) is 156 px even if padding is 0 or 4. Only the position of the text changes.
According to W3C Box Model ( available at www.pro-turk.net/box_model.png ), borders and paddings aren't included in WIDTH attribute, so why does it render wrongly ?
The second problem is, when you look the page I gave with IE8, the first cell in the second row has 150px fixed width, but ie shows it about 50% of the total table width regardless of what i say.
You're using the default auto table-layout mode. That lets the browser decide fairly arbitrarily how much space to assign to each column, usually depending on the amount of actual content in the cells. In this mode, width is little more than advisory.
If you want the browser to take your column widths seriously you should set table-layout: fixed on the <table> element, and either include <col/> elements with explicit widths, or set widths on the cells in the first row, for the columns you want to be fixed-width. (The other columns will share the remain width equally.) fixed table layout also allows the browser to render faster.
For your page you might be better off with CSS positioning. Certainly for the internal table that seems to exist only to float-left the image. Nested tables are to be avoided.