I want to set row auto height in ag-grid-vue to adjust multiline content. I am able to achieve it through autoHeight: true for the specific column in column-defs. But it loses min height adjustment of the grid. min height is set using :row-height="50". If I remove autoHeight from column def then min height 50 is working. I also tried setting rowHeight: '50px' in gridOptions but it is not helping.
I want to increase row height based on content when specific column has more content. and for other rows I want to retain min height 50.
columnDefs:[{field:'column1', headerName:'Column 1',width:100, autoHeight:true},{field:'column2', headerName:'Column 2',width:100}]
<ag-grid-vue
style="width: 500px; height: 200px"
class="ag-theme-alpine"
:columnDefs="columnDefs"
:rowData="rowData"
:row-height="50"
:grid-options="gridOptions"
>
Thank you!
I am able to set minimum height using below css override. autoHeight is set in columnDef for one column. It adjust row height based on content. and below css apply minimum height for all other rows to 50px instead of 25px (which is ag-grid default)
.ag-theme-bootstrap .ag-row {
min-height: 50px
}
Related
I searched a lot, but every solution was to include some constant CSS class names into the page, and use the Column's ClassNameGenerator to set the proper classname on the cell/row.
Now this might be a good solution when the developer can decide on formatting a cell, however when a user can decide (especially with a script written as cell renderer) how a cell will look like, it is not possible to use the ClassNameGenerator.
So question is, how can I format the cell/row background programmatically, not using any CSS? I can provide custom component as cell value. So it's fine to render a label with icon, or just icon, or a checkbox, however coloring this rendered component is not enough, since this is smaller than the cell itself, making it look really ugly. I need to access the root element of the cell, and color it using getStyle().set("background", "xxxx"). How to achieve this?
Thanks!
You can use a TemplateRenderer.
For example:
Grid<Person> grid = new Grid<>();
grid.setItems(people);
grid.addColumn(TemplateRenderer
.<Person>of("<b>[[item.name]]</b>")
.withProperty("name", Person::getName)
).setHeader("Name");
Checkout this tutorial for more information: https://vaadin.com/docs/v14/flow/components/tutorial-flow-grid
OK, finally I solved. I use a template renderer with a proper template structure. I modified the cell style in a way, that my renderer DIV fills the entire cell (removed any padding/margin from the original cells)
<dom-module id="grid-style" theme-for="vaadin-grid">
<template>
<style>
[part~='cell'] ::slotted(vaadin-grid-cell-content) {
padding: 0px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
--cellopa: 255;
}
[part~='cell'][aria-selected~="true"] ::slotted(vaadin-grid-cell-content) {
--cellopa: 0;
}
</style>
</template>
</dom-module>
I also added some simple CSS declarations to one of the main CSS:
vaadin-grid-tree-toggle flow-component-renderer {
width: 100%;
height: 100%;
}
vaadin-grid-cell-content flow-component-renderer {
width: 100%;
height: 100%;
flex-grow: 1;
}
This way the rendered DIV fills the whole cell and I can color it's background.
Now the problem comes with the selection, since the selection is not visible any more. For this you find the --cellopa variable set to 255 normally and set to 0 for selected cells.
Now when I define a background-color on the div, I use rgba and I set the alpha to the var(--cellopa) variable, like this for example rgba(255, 0, 0, var(--cellopa))
Now when the row is not selected, the cellopa is 255, so the background is visible, when I select the row the cellopa is set to 0, so the background of the DIV gets transparent, and the row selection color on the row is visible. This is super fast, and changing the selection does not cause any glitch, and also the previous coloring state is restored properly.
I also managed to get around with the treegrid and managed to color even the hierarchy column fully using a special template for the hierarchy column with some padding taking the level into account.
How do we know that how many pixels in width:100% and width:100vw ?
Situation
body{
width:100%;
}
.container{
width:1000px;
}
How do i get exact value ?
balanceWidth = bodywidth - containerwidth
I know about css calc width: calc(100% - 1000px); , I need to get exact pixel value
For this:
balanceWidth = bodywidth - containerwidth
You can use calc method:
width: calc(100% - 1000px);
When you have 1000px wide element you assume the percentage wide is 100% and for 1% you can calculate taking 1000px dividing by 100.
Suppose you width of container is 1000px and you css vw value is 10vw it means 10% of your container width it is very similar to using 10%.
So taking example of 10vw it means 10%.
Reference : https://css-tricks.com/viewport-sized-typography/
Issue rises only in IE 10 it works fine on IE 8, IE 9 and chrome.
I have table with 2 “tr” tags
The first “tr” tag has div with css class “scrollTV” contains tree nodes
When I add height: 100%; to that class and I expanded the tree nodes it expands and push the second “tr” tag down so it become invisible.
So I need both “tr” tags become visible and the first one have scroll bar to get the expanded data.
scrollTV class as the following
div.scrollTV {
height:100%;
width:99%;
border:0px;
overflow:scroll;
}
Instead of setting height in percentage format as "100%", try to set in "px" format. It should solve the problem.
div.scrollTV { //set height in "px" format instead of "%"
height:100px;
width:99%;
border:0px;
overflow:scroll;
}
(OR)
If using percentage format, it defines the height in percent of the containing block i.e., "td" - You need to set the height of "td" in "px" format.
td.scrollTV_TD { //set height of td in "px" format
height:100px;
}
Im trying to set a vertical carousel with AnythingSlider. But, I need to set a fix width for UL, and the script dont allow this. Is that possible?
Here is my code: http://jsfiddle.net/ycUB6/5230/
But the list stay with a blank space ;/
Anyone could help me?
AnythingSlider isn't, at this time, set up to allow multiple vertical slides. So, you will see some blank space below the last slide until it reaches the top.
To fix your demo, change this bit of css (updated demo):
ul#slider img {
width: 300px;
height: 100px;
list-style: none;
}
In jQuery, we can use innerHeight to get the height of one element (including padding but not border.).
$("selector").innerHeight();
How can I get the same value by dojo?
What my solution is using
dojo.contentBox() //get the height of content box
dojo.style(node, "borderTopWidth") //get width of border-top
dojo.style(node, "borderBottomWidth"). //get width of border-left
Is there any easy way to do it?
Unfortunately, I don't think there is an easier way to do it.
You basically have three choices:
dojo.contentBox(node) // excludes border, padding and margin
dojo.position(node) // includes border and padding; excludes margin
dojo.marginBox(node) // includes border, padding and margin
So, you need to do what you suggested. Use dojo.contentBox(), then separately calculate the top and bottom border widths.
Alternatively you might want to place a <div> inside a <div>, so that you can set the border on the outer div and keep the padding on the inner div. You would then be able to get the required height from calling dojo.position() for the inner div.
<div id="outer" style="border: solid #000 1px;">
<div id="inner" style="height: 20px; padding: 2px;">.</div>
</div>
<script>
alert(dojo.position("inner").h) // 24
</script>