Is there some way to make responsive grid's rows with direction column?
For example md=6 columns, sm=12 columns etc.
Finally I'm using useMediaQueries and Breakpoints to check condition true or false, then render elements...
Related
look at the pic
I don't want elements to change their positions especially in horizontal axis when their strings changed
I mean it should be like a table with fixed columns.
can I do this just with row?
It's probably because you set a defined width for spacing.
You could use a combination of Flexible & Expanded widgets to wrap all the children in your Row.
That should align them correctly.
You can find the corresponding code here
So, I passed the padding of the StaggeredGridView element manually, checking the index in the itemBuilder method, but there is a wrong index order. Starting from the 3rd index, the order is different, and after some scrolling there will be indices with other order.
Indexes:
After some scroll:
I can't use padding and axis spaces of staggered grid view for avoid leading and trailing white spaces of top horizontal categories list view.
How to solve that a problem?
Thanks in advance!
Assuming you are using the flutter_staggered_grid_view package. Staggered grid view doesn't order items from left to right and then vertically. Within a "row" of items, the one further up than the other will be first in order of indexes.
Check out the package documentation. There's a pretty self explanatory image there.
I am wondering if there is a way to effectively lock a column in Ag-Grid so that the column is always the very last column no matter what.
Background
What I am ultimately looking for is to avoid the blank space after the last column if the grid size is wider than all column width combined. This is to give the grid a consistent, professional look especially considering even/odd rows are rendered usually in different color. I would prefer the blank space also has that alternating background color.
Given there seems to be no grid property that forces the grid to render the blank space at the end as a pseudo column, I am therefore considering to add a pseudo column manually in such a way that:
the pseudo column has no header
the pseudo column has no data
the pseudo column is not sortable (achieved via sortable: false)
the pseudo column is not manually resizable (achieved via resizable: false)
the pseudo column is the only column which has suppressSizeToFit: false
lock the pseudo column to always be the last column so that user cannot drag a column to the right side of it
I've found a way to achieve everything apart from the last item in the above list. I know I can suppressMovable: true but that only ensures the column itself is not draggable, it does not prevent user from dragging a column to the right side of it.
Effectively, I am looking for something similar to lockPosition but instead of locking the column to the front I want to lock the column to the end.
Keep an eye on currently open AG-3326 issue in ag-grid backlog https://www.ag-grid.com/ag-grid-pipeline/
"Allow locking ( lockPosition ) a column to always be either the first or last columns (currently only the first column is supported)"
What I am ultimately looking for is to avoid the blank space after the last column if the grid size is wider than all column width combined
You could use sizeColumnsToFit() API for columns to adjust in size to fit the grid horizontally. Using this API, there won't be any blank space after the last column, but make sure you have not specified the width for at least one column. This is the column that will expand/shrink to fit the size of the grid.
Call sizeColumnsToFit() after the gridReady event has fired.
Here is an effective workaround to lock the right-most column until AG-3326 is implemented.
onColumnMoved: params => {
const columnCount = params.columnApi.getAllColumns().filter(c => c.isVisible()).length;
const maxIndex = columnCount - 2;
if(params.toIndex > maxIndex) {
params.columnApi.moveColumnByIndex(params.toIndex, maxIndex);
}
}
Any column that is moved to the right of the 'locked' column is immediately moved to the left of the 'locked' column.
I have copied the code column definitions and all attributes pertaining to resizing columns from the ag-grid examples for re-sizing columns in ag-grid vue, however I cannot resize my columns... the cursor will not even change to the "arrow" when I hover over the left or right edges of the columns.
Has anyone ever run into this?
If you are using ag-grid version 19.1.2 you can enable column resizing by setting [enableColResize]=true to ag-grid component
How to load a grid with the initial view scrolled to the right most column?
Docs for Column Properties say:
lockPosition Set to true to always have column displayed first.
But setting lockPosition: true on the right most column does not change the initial display.
Thanks!
lockPosition: true moves the column to the left most.
To scroll to any column on initial grid load:
in onGridReady function:
params.api.ensureColumnVisible("column field id");