Despite the same configuration works as expected on Firefox, the icon is not displayed on Chrome.
Here is my actioncolumn configuration:
xtype : 'actioncolumn',
width : 95,
align : 'center',
sortable : false,
menuDisabled: true,
items : [{
iconCls : 'icon-delete',
tooltip : 'Delete',
handler: function(grid, rowIndex, colIndex, node, e, record, rowNode) {
// delete action
}
}]
Here is the .css rules for the actioncolumn and the related iconCls:
.x-action-col-icon {
color: #919191;
font-size: 18px;
height: 18px;
width: 18px;
cursor: pointer;
vertical-align: middle;
display: inline-block;
line-height: 1;
}
.icon-delete:before {
font: 18px/1 FontAwesome;
color: #dd6550;
content: "\f056";
}
The screenshot for Chrome:
And for Firefox:
Please check this fiddle, I have checked it and found working fine in both Chrome and Firefox browser.
Note: As of now I have included font-awesome and css (provided by you) in index.html
Screenshots attached:
Related
I am using the framework ag-grid ()
I have changed the row-height to 50px.
<div
className="ag-theme-balham"
style={{
height: '90vh',
width: '100%',
'font-size': '18px',
'row-height': '50px'
}}
>
<AgGridReact
rowHeight={50}
columnDefs={columnsTaenze}
rowSelection={'multiple'}
onFirstDataRendered={this.autoSizeAll}
rowDragManaged={true}
enableColResize={true}
animateRows={true}
rowData={this.props.tabledata}
enableFilter={true}
onRowDragEnd={this.onRowDragEnd}>
</AgGridReact>
</div>
Sadly, I can not manage to center the cell vertically.
I have tried to change many classes, including ag-cell.
My css I tried:
.ag-cell{
line-height: 50px;
height: 100%;
vertical-align: middle;
}
But the cell isn`t centered:
//Edit / TIP
If you want to do yourself a favor, you should switch to react-table from Tanstack NOT AG-GRID company
You can use below CSS. No need to use hard-coded values in CSS for height.
.ag-row .ag-cell {
display: flex;
justify-content: center; /* align horizontal */
align-items: center;
}
Have a look at this plunk: ag-grid: text-align vertically center
You can set cell style to following
cellStyle: {
'height': '100%',
'display': 'flex ',
'justify-content': 'center',
'align-items': 'center ',
},
it's work for me.
To build on #Paritosh's answer...
You don't have to overwrite the ag-grid styles themselves. You can do something like this in your own stylesheet:
.cell-vertical-align-text-left {
display: flex!important;
align-items: center;
}
.cell-vertical-align-text-right {
display: flex!important;
flex-direction: row-reverse;
text-align: right!important;
align-items: center;
}
Then in your ag-grid column definition use your custom css style in the cellClass property.
var columnDefs = [
{
headerName: "Alerts",
colId: 'invoice_issues',
editable: false,
cellClass: "cell-border cell-vertical-align-text-right",
valueGetter: showInvoiceIssues,
autoHeight: true,
}
]
After upgrading ag-grid to version 28, I've noticed the vertical center alignment has been lost.
Below is a solution that retains the text-overflow: ellipsis (...) and overflow: hidden CSS rules when the text exceeds cell width.
Tested in ag-grid version 28.2.0
.ag-cell-wrapper {
height: 100%;
}
If you are noticing the same problem as the user above after upgrading to v28, probably you'll need to adjust the CSS/SASS imports. Not sure why this is not more explicit on the changelog.
In summary, you will need to drop the /dist part in the path:
<!-- old path -->
<link
rel="stylesheet"
href="https://unpkg.com/ag-grid-community#28.0.0/dist/styles/ag-grid.css" />
<!-- new path -->
<link
rel="stylesheet"
href="https://unpkg.com/ag-grid-community#28.0.0/styles/ag-grid.css" />
Reference:
https://www.ag-grid.com/archive/28.0.0/angular-data-grid/global-style-upgrading-to-v28/
https://www.ag-grid.com/archive/28.0.0/angular-data-grid/global-style-upgrading-to-v28-css/
Maybe this is just a case of me over thinking this but I have a panel and I have some text I want to put in the title but I want the text centered. I also want the default background (blue) and text color (white) changed to my custom style. I have successfully been able to change the background and text color but I cannot figure out how to center it in the panel. Here is my code below:
{ header: {xtype: 'header', margin:'5', baseCls: 'pnlName-header', title: { baseCls:'pnlName-header-header', text: '<u>Name:</u><br>Josh' }}, xtype: 'panel', flex: 15, layout: { type: 'vbox', align: 'center'}}
.pnlName-header {
color: #FF0000;
font-family: tahoma,arial,verdana,sans-serif;
font-size: 12px;
font-weight: bold;
background-color: #FFFFFF;
text-align:center;
}
I am pretty sure it has to be something simple. Any help would be greatly appreciated.
V/R,
Josh
Well after overlooking the obvious as I figured I was doing I found a config called: titleAlign. So I simply set titleAlign: 'center' and that did the trick. Thanks everyone.
How about the same approach you used in header?
http://jsfiddle.net/zk31wo5j/1/
//your panel code
cls:'center',
html: 'some text pretty centered'
where
.center{
text-align:center;
}
I have a tab panel with two tabs.
I wish that both tabs would contain images alongside their text, yet the image on each tab would be shown only when the tab is clicked, otherwise it won't be shown (or replaced).
Can it be done?
You could probably do it by some css trick.For example,try this.
Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
id: 'tabPanel',
activeCls: 'activeTabCls',
renderTo: document.body,
items: [{
title: 'Foo',
}, {
title: 'Bar'
}]
});
Your CSS could be something like:
.activeTabCls .x-tab-default-top-active{
background-image: url(http://sencha.com/favicon.icon)!important;
background-position-y: 4px;
background-repeat: no-repeat;
padding: 0px 0px 0px 15px;
}
Note : Not Tested.Some modifications could be needed.
am facing a problem in changing the default check box image.
I have added two images checked.png and unchecked.png. and added two css classes for checked and unchecked. Only unchecked image is displaying but when i check it checked image is not displayed.
I have modified the default buttons by doing the same things below and it works well for buttons. But for checkbox this is not working.(pressedCls is not there in checkboxfield). Here is the small snippet for your reference.
{
xtype: 'checkboxfield',
ui:'plain',
checked: 'true',
action: 'didnotassisted_Action',
id: 'id_assignment_didNotAssisted',
cls: 'closeout-checkbox-unchecked',
// pressedCls: 'closeout-checkbox-checked'
},
css:
.closeout-checkbox-unchecked{
background-color:transparent;
background-image:url('../images/unchecked.png');
height: 44px;
width: 44px;
}
.closeout-checkbox-checked{
background-color:transparent;
background-image:url('../images/checked.png');
height: 44px;
width: 44px;
}
If there is any different approach to complete that please help me out.Thanks in advance.
#Andrea, Here is the screen shot of what am getting after applying your code.
Sencha is not using a class to differentiate the checkbox status, it leverages instead the :checked pseudo-class selector of the checkbox.
You can change the checkbox icons adding a pseudo-element :after to its .x-field-mask sibling.
Give ui: 'custom' to your checkboxfield and add these CSS:
.x-field-custom .x-input-checkbox:checked + .x-field-mask:after {
content: "";
height: 45px;
width: 45px;
position: absolute;
top: 0;
right: 1em;
background-image:url(http://png-4.findicons.com/files/icons/2232/wireframe_mono/48/checkbox_checked.png);
background-size: contain;
display: block;
}
.x-field-custom .x-input-checkbox + .x-field-mask:after {
content: "";
height: 45px;
width: 45px;
position: absolute;
top: 0;
right: 1em;
background-image:url(http://png-2.findicons.com/files/icons/2232/wireframe_mono/48/checkbox_unchecked.png);
background-size: contain;
display: block;
}
Tested on Sencha 2.2.1
I am new to extjs . I am trying to add tooltip preferably css based to the column headers .
How can I go about adding custom tooltip to the extjs column header using css? the extjs default way doesnt seem to work.
I tried using the custom css tooltip for the header and it didnt work .. Is it at all possible in extjs to custom tooltip on the header?
Thanks
var listView = Ext.create('Ext.grid.Panel', {
store: mystore,
multiSelect: true,
splitHandleWidth: 10,
columnLines: true,
viewConfig: {
emptyText: 'No images to display'
},
renderTo: containerEl,
columns: [{
text: ''+e.i18n.getString('notif.class')+'<span class="classic">'+e.i18n.getString('notif.class')+'</span>',
flex: 10,
dataIndex: 'CName',
tooltip: 'C Name Some name test',
renderer: function (value, metaData, record) {
return Ext.String.format('<a href="#" class="tooltip2" >{0}<span>{0}</span></a>', value);
}
}, {
text: getString('notif.instance'),
flex: 30,
dataIndex: 'IDisplayName',
renderer: function (value, metaData, record) {
return Ext.String.format('<a href="#" class="tooltip2" >{0}<span>{0}</span></a>', value);
}
}]
});
CSS
.ttip {
border-bottom: 0px dotted #000000; color: #000000; outline: none;
/* cursor: help; */
text-decoration: none;
position: relative;
}
.ttip span {
margin-left: -999em;
position: absolute;text-decoration: none;
}
.ttip:hover,.ttip:active, .ttip:link,.ttip:visited{text-decoration: none; color:#000;}
.ttip:hover span {
border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute; left: 1em; top: 2em; z-index: 9999999;
margin-left: 0; width: 250px;
}
.ttip:hover img {
border: 0; margin: -10px 0 0 -55px;
float: left; position: absolute;
}
.ttip:hover em {
font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
display: block; padding: 0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em; }
.custom { padding: 0.5em 0.8em 0.8em 2em; }
* html a:hover { background: transparent; }
.classic {background: #FFFFAA; border: 1px solid #FFAD33; }
.critical { background: #FFCCAA; border: 1px solid #FF3334; }
.help { background: #9FDAEE; border: 1px solid #2BB0D7; }
.info { background: #9FDAEE; border: 1px solid #2BB0D7; }
.warning { background: #FFFFAA; border: 1px solid #FFAD33; }
So, I noticed you provided code for your store, but you are asking a question about the grid, which is a different component. Make sure you understand the relationship between the grid and the store. You should also use a Model definition instead of configuring fields on the store - which is the old way of doing things.
Having said that, I did come up with an interesting solution to your question: how to add a tooltip to the column header.
The column definition takes in a 'text' property that gets converted to the column header. The docs state that HTML tags are allowed, which means you can set a tooltip this way:
text: '<span data-qtip="hello">First Name</span>'
where data-qtip provides the text for the tooltip.
Note that tooltips must be enabled via:
Ext.QuickTips.init(); in your app.
To try other things use the docs Live Preview feature to quickly test out different configs and see them in action. http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.column.Column
UPDATE: a tooltip property is now(since 4.1x) available on column config. Use that.
In the definition of your columns you only need set the tooltip parameter, like this:
var cm = new Ext.grid.ColumnModel([
{
xtype: 'column',
header: '<img src="../images/lupa.png">',
align: 'center',
dataIndex: 'consultar',
width: 50,
sortable: true,
menuDisabled: true,
tooltip: 'Permisos para consultar, si lo desactiva el usuario no verá el modulo'
}
]);
I hope this help you