Is there any way to set columns width to match the width of the max length content? I want to make the first column that shows the counter of the row to autosize the width and not style it with text-overflow: ellipsis; which seems to be the default behavior.
See below screenshot regarding the first column:
Any idea would be helpful. Also new to ExtJs framework.
You can use the flex config. It's kinda a weighted value and lets you tell the container how much of the total area you'd like to give that component.
So, say you have 4 columns and you set each flex config to 1, they each get 1/4 of the total width.
Set the first column to flex: 1 and all the other flex: 2. Or set all the other columns to flex: 1 and the first column to flex: 0. Just play around with the value until you get the look you want.
Hope this helps.
Related
I am working with React Suite's Grid to display university course data in a calendar format. The grid works great, other than the cell heights not being uniform: An image example of my Grid UI
Here is the code I currently have for the grid:
<Grid
style={{
width: "100%",
height: "100%",
}}
data-testid="grid"
>
{this.state.data.map((c) => (
<Row>
{c.map((e) => (
<Col className="display-linebreak" style={this.formatCell(e)}>{e}</Col>
))}
</Row>
))}
</Grid>
Is there any way to make the height of all cells consistent across their respective row, while still making the grid flexible enough for data intake of a variable number of dates and times? One way I tried to do this is by adding {{ height: "100%" }} as inline style for the Row, but I quickly realized that this or any similar approach will not work, as ultimately it is the cell height that needs to conform to a dynamic row height, based on the automatic heights of the other cells. Another thing I considered is that it may be easier to isolate a cell with respect to a Row if Column is the parent component to Row instead of the other way around, but I don't think this is possible in React Suite Grid.
Basically, my conundrum is, how can the cell know how tall it has to be if there are cells in the row that have not been rendered yet? Is it possible to go back and update the height post-render if a taller cell is found? How does a cell even know which row it is in?
Any tips or insight is greatly appreciated, I am happy to clarify anything or answer questions about it. Thank you in advance!
I did it with adding flex to the rs-row:
.rs-row{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
Then you can add height 100% to the cols or cards elements inside of them.
In an antd table I am trying to use the columnWidth property in expandable to set the column width as the minimum. In my table the width for the expandable icon column is very big and by default it's quite large for me. I've tried giving a string | number as said so in the documentation but it doesn't seem to work. Is there any other way to set it to a minimum?
expandable={{expandedRowRender: record => <p style={{ margin: 0 }}></p>,
columnWidth: 1,
expandRowByClick: true,
}}
I've tried to use style and margin as 0 but even that isn't making a difference and columnWidth doesn't seem to work.
Currently the default behavior of PrimeNG DataTable is that it adjusts its height according to the number of rows to display.
We can fix the scrollheight, but if the number of rows are less table again adjusts to a smaller height.
You can set min-height to the body of this table. Try this:
::ng-deep .your-table .ui-datatable-scrollable-view .ui-datatable-scrollable-body {
min-height: 27vh;
}
You can try this: [tableStyle]="{'min-height': '30rem'}"
I have a problem with aligning text in a single row I tried using Fexl approach as well as other approaches as well
also some of the data in my div is rendered dynamically using ng-repeat
the third column displays special data always.
all the rows from 3 columns should be aligned equally
please help me
link for plnkr http://plnkr.co/edit/LSLktvmvlaQtWUofzJvF?p=preview
I think I understand your question - I ran into a similar problem on another project, and I ended up giving each div a fixed height and setting the overflow to hidden. It takes a bit of testing, but if you're aiming for a responsive design, you can uses Sass to set it to different heights based on screen resolution.
Adding this CSS to your Plunkr would be a good starting point. Of course, you'd want to apply this to a custom class and not '.col-md-6':
.col-md-6 {
height: 100px;
overflow: hidden;
}
Increase the 'height' as needed to make sure all text fits.
I have multiple forms and want to use one Window class to view them. Now it happens that all forms have a different size and I don't want to manage all of them so I thought about the 'fit' layout along with a min/max wight/height for the Window.
But that would be to easy, if I have applied dockedItems the layout messed up along with error that the layout failed. Whatever this error is supposed to tell me... But OK I googled and found out that I need to define a height and a width to make this error go away along with a new special property called: shrinkWrapDock which should tell the layout to depend on the size of content.
So again my Question
Which Layout would I take when I want to auto fit a form in a window while the window has a max-/min-size?
Edit
It don't has to be strictly a form, it is just Ext.window.Window configured with a 'fit' layout which should maintain a min / max size for itself. So a very small item within the window may have unused space while a very large one get scrolbars. All in between the min/max of the window are scalled exactly.
e.g.
// lets say we have a window configured like this
{
xtype:'window',
minHeight: 50,
maxHeight: 500,
layout: 'fit'
}
To small form -> adding a form with just one textfield.
Window uses minHeight: 50 because one field has only a height of ~40 px
Fit within min/max -> adding a form with 6 textfields.
Windows scales to size required by the form ~ 240px
To height form -> adding a form with 20 textfields
Window uses maxHeight: 500 because 20 field has a height of ~800 px
Use a panel inside window(which has fix max,min ht wdt) as parent container, use flex property for it items i.e your multiple forms
eg :
{
xtype:'panel',
itemId:'somePanelId',
layout :'fit',
items :[
{
xtype :'form',
flex : 2,
items [{..}]
},
{
xtype :'form',
flex : 3,
items [{..}]
}
}
Try different combinations of flex for each form as per each form's size. While giving flex consider as fix number say '5' here as outof i.e 2/5 size for form1 and 3/5 (three out of 5) space for form2.