I've a displayfield, and i would like to increase the font size.
I've configured it as follow:
{
xtype:'displayfield',
cls:'biggertext',
fieldLabel:'label',
style:{
'font-size':'32px'
},
labelStyle:{
'font-size':'32px'
}
}
but the size of the font for the label and the value field has not changed.
I've also tried to do it via CSS:
.biggertext
{
font-size: 32px;
}
but I've no changes about the font size.
What is wrong?
Thank you all
you should use some other properties for this.
e.g labelcls.
Here is a demo
{
xtype: 'displayfield',
fieldLabel: 'Home',
name: 'home_score',
value: '10',
labelCls: 'biggertext',
fieldCls:'biggertext',
}
Try this.!important will overwrite the parent style
.biggertext
{
font-size: 32px!important;
}
Or
style:{
'font-size':'32px!important'
},
labelStyle:{
'font-size':'32px!important'
}
label:
labelStyle: "font-size:15px;font-weight:bold;width:60;padding:10px 0px 0px 10px;",
value:
style:"font-size:14px;padding:10px 0px 0 15px",
You've missed the ' on your cls biggertext in the ExtJS code. Also you do your styles like this:
style:{
'font-size: 32px;'
},
labelStyle:{
'font-size:32px;'
}
Also note that labelStyle used to work only if you are wrapping your label in a container with FormLayout.
It could also be that you need to add !important to your CSS. I once needed it, otherwise it would not be displayed correctly in the browser.
Related
I can’t add my own style, when I reload the page in the browser my styles do not add
CKEDITOR.addCss('a{color: inherit; text-decoration: none}')
CKEDITOR.stylesSet.add([{
name: 'My Custom styles',
element: 'span',
styles: {
'padding': '10px',
'border-radius': '8px',
'background-color': '#6950ab',
'color': '#ffffff!important',
'display': 'inline-block'
}
}])
CKEDITOR.replace('container');
</script>```
In a classic editor (with toolbar) you may set config.contentsCss
CKEDITOR.stylesSet.add('myStylesComboBox',[{
name: 'my span style',
element: 'span',
attributes: {
'class': 'box1',
}
},
{
name: 'my span2 style',
element: 'span',
attributes: {
'class': 'box2'
}
}]);
var ContentsCss = [
'span.box1{padding:10px;border-radius:8px;background-color:#6950ab;color: #ffffff!important;display:inline-block}',
'span.box2{padding:10px;border-radius:8px;background-color:#6770ab;color: #ffffff!important;display:inline-block}'];
CKEDITOR.replace( 'editor1',{
stylesSet: 'myStylesComboBox',
contentsCss: ContentsCss
} );
Example:
https://codepen.io/edsonperotoni/pen/JjjvZxz
References:
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-contentsCss
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-stylesSet
Please use the following rule while styling in CKEditor for specific use cases (shared by CKEditor support):
Preview & Print
please change default styling either by changing the rules in contents.css file directly or by providing a different file with CKEDITOR.config.contentsCss option https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-contentsCss
Export to PDF plugin:
please provide different styling using https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-exportPdf_stylesheets
OR change default styling with CKEDITOR.config.contentsCss option https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-contentsCss or extended it with the CKEDITOR.addCss() https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR.html#method-addCss.
You can refer to the below link if you are having trouble loading the CSS file defined in the configuration - contentsCss:
ckeditor - contentsCss not loading custom styles
I was trying to set the style of a dojox form CheckedMultiSelect control. First I tried to use the .set method. The physical width has changed, but the control is still automatically sized to the max. length of dropdown items.Second, I tried the way from this post -How to set width to dojox/form/CheckedMultiSelect?. And it didn't do anything.
var groupCheckedMultiSelect = new CheckedMultiSelect ({
id: "groupChkMultiSelect",
dropDown: true,
multiple: true,
class: 'narrow',
label: "Group"
}, 'GroupDiv');
groupCheckedMultiSelect.set('style', {width: '100px', height: '30px', fontSize: '14px'});
groupCheckedMultiSelect.startup();
.narrow .dojoxCheckedMultiSelectWrapper {
width: 1000px;
}
Try Setting
.dojoxCheckedMultiSelectButton{
width:400px
}
Fiddle:http://jsfiddle.net/theinnkeeper/4L3sksmt/1/
Here, is JavaScript in which I am setting background color on those field which contain different data in BusinessObject column and CustomTable column.
projectgrid= new Ext.grid.GridPanel
({
id:projectgrid,
cm : projectInfoFieldsCM,
store: inlineGridStore,
stripeRows: true,
autoScroll:true,
width:550,
height:500,
bodyCssClass : 'customInlineGridCSS',
viewConfig:
{
forceFit: false,
autoFill : false,
deferEmptyText : false,
emptyText : '<div align="center"><span style="font-size: 9pt; font-weight: normal">No record available</span></span></div>',
getRowClass: function(record, index, rowParams, store) {
if(record.get('BusinessObject')!=record.get('CustomTable')){
return 'gender-male';
}
}
}
});
Here, Is css file in which I have assign color coding.
Note : I tried both ID which are declared in css file.
.data-row-light-red
{
background-color: #ff0000 !important ;
}
.gender-male .ID {
background-color: #088da5;
}
Am I doing something wrong because I have implemented this functionality before but I am stuck in this one?
Maybe not want you exactly need but I already done something similar with renderer function in the column, maybe you going to be able to use that too?
Here is my code:
columns: [
{header: "Color", dataIndex: "COLOR", width:100,
renderer:
function(value, metaData, record, rowIndex, colIndex, store){
metaData.style = "background-color: rgb(255,255,255);";
return "";
}
},
Hope this helps
You need to separate class selectors using comma
Try this
.gender-male, .ID
{
background-color: #088da5;
}
Or
.gender-male
{
background-color: #088da5;
}
If you don't need ID class anywhere
I don't know how to center delete action icon in inline editing.
My setting action column is:
{
name: 'action',
width: 40,
align: "center",
editable: false,
formatter:'actions',
search: false,
fixed: true,
resize: false,
formatoptions: { keys: true, editbutton: false }
}
You need to play around with CSS to find the fix in your case. Try overriding jqGrid's CSS rules.
In general, if you have only 'Delete' icon in your column, following CSS rules will make it center aligned.
.ui-pg-div.ui-inline-del {
float: none !important;
}
span.ui-icon.ui-icon-trash {
margin: auto;
}
Although, its not a good practice to use '!important'.
If you want to do this for a particular grid, you can prepend grid id(say, list) to CSS rule like this:
#list .ui-pg-div.ui-inline-del{}
Could someone help me rewrite this syntax below to get it right.
I want the font to be replaced by my font whilst accepting the :hover so my button will change when i hover over it.
Cufon('button', {
fontFamily: 'Disgrunged A',
hover: {
color: '#ed1c24'
}
});
You could try to add button to hoverables list
Cufon('button', {
fontFamily: 'Disgrunged A',
hover: {
color: '#ed1c24'
},
hoverables: { button:true }
});
Ref: Cufon API
hoverables
Defines which elements
:hover is used with. Defaults to links
only as IE6 can’t handle anything
else.
example : { tag: true, .. }
default : { a: true }
i don't know cufon, but i think the syntax has to be like this:
Cufon.replace('button:hover', {
fontFamily: 'Disgrunged A'
});