In my ckeditor I would like to have a button like the bold button but then for the tags. How can I do that?
Could not found anything about it..
What I've now is: (that do works)
style.js
CKEDITOR.stylesSet.add( 'default', [
{ name: 'Legend', element: 'legend' },
}
When I press on the legend style nothing happens..
a nasty alternative that I use now is:
{
name: 'Legend',
element: 'span',
styles: {
'font-size': '17px',
'-moz-border-bottom-colors': 'none',
'-moz-border-left-colors': 'none',
'-moz-border-right-colors': 'none',
'-moz-border-top-colors': 'none',
'border-color': '-moz-use-text-color -moz-use-text-color #E5E5E5',
'border-image': 'none',
'border-style': 'none none solid',
'border-width': '0 0 1px',
'color': '#333333',
'display': 'block',
'font-size': '21px',
'line-height': '40px',
'margin-bottom': '20px',
'padding': '0',
'width': '100%',
}
},
But I still prefer the <legend></legend> Can somebody help me out?
Styles. See my previous answer and go ahead with similar code for your tag. You may also find this one helpful, if you want to extend the built-in formatting combo.
Related
I am using CKEditor in my project, I have requirement to print ckeditor content on page so I want to restrict height of ckeditor, so I have give height as 220px and removed scrollbars using overflow : hidden, but when user go to end of ckeditor area and presses enter, content increases without scrollbar option.
Is there any way by which i can restrict number of rows of content in ckeditor?
Below is my code for ckeditor:
CKEDITOR.replace('summaryEditor',
{
toolbar:
[
{ name: 'customToolBar', items: ['Bold', 'Italic', 'Underline', 'JustifyLeft', 'JustifyCenter', 'Font', 'FontSize', 'NumberedList', 'BulletedList', 'Link', 'Image', 'Table', 'Source', 'questions'] }
],
height: '220px',
resize_enabled: false,
contentsCss: 'body {overflow:hidden;}',
autoGrow_onStartup: false,
extraPlugins: 'questions',
removePlugins: 'elementspath'
});
The autogrow plugin is not part of the 3 default builds of CKEditor, basic, standard or full. So i'm not sure how you got that installed and enabled if you don't want it.
But if you just add 'autogrow' to your removePlugins list it should stop.
But still, your height setting should override the editor contents height. I just set height to 100 and it works fine.
CKEDITOR.replace('editor', {
height: 100
});
Here is a plnkr to demonstrate:
http://plnkr.co/edit/lsFaT1CMMeDePnjVc5RD?p=preview
I'm using Extjs 6.0 (with Framework Codeigniter 3.0.3).
I'm trying to get something like this:
+---------------------------+-------------+
| something | something | something |
+-------------+-------------+-------------+
| Label A| Label B |
+-------------+-------------+-------------+
I'm using table layout (Label A with colspan 2).
The problem is I need different aligning in Label A and Label B (right and center respectively).
Is there a way to accomplish this?
This is the code:
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
title: 'Form Panel',
bodyStyle: 'padding:5px 5px 0',
width: 400,
height: 200,
layout: {
type: 'table',
columns: 3
},
items: [{
xtype: 'label',
text: '----First Row----',
padding: 5
}, {
xtype: 'label',
text: '----First Row----',
padding: 5
}, {
xtype: 'label',
text: '----First Row----',
padding: 5
},{
xtype: 'label',
text: 'Label A',
padding: 5,
colspan: 2,
}, {
xtype: 'label',
text: 'Label B',
padding: 5
}],
});
For Label A, I've tried adding (without effect):
align: 'right'
textAlign: 'right'
labelAlign: 'right'
If I add:
layout: {
type: 'table',
columns: 3,
tableAttrs: {
style: {
textAlign: 'right'
}
}
}
Then both Label A and Label B align to the right, and that's not what I need.
you can use the following code to align Label A to the right:
{
xtype: 'label',
text: 'Label A',
padding: 5,
colspan: 2,
style:{
"float":"right"
}
},
Labels are somehow special, presumably because they are made for the purpose to be used by labelable. A label is intended to be used together with a field, and when you click the label, that field is focused. The labelable mixin of the field does the aligning (based on the labelAlign configuration), and label does not always respect the layout you ask for.
While the answer of #Saloo seems to work, it is a hack that may break in other themes and/or older browsers and/or different versions of the framework.
It would be better to use different means of displaying text. I have come to use a container with the html configuration. With a container, style:{textAlign:"right"} works as intended, and since "text-align" is a local CSS setting that does not require the browser to think outside the box, it should be safe enough to use across browsers, across themes, across framework versions.
I am using ExtJS 4.2.3
I need a panel to collapse with an animation with a left and right direction.
there are 2 panels the reside in an hbox container.
here is how I am calling the collapse
var me = this,
direction = NG.isRTL() ? Ext.Component.DIRECTION_LEFT : Ext.Component.DIRECTION_RIGHT;
me.collapse(direction);
No matter what I pass for the direction field I alweys get the animation working from right to left. (I need it the other way around)
I have searched the web for it but no one seems to talk about it.
Please see the image I have attached where I have captured the animation half way through.
UPDATE:
Here is a fiddle to demonstrate what I am talking about:
example
It looks like there could be a bug, see https://fiddle.sencha.com/#fiddle/j4p. However, if you want collapsible panels on the right side to collapse to the right, you should just use a border layout. See https://fiddle.sencha.com/#fiddle/j4q
Ext.create('Ext.panel.Panel', {
width: 500,
height: 200,
title: 'Border Layout',
layout: 'border',
items: [{
title: 'South Region is resizable',
region: 'south',
height: 75,
split: true
},{
title: 'East Region is collapsible',
region:'east',
width: 100,
collapsible: true,
},{
title: 'West Region is collapsible',
region:'west',
width: 100,
collapsible: true,
},{
title: 'Center Region',
region: 'center', // center region is required, no width/height specified
xtype: 'panel'
}],
renderTo: Ext.getBody()
});
<link href="http://docs-origin.sencha.com/extjs/4.2.2/styles-3eba09980fa05ead185cb17d9c0deb0f.css" rel="stylesheet"/>
<link href="http://docs-origin.sencha.com/extjs/4.2.2/resources/css/app-4689d2a5522dcd3c9e9923ca59c33f27.css" rel="stylesheet"/>
<script src="http://docs-origin.sencha.com/extjs/4.2.2/extjs/ext-all.js"></script>
I have weird situation that extjs 4 always puts last word of custom error message in new row, and effectively hides it. I tried shortening message, but always last word goes to new line. This happens in Firefox 7.0.1 (firebug turned off), not in Chrome, Opera, Safari.
Default message text is displayed correctly. My error message has no strange letters or symbols.
I tried escaping white characters, putting nobr tags etc... but nothing works.
How to prevent this behavior?
I have no any css or any other styling applied. Here is code from view:
this.items = [{
waitMsgTarget: 'dailyReport',
xtype: 'form',
url: 'php/dailyReport.php',
items: [{
margin: 10,
xtype: 'datefield',
name: 'reportDate',
fieldLabel: 'Report for',
format: 'd.m.Y.',
altFormats: 'd.m.Y|d,m,Y|m/d/Y',
value: getCorrectDate(),
disabledDays: [0]
},
{
margin: 10,
xtype: 'checkboxgroup',
fieldLabel: 'Report by',
columns: 2,
vertical: true,
allowBlank: false,
blankText: 'Choose at least one.',
items: [{
boxLabel: 'pos',
name: 'rb',
inputValue: '1',
checked: true
},
{
boxLabel: 'seller',
name: 'rb',
inputValue: '2',
checked: true
}]
}]
}];
'Ctrl' + '+' was reason. My view in Firefox was zoomed in, but I didn't notice it until today. After I returned it to normal zoom level 'Ctrl' + '0' everything works and shows up fine. Silly me, it took me 2 weeks to realize this.
I'd like to show images instead of the "next" "last" text that is displayed now. I tried to just override the text currently being displayed and it didn't seem to change anything. The "next" "last" text is still displayed, let alone I still have no idea how to change it to images.
$('#myTable').dataTable({
"aaSorting": [[ 1, "asc" ]],
"sPaginationType": "full_numbers",
"oPaginate":
{
"sNext": 'n',
"sLast": 'l',
"sFirst": 'f',
"sPrevious": 'p'
}
});
Anyone know how to do this? I would think it would be on the lines of:
"oPaginate":
{
"sNext": '<img src="myimage.jpg" />',
...
}
One year late, but this looks like it's still an unanswered question.
To be able to change the default values of next/last buttons you need to pass the oPaginate object as part of the oLanguage object, like so:
$('#myTable').dataTable({
"aaSorting": [[ 1, "asc" ]],
"sPaginationType": "full_numbers",
"oLanguage": {
"oPaginate": {
"sNext": 'n',
"sLast": 'l',
"sFirst": 'f',
"sPrevious": 'p'
}
}
});
Source
this was a long time ago, but the answer he provided should work...
i have this, and it works:
oTable = $('#example').dataTable( {
"ordering": false,
//"sDom":"flrtip"
"sDom":'r<"contactsTable"t><p>',
"oLanguage": {
"oPaginate": {
"sNext": '<i class="entypo-right-circled" ></i>',
"sPrevious": '<i class="entypo-left-circled" class="Dia_pagination_ico" ></i>'
}
}
});
the css class puts the image, but im guessing the example given should work
You can change them using CSS..
Take a look at my example:
http://www(#)fisheragservice(#)com/tm/users(#)html
The page contains email addresses and don't want the spam bots to index them, so please replace the (#)'s with .'s
You can view the source to see how it was done.. Hope this helps..