I have some columns which has four words i.e Pre Trading Follow Up, Post Trading Follow Up and some of them having three words. I tried the below css to wrap the text to multiple lines.
::ng-deep .ag-theme-material .ag-header-cell-label .ag-header-cell-text{
white-space: normal;
overflow-wrap: break-word;
}
HTML
<ag-grid-angular class="ag-theme-material" [rowData]="rowData" [columnDefs]="columnDefs" [overlayLoadingTemplate]="overlayLoadingTemplate" [domLayout]="domLayout" [enableSorting]="true" (gridReady)="onGridReady($event)" (gridOptions)="gridOptions" >
</ag-grid-angular>
but the column header remains the same. I wanted to wrap the column header text to multiple lines. Is there anyway to do this?
Note: I can able to wrap the content using cellStyle: {'white-space': 'normal'}
{headerName: 'headername', field: 'headerfield', autoHeight:true, width: 100, cellStyle: {'white-space': 'normal'}},
But I wanted to wrap the header.
Please review the following stackblitz example.
https://stackblitz.com/edit/angular-ag-grid-angular-xmbm3p?embed=1&file=styles.css
In the global style sheet I applied the following... you could use ::ng-deep in your component css, this is the first stackblitz I could find with ag-grid to fork and is not mine so there was no component css to use.
.ag-header-cell-label .ag-header-cell-text {
white-space: normal !important;
}
The next piece is to use property headerHeight
this.gridOptions = <GridOptions>{
headerHeight:75,
This part unfortunately is unavoidable... it also doesn't allow for you to make the header height dynamic based on the word wrap requirements.
The reason why is that the content area is defined with top style dynamically when the view is rendered; adjusting the header height via ::ng-deep will not dynamically
shift the top of the content area down as it is calculated by the
headerHeight property... if undefined the default is 25px so the top for content area is also 25px.
Not to
mention that the z-index of the content area causes it to overlap the
header when you change the height with ::ng-deep.. so you don't know if ::ng-deep truly worked... visually that is... as the header extends under the content area.
Sorry to say but this will be as close as you can get... adjusting all elements, shifting down the top etc based on a dynamic header height via DOM manipulation I fear will just get too ugly... and if you need the header height dynamic to the point this is a show stopper... it may be best to explore other options as a replacement to ag-grid.
https://www.ag-grid.com/javascript-grid-column-header/#headerHeight
To achieve expected result , use below option of using line break tag - br in column definitions for that specific column headerName
{headerName: 'Pre<br>Trading<br> Follow<br> Up', field: 'headerfield', autoHeight:true, width: 100, cellStyle: {'white-space': 'normal'}}
Angular has encapsulation.
But ag-grid doesn't care encapsulation. so we need to set .ag-header-cell-label and .ag-header-cell-text globally.
We set ViewEncapsulation.None at Component property and write css or scss, this can set css globally.
Global css is applied all ag-grid component. If you want to set .ag-header-cell-label and .ag-header-cell-text only one ag-grid component, set headerClass at gridOptions
this.gridOptions = {
defaultColDef: {
headerClass: 'myfunc-default-header'
},
headerHeight:75
};
And write scss file like this.
.myfunc-default-header {
.ag-header-cell-label .ag-header-cell-text {
white-space: normal !important;
}
}
this can only apply .ag-header-cell-label and .ag-header-cell-text inside the my-func-deafult-header.
So we can apply only one ag-grid component.
Related
I'm trying to build a multiline tooltip using [this example], I'm using it as a refernce because it involves functional components.
It works just fine, when its a short line of text, but doesn't go on a new line, which is something that I need.
I tried adding < /br > inside of the content, changing the content to jsx format and adding code below to the css file:
width: 200px;
word-wrap: break-word;
All it managed to do was decrease the tooltip backgronud width to 200px.
How do I change code in the example to go on a new line if content size width is going above the predetermined width?
How do I change code in the example to go on a new line if content size width is going above the predetermined width?
Besides setting the width to the e.g. 200px, you should also remove the white-space: nowrap; property because that is simply disallowing the text to break, even if it does overflow the container.
Codesandbox: https://codesandbox.io/s/how-to-make-an-extremely-reusable-tooltip-component-with-react-and-nothing-else-forked-v09e4y
More info about white-space property: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
The default text alignment for all cells in the datagrid is left justified. I want to change some columns to be right justified. I can do this for the cells in the main body of the grid by adding a class "rj" to the clr-dg-cell in the html, then adding a css style:
clr-dg-cell.rj {
text-align: right;
}
However the text alignment in the column header cell is controlled by the text-align property on the datagrid-column-title element. I can't override this as it is inside a 'span' which is taking precedence? Is there an easier/better way to control the text alignment of the whole column?
#tony_h It can be done by adding the "rj" class to the clr-dg-column, and the following css style:
::ng-deep .datagrid .datagrid-column.rj .datagrid-column-title {
text-align: right;
}
If you just use ::ng-deep it will affect all components. Add :host at the beginning of ::ng-deep
Is there a way to set a custom header height avoiding CSS in Webix?
When I redefine classes such as webix_ss_header and webix_hcell the height of a layout changes according to the modification that I've made.
For example:
.webix_hcell {
line-height:20px !important;
height:20px !important;
}
.webix_ss_header {
height:20px !important;
}
The above code causes following issues:
Header of the vertical scrollbar doesn't adjust to others and requires another CSS class;
In the bottom appears a space that corresponds to the difference between the default and the custom height of the header. Herewith the vertical scrollbar rendering as usual.
As you can see, it affects the position of the underneath content, the footer and the scrollbar. How can I overcome this?
There are two ways to set the custom height to the header:
1 - headerRowHeight property
view:"datatable",
headerRowHeight:20,
2 - height for the one of headers
columns:[
{ id:"title", header:{text:"", height:20} ,width:250},
]
Your snippet:
http://webix.com/snippet/6519b63d
Can the width of the inline toolbar changed to a fixed width?
config.width=400; doesn't work for an inline toolbar.
The geometry of the inline toolbar can be adjusted using CSS.
The toolbar is built on top of Floating Space plugin, which can be accessed via .cke_float class or #cke_{editor.name} id attribute.
Inside the the Floating Space panel resides the top space of the editor (it holds the toolbar), which has .cke_top class and can be accessed with JS CKEDITOR.instances.{name}.ui.space( 'top' ).
Long story short, there are 3 different CSS approaches, and each one of them should do the trick:
body .cke_top,
body .cke_float,
#cke_{editor.name} {
width: 300px;
}
Note: Used body to increase the specificity of the selector.
Yet another note: You can do the same with JS and CKEditor API:
CKEDITOR.instances.{name}.ui.space( 'top' ).setStyle( 'width', '100px' )
How about using CSS for it?
.cke_toolbar {
width: 400px;
}
I'm implementing CodeMirror on a project and need to use it to syntax highlight both code blocks and inline code.
Here's a sample I've put together to demonstrate what I'm trying to do: http://students.susanbuck.net/storage/code/code-mirror/
The syntax is working in both instances, but where I'm stuck is finding a way to kill the padding only on the .inline code elements so they don't add excess space between the lines in the paragraph.
You want to target the .CodeMirror-lines divs that follow textarea.code.inline elements. This can be achieved using the following CSS selector:
textarea.code.inline + div.CodeMirror div.CodeMirror-lines {
padding: 0px!important; /* added !important as padding is an inline stlye */
}
There is also a height value set in a child of div.CodeMirror-scroll that you might want to avoid. You can make this height redundent by using the following CSS:
textarea.code.inline + div.CodeMirror > div.CodeMirror-scroll {
max-height: 1em;
}