For ag-grid vuejs, how do I wrap text in both headers and cell?
This is my example code.
https://codesandbox.io/embed/x98omwov3o
From v28 of AG Grid this is now natively supported for headers too by setting the properties wrapHeaderText and autoHeaderHeight.
const gridOptions = {
defaultColDef: {
resizable: true,
wrapHeaderText: true,
autoHeaderHeight: true,
},
};
You can play with these properties in this Plunker
Not sure about wrapping text in header, but this is how you could do it for cell.
In your ColDef, provide these two properties.
cellClass: "cell-wrap-text",
autoHeight: true,
And CSS will go like this: .cell-wrap-text { white-space: normal !important; }
There is also a property available for header, headerClass: "cell-wrap-text", but I was not able to achieve it yet.
Hope it helps a little.
Related
Inside a tippy-js v6.3.7 tooltip, I have a 1px height div with background-color: #333. The div is randomly appearing blurred on some tooltips and not others. Removing the transform property on data-tippy-root fixes it but positions the tooltip in the upper-left.
Your answer saved me a ton of time, thanks Vael Victus! One more thing: you are missing a pair of {}, it should be:
popperOptions={{ modifiers: [{ name: 'computeStyles', options: { gpuAcceleration: false } }] }}
I discovered the problem resulted from the transform property used to position the tooltip itself. Tippy v6 uses popper v2, which defaults to positioning this way. You can disable it via popper's gpuAcceleration setting. Here's how I fixed it through Tippy.
opts = {
...opts,
popperOptions: {
modifiers: [{
name: 'computeStyles',
options: {
gpuAcceleration: false, // true by default
},
}]
}
}
tp = tippy(elem, opts);
Firefox did not have this rendering problem, and both Chrome 94 and 96 did.
I have a situation in which I want to display data in a FluentUI DetailsList, where column names can be very long, while the column content can be very narrow. In such a case, the header will be truncated.
See this codepen.
Is there any way to change this behavior, such that the header text wraps over multiple lines?
While I found this unanswered question from 2 years ago, I couldn't find an answer on the topic on neither Stackoverflow, Github or the offical documentation.
Here are some approaches I tried:
inject a CSS class with word-break: break-all; via the headerClassName field of IColumn
setting isMultiLine on the columns
The DetailsHeader component itself whose rendering I can override with onRenderDetailsHeader does not seem to offer any props for customizing how the text is displayed
Is there even a way to achieve the desired behaviour (wrapping over multiple lines instead of truncating long column headers)?
Most of FluentUI Components uses text-overflow: ellipsis. What you can do is to modify that "rule". Inside DetailsList you have onRenderDetailsHeader method which allows you to change header styles.
const onRenderDetailsHeader = (headerProps, defaultRender) => {
if (!headerProps || !defaultRender) {
//technically these may be undefined...
return null;
}
return defaultRender({
...headerProps,
styles: {
root: {
selectors: {
'.ms-DetailsHeader-cell': {
whiteSpace: 'normal',
textOverflow: 'clip',
lineHeight: 'normal',
},
'.ms-DetailsHeader-cellTitle': {
height: '100%',
alignItems: 'center',
},
},
},
},
})
}
<DetailsList
...
onRenderDetailsHeader={onRenderDetailsHeader}
/>
Codepen working solution
Note:
Play around with minWidth, maxWidth props inside this._columns to get expected behavior.
I need to have fixed table body height to firstly show up on my whole page nicely and secondly to not change height when I choose filters and filter tags are added to header.
I have real trouble finding solution. My best guess I should overwrite MUIDataTable.responsiveScroll class but it does nothing when I change minHeight:'80vh' for exmple.
Yes, you need to override the MUIDataTable.responsiveScroll. This is what I did for expanding to full size of page
createMuiTheme({
overrides: {
MUIDataTable: {
responsiveScroll: {
maxHeight: 'none',
},
},
},
});
You can add other styles there if you want a minimum height.
I'm using Dojo 1.9 to start learning, and I'm having trouble disabling the resize of the Simple Textarea. I don't really have a particular need to do this, I was just curious about how to and have since been unable.
There is no property listed in the Dijit API, and changing the CSS either with .set("style"), including it inline in the original container (I'm doing it programmatically), or even trying to set resize to none in the original declaration ie:
var textarea = new SimpleTextarea({
rows: 5,
cols: 10,
onFocus: function(){ console.log("textarea focus handler"); },
onBlur: function(){ console.log("textarea blur handler"); },
selectOnClick: true,
style: "resize=none",
value: "This is a sample SimpleTextarea."
}, "textarea");
Any ideas?
If you set style equal to an object with a key value pair of resize : "none" that will do the trick
var textarea = new SimpleTextarea({
style: {resize : "none"}
}, "textarea");
You can do like this:
<input dojotype="dijit.form.SimpleTextarea"
id="yourTxtWidget"
style="resize:none; width: 230px; height: 75px;"
class="myTextField"/>
I use dgrid to make a simple grid (http://dojofoundation.org/packages/dgrid/tutorials/defining_grid_structures/).
My question is simple : how to put html tag in label columnheader's ? Because if I put an img tag for example, label contains the string img src=...
Thanks
The column definition can provide a function that builds the column header.
var column = {
//...
renderHeaderCell: function(node) {
domConstruct.create('img', {src: ''}, node);
return node;
}
};
See the documentation of the renderHeaderCell() function in the DGrid wiki:
renderHeaderCell(node)
An optional function that will be called to render the column's header
cell. Like renderCell, this may either operate on the node directly,
or return a node to be placed within it.
One-line answer using put-selector:
renderHeaderCell: function(node) {
return put("img[src=/your/image]");
}
Note this function won't work if your column happens to be a selector - because selector.js defines his own renderHeaderCell(node) function.
#craig Thanks for the answer, in my case I only needed to know how to add HTML into the header cell and the renderHeaderCell(node) was definitely the answer.
For anyone else simply needing to add a <br>, <span>, <div> etc to the header cell, here's a couple of simple examples to compare:
Example without using renderHeaderCell(node):
{
label: 'Title',
field: appConfig.fields[0],
sortable: false
}
Example using renderHeaderCell(node):
{
renderHeaderCell: function(node) {
node.innerHTML = '<span class="headerCell">Title<br><br></span>'
},
field: appConfig.fields[0],
sortable: false
}
Then you can target with CSS as normal:
.headerCell {
font-size: 9px;
}