I am trying to Reduce check box width in grid but unable to reduce
There are several options:
You can reduce the width from the column's header (if it does not have AllowResize = False).
The width can be automatically adjusted by clicking the |<->| icon from the grid's toolbar.
Click on the top-left icon (which opens the hidden columns list) and then 'Reset to default) -> this will reset the column's list and also their size.
If you have access as customizer, you can set the width for this column: I would recommend 30px
Related
I am creating a dialog with MUI which contains three types of content whose width is very different.
First, I need to upload an image and in the second content I need to crop it and third I have to be able to add a caption for it. So how do I set the width for the dialog such that even if images of varied dimensions are chosen it is completely shown?
For that dialog, add sx = {{ width:'fitContent' }} and try if that works
I have create a Ext.Panel with layout 'hbox', added 4 children, tree grids with the same store and want now to have a single vertical scrollbar for all of them and scroll only the content of the grids and not the headers. I searched through the containing Panel options and scrollable option will scroll the entire layout so, the optional horizontal scrollbars of the children will disappear. Can someone to give me a hint from where to start, what option/component to use to accomplish this single vertical scrollbar?
Why I put 4 tree grids in the same panel using the same store? Because the last one is a Bryntum Gantt component. The first column of the first grid should scroll horizontal when the items are too long and don't want to use ellipsis CSS property on the cells. And from time to time I need to switch the Gantt to another grid with more details. Also the second tree has only dates columns on them and have to be locked whenever gantt or other child toggles visibility.
I use ExtJS 6.0.1 Classic.
Thanks in advance
Because you want to keep the headers, you cannot use the panel scroller. Instead, you have to create mutual partnerships between the grid scrollers:
Ext.each(grids,function(grid) {
if(grid.normalGrid) grid = grid.normalGrid; // Use the normal subgrid of a grid with locked columns.
Ext.each(grids,function(partner) {
if(partner.normalGrid) partner = partner.normalGrid; // Use the normal subgrid of a grid with locked columns.
if(grid != partner) grid.getView().getScrollable().addPartner(partner.getView().getScrollable(), "y"); // "y" tells the scrollable that the partnership is only regarding y axis.
});
});
This forces them to stay in sync, as per the docs.
When I press a button, my app displays a calendar (within a Dialog) that slides from the bottom of the screen:
I want the Calendar to occupy the whole width of the screen, but it shows some white padding on both sides and also on the top and bottom (It is white because the "Dialog" UIID has a white created image as background)
I have tried changing all the UIID related to Dialog: "Dialog", "DialogBody", "DialogTitle", etc. I set all margins and paddings to cero.
How can I get rid of that padding?
Try change both the DialogUIID and the UIID of the dialog. Also make sure your calendars margin values are set to zero. It could be that your calendar is too small. Try placing it in a table layout with 1 row and 1 column then in layout constraints set the width and height to 100%
Open up the Component Inspector tool and traverse the hierarchy. You will be able to see all the components and their UIID's within the hierarchy and you should be able to understand which one of those components contributes to the padding/margin.
Currently I use l-lin/angular-datatables and the col resize plugin in order the user resize width columns. But still I need no wrap content when first load the table so the columns on first load must be the maximum width without any break lines in the content of any of the visible cells in that column.
Do you know a property or plugin for this?
Very important: I know the CSS config property nowrap for datatables but the problem is when I use it I cant resize with colresize plugin I need the user can reduce width of columns but this property do not allow because no wrap CSS only allow increase the width of columns but no decrease.
I thought it would be necessary create a angularjs directive for setting the white-space property : nowrap of CSS on firts load.
Thanks in advance
I have a grid and i am trying to autosize its columns after getting data, using autosize() method of sencha. This grid's parent has border layout. autosize() method is not working for in this case.so I tried setting column size using html content.
var el = gridObj.el.dom.childNodes[me.el.dom.childElementCount - 1].childNodes[0];
if(el.childNodes.length > 0){
el = el.childNodes[el.childElementCount-1];
if(el.childNodes.length > 0){
var trows =el.childNodes[el.childElementCount - 1].childNodes;
this code gave me html 'tr's. looping on them i got some width of column and I set them to respective columns of grid. but i am unable set the sum of those column widths to the grid. this is only case if, parent of grid has border layout or fit layout. For these layouts, i have tried to set grid body width( gridObj.el.setWidth(400)),it worked fine, but i am not able to set width to header and top/bottom toolbar in the same way.
can any one help me in resizing columns for these layouts either seeting width to grid or setting width to all(grid header/toolbar/body)?