With jqGrid if width of columns are not specified, they share the width of the grid equally. (ie. if the width of grid is 400px and there are 4 columns, they all occupy 100px width). Is there an option to handle this in a smart way so width of the columns can be upon their content?
For example let's say there are two columns: name and info. Assuming average length of names is 60 chars, whereas average length of info is 400 chars. If the grid has a width of 460px, name column should has a width of 60px and info column should has a width of 400px.
Some kind of autowidth-to-content functionality is needed. I think there is a little possibility about that because if I dynamically resize the grid, then the width columns somehow changes and fits according to their contents.
Thanks in advance.
You could dynamically resize the grid in the `loadComplete', to make column width better fit the content. Normally I will just choose column widths that are satisfactory for each row and that tends to be good enough. There is also a method for showing an ellipsis for content that is too wide to fit within a column, although unfortunately the technique is error-prone in firefox.
Related
Can someone help me understand the grid layout used in Nativescript, in particular the GridLayout? What does the (star) followed by auto actually mean?
<GridLayout rows="*, auto">
And then I came across this even more confusing example:
<GridLayout rows="*, auto, auto, auto, 2*">
I am finding the documentation for the Nativescript not so clear.
The documentation states the following:
A string value representing row heights delimited with commas. Row
heights can be either an absolute number, auto or *. A number
indicates an absolute row height, auto makes the row as high as its
highest child, and * makes the row occupy all available vertical
space.
I think it is important to first distinguish between auto and *, since they do something different. When you use auto as a value, the GridLayout will grab the height of the child element with the highest height value and make that the height of the row. So if you have a GridLayout with one row containing several columns, one with a height of 20, one with 30 and one with 40, the row will have a height of 40 and columns in that row will match that height.
If you use a * instead of auto then the GridLayout will use all available space for the height of that row. So if the height of your GridLayout is 100, the row will also have a height of 100. When you put a number in front of the star, you are basically dividing, so if you have rows="2*, *", the first row will have two thirds of the height of the GridLayout and the second row will have one third of the height.
I am not sure if the concept of the rows attribute is clear, but to clarify you are defining the height of multiple rows by adding commas, so for example: <GridLayout rows="*, auto, auto, auto, 2*"> contains the height for five rows. The first and last rows will use the remaining space after the height of the three columns with the auto height have been determined.
The NativeScript documentation contains some images to showcase what it looks like, which can be found here.
I'm starting with JavaFX on a new application and I want to get a layout on screen identical to WPF's UniformGrid. There's TilePane but it's different (similar to WrapPanel I guess).
My approach so far would be (for a collection [size = N] I want to display as "tiles"):
Use a TilePane t.
t.setPrefRows( ROUNDUP( sqrt(N)))
That's probably not the best approach.
Do you know a better solution? Maybe a resizable one?
It sounds like you want a layout which:
Has a fixed number of cell nodes in each row.
Each cell node has the same height and width.
I'm not familiar with WPF or UniformGrid, but I think the above is what you want.
TilePane likely isn't a Good Fit
It seems like TilePane would be a good fit for this, but, as you found out, it doesn't really exhibit this behaviour out of the box. With a TilePane, you set a preferred number of rows, but as you resize the TilePane the number of rows and the number of columns can change as the tiles are rearranged to fit the available area.
Use a GridPane with Binding and Preference Settings or Constraints
To get a fixed number of cells per row, use a GridPane. A GridPane will keep a fixed number of rows and columns as it resizes. To ensure that each cell node has the same height and width, you can listen to the height and width properties of the GridPane and, on change, set the min/max/preferred sizes of the child elements so that they all have the same size. Or set some constraints on the GridPane rows and columns such as setPercentWidth and setPercentHeight.
To demonstrate this approach, the ColorChooser sample provides some code for a re-sizable ColorChooser with a fixed number of color swatches per grid row and as the overall containing grid grows or shrinks, the color swatches are grown and shrunk to fit the available area as appropriate. The color swatches themselves don't necessarily maintain the same height/width ratio, but you could easily achieve that by setting appropriate min/max/preferred sizes on the child elements.
Create Your Own Layout
As an alternative to using change listeners and setting min/max/preferred sizes on children, you could implement your own layout manager by subclassing Pane to create a UniformGrid class and implementing the layoutChildren method. In layoutChildren, arrange the size and position of UniformGrid children as needed. You can refer to the source code of an existing Pane to find an example of how to create your own layouts.
Investigate 3rd party Layouts
The ControlsFX project has a GridView or MigLayout which might provide the functionality of a UniformGrid.
Is there any Cocoa control equivalent to WPF's itemscontrol? I have been using a single column, view based NSTableView but can't seem to get individual rows to size to fit their content, or even to get different height rows (all views are sized to be as tall as the tallest one).
More generally speaking, is there any way of getting views to size to fit their content? I have been using constraints, but seem to only be able to make views size according to their container's size.
You should use NSTableViewDelegate and it's -tableView:heightOfRow: method to specify the individual row height.
I'm working in BIRT reports. I'm facing some issues with when importing the report to pdf format.
this is the issue I'm facing
Report is generated successfully in BIRT viewer. But when it exports to the pdf report alignment will change.It prints only left to right around 80% from the original report.I think issue with print area.In designer it report width is more than the print with.I try to reduce it but I couldn't reduce the width of the table.I think reason is the table i'm using in the report. Table has 8 columns so I couldn't reduce the width of columns. column has minimum width, I can't reduce more than than.
So what can I do to this issue ?
Anyone knows the solution to this issue ?
Thank you in advance
You could try making the font in your table one of the relative sizes (small, medium, large) rather than a hard 10 pts, 12 pts, etc. And then make the column width a percentage instead of a definite pixel number. E.g. column 1: 15%, column 2: 10%, column 3: 5%, column 4: 20%, column 5: 20%, column 6: 30% - or however it best fits the contents.
There isn't much you can do beyond that because you are rendering it onto a PDF document that is going to be the exact size of your master page, however you have that defined (letter size, legal, etc). If you haven't changed the orientation of your master page from portrait to landscape (on the master page tab), you could try that if it is workable for you.
Specifying the sizes, padding, margin etc in mm (or inches) works well. This also ensures exact measurements. The background images are exceptions, because they're pixel-based.
It's easy to resize images so that they all have the same height while maintaining the aspect ratio, but how did they fit them all on a row such that every row has the same width? Did they crop some of the images or what?
Remember in google images (apart from cropping) -
Spacing between images are not always exactly same.
Height of all images in a row are also not always same.
Using above 2 techniques i.e. tweaking the spaces between images and changing size of image little bit by compromising height you can achieve this. In fact the the justify paragraph option in the text editor also use the spacing technique. They evenly distribute the extra spacing between all word.
You don't always get a good spacing in google image search. See this -
alt text http://dailycoding.com/filesharing/Google_image_search.jpg
they actually figure it out through an algorithm to put images next to eachother so with the padding and everything they end up being the same width then they cache that page for the keyword you searched for!
I found a very interesting article while looking for the same thing. If you look at google images you can see not all of the rows have the same height. but all the images in a row have the same height. So what you want to do is calculate the right height you need for the row so the images will fit (the images stretch if they get higher or lower). This article will possible help
http://blog.vjeux.com/2012/image/image-layout-algorithm-google-plus.html