I would like to remove the default column separator in sap.ui.table.Table
anyone please help !
I did it like this: I added the class noColumBorder to the table where I wanted to be no separator to be visible. The class name can be different, of course.
In CSS I added this:
.noColumnBorder .sapUiTableTr>td {
border-right: 0 !important;
}
Related
I am using in my component but by default, it's displaying a group of buttons in one row. I want to display the grouped buttons in one column. How is this possible?
Thanks.
.columnCss {
display: contents !important;
}
<lightning-button-group class="columnCss">
<lightning-button label="Refresh"></lightning-button><br/>
<lightning-button label="Edit"></lightning-button><br/>
<lightning-button label="Save"></lightning-button>
</lightning-button-group>
I'm working on using treeData, but was wondering if it is possible to hide the text next to the chevron.
For example, can I hide the letters from the column in this table, and just show the chevron? Maybe using cell renderer?
You can do that even without using cellRenderer.
Include below styles in your component declaration.
styles: [`
::ng-deep [class^='ag-row-group-indent-'] .ag-group-value {
display: none;
}
`]
Working plunk: Ag-Grid treeData: Possible to hide text next to chevron
Figured out an easy fix within the column def:
cellRendererParams: {
innerRenderer: () => ''
}
Is it possible to change the style of a column based on whether it's pinned or not?
I'm able to change the style based on the value while the table is rendered for the first time. What I'm trying to do is change the style when the column is pinned using the mouse (drag and pin).
I'm able to figure out which column has been pinned by firing the ColumnPinnedEvent in gridOptions. I tried modifying the cellClass of the column obtained from 'event.column' but it does not get reflected on the table.
onColumnPinned(event: ColumnPinnedEvent) {
const column = event.column;
if (column) {
const columnDef = column.getColDef();
const userProvidedColDef = columnDef;
userProvidedColDef.cellStyle = event.pinned ? { color: 'white', backgroundColor: 'black' } : {};
column.setColDef(columnDef, userProvidedColDef);
}
}
You can achieve the same by just with the CSS.
Have a look at the plunk I've created: Column Pinning and styling. Add or remove any column to see the styles updated for it.
.ag-body-viewport .ag-pinned-left-cols-container .ag-row {
background-color: yellow;
}
Here .ag-body-viewport .ag-pinned-left-cols-container hierarchy is important. Just using .ag-pinned-left-cols-container .ag-row will not work as some row levels' styling of ag-grid will overwrite it.
So far this information is enough to solve your challenge, let me know in addition to this, you have some more details to provide.
I add costum styles to the RTE with a CSS File:
RTE.default.contentCSS = EXT:netjapan/Resources/Public/css/rte.css
For some elements this works. For example for a ulElement:
ul.liststyle1 {
list-style: none;
padding-left: 17px;
}
When I select the ul in the RTE I can chose the Blockstyle liststyle1.
I want to do the same for p:
p.test {
font-size: 80%;
}
And when I select the p I can chose the Blockstyle test and the style is used. But when I save the Blockstyle is gone.
I added this Typoscript:
RTE.default {
removeTags = sdfield, strike
proc.entryHTMLparser_db.removeTags = sdfield, strike
}
So that p is not in the removeTags list. But it had no effect.
Anyone know how it comes that the Blockstyle is removed on the pElement?
I had simillar problem last week. Sometimes RTE is going crazy. I mean that there is no logical sense in it. Check this: marke the text and use the container style it will wrap it in div but there will be also <p> in it so you will have something like <div><p class="bodytext">text</p></div> - you can add style for that. At least this solved my problem
In my code I'm using four grids, I've set the row height in css like this:
.x-grid3-row td {line-height: 50px;}
and it sets the rows of all my grids.
So I need to set the height row of one of those grids.
Based on id or cls class you can specify the CSS for eaxch component individually. For example,if you have grid with id sample then code will be:
.sample .x-grid3-row td {line-height: 50px;}
Late answer, but another option is to use getRowClass on your viewConfig:
viewConfig: {
getRowClass: function (record, rowIndex, rp, store) {
rp.tstyle += 'height: 50px;';
}
}