I'm working on an ExtJS chart. The axis labels of the chart is having lengthy texts. At the edges of the Chart the texts are cut off. How to word wrap style to Ext JS Chart axis labels?
adding newlines every n words with a renderer could also work
Heres the fiddle
renderer: function(v) {
//adds newline every 5th word
return v.replace(/((?:\w+ ){5})/gi, "$1\n");
}
try this
.x-form-label#myLabel {
width: 20px;
overflow: hidden;
}
Related
I am using Apex charts in the react project, I have implemented a time series chart there I am not able to decrease the "thickness of a grid line" in the line chart.
Grid lines
Can anyone help?
I didn't find any standard ones. With css:
.apexcharts-gridline {
stroke-width: 2px;
}
default value 1px
In Angular js ui rid, how can I remove vertical and horizontal scrollbars ?
And also for each column heading I am getting a little carrot icon by default, which shows sort ascend, sort descent, Hide column. I want to remove this also from my column headings.
Instead .table-striped which comes by default for ui grid, I want to use .table-bordered. Is there any place to set these parameters to ui grid?
enableHorizontalScrollbar : 0,
enableVerticalScrollbar : 0,
enableSorting : false,
enableColumnMenus : false;
Good answer from #Asqan answering the first part of your question. For the second part:
Instead .table-striped which comes by default for ui grid, I want to use .table-bordered. Is there any place to set these parameters to ui grid?
I'm thinking you mean you want the look in this plunker I created.
You can solve these css issues in one of two general ways.
1) Customize the ui-grid css
2) Leave the original ui-grid css then override it in your own css file
I've shows the first option to solve your "stripped" issue and the second option to implement your desired border. I have done both for example only so you can see both options - I recommend choosing and using consistently one method or the other.
The ui-grid sets the ".table-striped" look to which you are referring in the css. You can override this either in you own css file or using the customizer tool and setting the #rowcoloreven and #rowcolorodd fields to the hex code for white #ffffff. This will update the ui-grid css to contain the below:
.ui-grid-row:nth-child(odd) .ui-grid-cell {
background-color: #ffffff;
}
.ui-grid-row:nth-child(even) .ui-grid-cell {
background-color: #ffffff;
}
For ".table-bordered" see specifically in the style.css file these added lines
.ui-grid-cell {
border-style: solid;
border-bottom: 1px #ff0000;
}
While using md-slider from angular-material, if the range of max and min is less, then the slider is looking fine:
However if the range of value is wide (1-100) then the pink line of the slider is getting overlapped by grey dots:
Is there a way to remove these grey dots from md-slider in md-discrete mode ?
Angular-material discrete md-slider dots can be removed using the following CSS snippet
.md-track-ticks canvas { display: none; }
In my case, there was CSS naming issue according to which version.
This works for me.
Thanks Salal.
._md-track-ticks canvas, .md-track-ticks canvas { display: none; }
I'm having troubles giving some cells some styling in ExtJS 5.
I have two style rules in the index page:
.yellow-cell .x-grid-cell{
font-weight: bold;
background-color: yellow;
}
.red-cell .x-grid-cell{
color:blue;
background-color: red;
}
On select event, the cell selected should be colored with yellow-cell rule. and the cell before it needed to be colored with the other rule red-cell, the rest of the table is just defaults.
var gridTable = Ext.getCmp('gridTable');
gridTable.on("select",function(obj, record, index, eOpts){
gridTable.getView().addItemCls(record, 'yellow-cell');
});
and on deselect I use removeItemCls() then addItemCls() to add the red-cell styling.
Any chance there is a proper way to do this? because my code just color the whole row, and I want to color just the selected/deselected cells.
I'm really stuck here, any help will be highly appreciated.
gridTable.getView().getCell(rec,col).addCls('yellow-cell');
Also you could try console.log(record) to find the right div name and do the following:
Ext.get('idOfcellDiv...').addClas('yellow-cell');
So I thought formatting the borders within an extjs treegrid would be basic but I have not been able to find a solution after hours of trying and looking around. The problem I'm having is that my borders appearance and width are inconsistent between both columns and rows (tried attaching screenshot but couldn't since new to site). I tried defining borders directly in the column creation:
columns:[{header: 'H6',dataIndex: 'hour6',width: 210, border: 1}]
as well as in the XTemplate where I'm setting my cell background color (didn't think this would work but thought I'd try):
columns: [{header: 'H6',dataIndex: 'hour6',width: 210,
tpl: new Ext.XTemplate('{duration1:this.doFormat}', {
doFormat: fn(v){
if (v == 1) {return '<span style="background-color: red; width: 100%; border: 1">' + v + '</span>';}
else {return '<span style="background-color:' + currentcolor + '; width: 100%; border: 1">' + v + '</span>';}
}
})
}]
Does anyone know how to format treegrid borders to fix this issue?
Thanks.
Your best bet us to use css classes through the cls config option of your column definition or manipulate the css style directly on the column element. The border between grid rows is set on the .x-treegrid-col class.
// set the border on all rows to red
.x-treegrid-col {
border-bottom: 1px solid red;
}
I'm not entirely sure what you are trying to achieve though, upload a screenshot to http://tinypic.com/ and embed of link to it in your original post, that might help.