I am struggling to get my grid to reliably display its column widths evenly when using api.sizeColumnsToFit().
I have configured my grid to resize the columns when the parent div/browser window resizes:
this.gridOptions = <GridOptions>{
onModelUpdated: () => {
this.gridOptions.api.sizeColumnsToFit();
},
onGridSizeChanged: () => {
this.gridOptions.api.sizeColumnsToFit();
}
};
This works, but the resulting column widths are more often than not uneven. Please see the first and second day of the month for week 13 below:
Any suggestions to make this more reliable will be very welcome.
Here is a plnkr with a possible solution for you. In essence here is what you could do:
var windowWidth = document.querySelector('#myGrid').offsetWidth - 170 - 17,
// calculate the window width minus any columns you don't want to size for
and a little magic number for the vertical scrollbar (17 was for chrome on mac)
sizableColumns = gridOptions.columnApi.getColumnState().map(e=>e.colId).filter(e=>e!='athlete'),
// get the colId of only the columns that you want to resize
sizableColumnWidth = Math.floor(windowWidth/sizableColumns.length);
// calculate the width of each column by dividing the available width by the number of columns
sizableColumns.forEach(e=>gridOptions.columnApi.setColumnWidth(e,sizableColumnWidth))
// iterate through the columns you want to resize and set their new column width
However, I think that you might be better off by considering how many users are going to be resizing their browser windows... not only that but resizing their windows slowly multiple times. Check these posts:
http://davidgoss.co/2014/04/15/users-do-resize-their-browser-windows-take-2/
https://medium.com/#stephenkeable/do-users-resize-their-browser-windows-or-is-it-just-developers-and-designers-e1635cbae1e1
Both of these posts indicate that roughly 2% of desktop users are resizing their browsers. And a much smaller portion will be resizing their browsers slowly multiple times. Perhaps you simply tell these <1% to not resize their browsers like they do, or allow for the columns to be manually sized so that if they do notice this odd behavior they can resize the columns themselves.
Technical Note:
Your reported behavior is happening because the algorithm to size the columns to fit is quite sophisticated. It takes into account the relative sizes of all the columns and widens them appropriately, so if you had 4 columns sized 100, 200, 100; and you resized the window, then the middle column will still appear as twice the size of the others.
The algorithm is also placing whatever is leftover in pixels to the first column so if you have 9 columns and 100px to fit it into, 8 columns would be sized at 11 px and one would be sized at 12. That way the columns will truly "fit" and not leave a few pixels not filled by columns (like my suggested option)
Related
I'm confused with the bar with adjustment in MATLAB, for example, when use bar like:
bar(randsample(0:0.0001:1,100),randn(100,1))
I get an image like this:
It seems like the bar is too thin to have a good look. After searching for help, I can use the code like:
bar(randsample(0:0.0001:1,100),randn(100,1),50)
and I get this:
Seems much better. But if I change the sample number from 100 to 10, the same code won't work.
bar(randsample(0:0.0001:1,10),randn(10,1),50)
I hope I have explained my issue clear. It seems like the third parameter of the bar function is a relative width, which correlates to the input size of the first and second parameter. Can I fix the absolute bar width no matter how many data points input? or there is a better function to draw figures like this? Thanks a lot for any help!
user #am304 is right about the width parameter
What happened in your code is that you set x values to results from randsample(0:0.0001:1,10)
If you give your plot a width of 1 it means that 2 bars which are directly next to each other would touch each other with an equally spaced x.
In your case, you have an irregular x spacing.
The width of the bar is determined by the minimum distance between two x values (which you get from randsample()). Sometimes this space - and therefore the width of your bar - is very tiny. Sometimes it is broader.
Change the with to 1 and make multiple plots. You will notice that two are always touching each other and no one is overlapping and all the others have spaces in between. If you change the width to 50 the plots will somethimes overlap heavily (depending on the randomness from randsample) because your bars are 50 times bigger then the minimum width between two x values.
In case of your randsample(0:0.0001:1,100) example it is just more likely that two values are close to each other, therefore increasing the width helps you see something (because the bars overlap).
From the documentation:
bar(___,width) sets the relative bar width, which controls the
separation of bars within a group. Specify width as a scalar value.
Use this option with any of the input argument combinations in the
previous syntaxes.
The example provided is as follows:
Set the width of each bar to 40 percent of the total space available
for each bar.
y = [75 91 105 123.5 131 150 179 203 226 249 281.5];
bar(y,0.4)
So bottom line is: the width is specified as a % of the total space available for each bar. Yoru problem comes from the fact that you have far too many bars, so the space available for each bar is tiny. Setting the width to 50 or 5000% of the space available just means that each bar will overlap quite substantially on the neighbouring bars. Because you have so many, the middle plot looks "reasonable" as I suspect a lot of the bars are overlapped and a lot of them are at zero, so you just can't see them. If you go down to a sensible number of bars, as in your last example, then setting the width to 5000% looks ridiculous as you found out.
So to summarise: reduce the number of bars and specify the bar width between >0 and 1 (1 being no gap, all the bars touching each other).
A better way to plot things with random x locations is to use stem. By default, it draws a line from the zero line to the datum, with a circle representing each datum. But this can be modified. For example:
stem(randsample(0:0.0001:1,100),randn(100,1), 'Marker','none', 'LineWidth',4)
creates a plot similar to your second attempt, but with bars of a fixed width (4 points).
Currently, each column has a pixel width. So there are 2 issues I'd like ot tackle here: 1.) If there are only a few columns, I’d like columns to fill the entire table so there is not empty space. So for example, if there are 3 columns, each of those columns will be 33.33% wide. 2.) We'd like to remove avoid horizontal scrolling by either having the column widths fit to the content or also allowing cell content to wrap if we need to. Bonus: If there's a way to say, "Hey if there are an extremely high number of columns (like 70 columns for example), then use a horizontal scroll" that'd be awesome! Thanks for any help!!
Instead of this:
pixelWidth
Like this:
percentageWidth
and
Instead of this:
enter image description here
Like this:
enter image description here
I'm trying to build an app that has just a single portrait oriented view. There is a title on top and results label at the bottom of the view, these are locked to top and bottom and center, no problem here.
Now this is the tricky part. I have 9 rows of labels, most single row but couple span out to 2 rows. I want them to spread out evenly between the title and the result-label.
I lock the first label to top-left, lock the leading edges and then set equal vertical distance constraints between the labels. Otherwise ok but the last labels on 3.5 inch display overrun my results -label.
So I adjust either the fontsize or make vertical distance between labels smaller or both. 3.5 inch problem fixed but now there is a big empty gap between the last label and result. On iPhone 6 its really ugly.
I have tried all sorts of methods but can't just get this working.
So basically: how do I reserve 10 % of view height from top and 20 % from bottom and tell Xcode to use the rest 70 % (and all of it) for my 9 rows of label, evenly?
Thanks for help!
Would have posted an image but no rank for such things...
If I understand you right, you need several flexible spaces that will all be the same size. One space in-between each of the labels.
Create UIViews to put between each label, set them all to have equal widths or heights and anchor each one to the views it is supposed to sit between.
I got this idea from another SO question: Springs in Auto Layout: Distribute views evenly, with constraints, in Xcode 5
I am creating one pdf file showing a list of all employees and their salaries. At the end of the page it is showing the total of all salaries.
I am using a for loop to add multiple rows to table.
The problem is:
at the end the row, the total salary doesn't fit on the same page and it is shown on the next page.
So is there any way that I can calculate the height of the page and then fix the height of each cell? And then accordingly, limit the number of rows.
So that at the end of the page, I can show the total number of rows and further record from next page.
Calculate the height of the page: well... you decide on the size of the page when you create a Document object. You can choose any size you want.
Calculate the height of a PdfPTable: that's explained in chapter 4 of my book. When you create a PdfPTable, you add PdfPCell objects to an object that only exists in memory and that doesn't know anything about page size. By default, the width is expressed as a percentage of the available width of the page to which you'll add the PdfPTable. Only when you add the PdfPTable to a specific Document, the exact width and the height will be calculated (which is too late for you).
If you want to know the height in advance, you need to define an absolute width (not a percentage). Tables with the same content and a different width will have a different height. Defining an absolute width is done like this:
table.setTotalWidth(width);
table.setLockedWidth(true);
In this snippet (taken from the TableHeight example), width equals the width of the page minus the left and right margin. You're defining the width of the page and the margins upon creation of the Document object. By default, the page size is A4, so the default width is 595 user units and the default margins are 36 user units.
So, one way to solve your problem, would be to add rows in a loop and calculate the height of each row with the getRowHeight() method or the height of the complete table with the getTotalHeight() method (both methods will return 0 if you omit setting the total height). If you see there's not enough space to add the summary row, you can use the deleteLastRow() method to remove that last row and to create it anew in a new table on the next page.
That's one solution. Another solution could be to use table and cell events, but that's more difficult to explain.
I'm using FreeType2 for font rendering, and I need to get a global bounding box for all fonts, so I can align them in a nice grid. I call FT_Set_Char_Size followed by extracting the global bounds using
int pixels_x = ::FT_MulFix((face->bbox.xMax - face->bbox.xMin), face->size->metrics.x_scale );
int pixels_y = ::FT_MulFix((face->bbox.yMax - face->bbOx.yMin), face->size->metrics.y_scale );
return Size (pixels_x / 64, pixels_y / 64);
which works, but it's quite a bit too large. I also tried to compute using doubles (as described in the FreeType2 tutorial), but the results are practically the same. Even using just face->bbox.xMax results in bounding boxes which are too wide. Am I doing the right thing, or is there simply some huge glyph in my font (Arial.ttf in this case?) Any way to check which glyph is supposedly that big?
Why not calculate the min/max from the characters that you are using in the string that you want to align? Just loop through the characters and store the maximum and minimum from the characters that you are using. You can store these values after you rendered them so you don't need to look it up every time you render the glyphs.
I have a similar problem using freetype to render a bunch of text elements that will appear in a grid. Not all of the text elements are the same size, and I need to prerender them before I know where they would be laid out. The different sizes were the biggest problem when the heights changed, such as for letters with descending portions (like "j" or "Q").
I ended up using the height that is on the face (kind of like you did with the bbox). But like you mentioned, that value was much to big. It's supposed to be the baseline to baseline distance, but it appeared to be about twice that distance. So, I took the easy way out and divided the reported height by 2 and used that as a general height value. Most likely, the height is too big because there are some characters in the font that go way high or way low.
I suppose a better way might be to loop through all the characters expected to be used, get their glyph metrics and store the largest height found. But that doesn't seem all that robust either.
Your code is right.
It's not too large.
Because there are so many special symbols that is vary large than ascii charater. . view special big symbol
it's easy to traverse all unicode charcode, to find those large symbol.
if you only need ascii, my hack method is
FT_MulFix(face_->units_per_EM, face_->size->metrics.x_scale ) >> 6
FT_MulFix(face_->units_per_EM, face_->size->metrics.y_scale ) >> 6