For my project I want different pop-ups for different useage. So I created a new css class. Now I want to change the style of the title component (as shown below) on the same way as I changed the buttons.
So my question is: can I change the css of the title the same way as I change the css of the buttons? With the className property. Also, how should I do that?
bootbox.dialog({
message: "<h4>" + errorMessage + "<h4>",
title: $filter("translate")("Warning"),
buttons: {
no: {
label: $filter("translate")("Cancel"),
className: "c-btn-declined-selection c-btn-global-warning",
callback: noCallback
},
yes: {
label: $filter("translate")("Confirm"),
className: "c-btn-confirm-selection c-btn-global-warning",
callback: yesCallback
}
}
From reading the Bootbox.js documentation, it seems that an inherent title-styling method doesn't exist. This leaves you with two options...
1. Add the style/class in-line:
bootbox.dialog({
//...
title: "<span style='color: red;'>This title is red</span>",
//...
})
bootbox.dialog({
//...
title: "<span class="redText">This title is red</span>",
//...
})
2. Manipulate the generated elements manually
Right click your Bootbox dialog on the page and go to Inspect Element. From here you'll see the generated content, including classes and elements, from which you can just use some basic CSS rules to style them.
For example, if the pop-up HTML looked like this...
<div class='bootbox-popup'>
<h4 class='popup-title'></h4>
<div class='popup-body'> ... </div>
</div>
You could style it using something like:
h4.popup-title {
color: red;
}
Related
I use grapejs, and I need to change the text language. There is 'i81n' for labels, but I couldn't find anything for inputs like this as you can see i change the label language with i18n but selectbox's options are still english Also if it's possible, As you can see in the pic I need to change the placeholder for text input and the title 'text' above it
I Found how to change inputs. You have to change your props one by one. You can find the details in
https://github.com/artf/grapesjs/issues/2712#issuecomment-615763048
And for the second issue you have to add your i18n file domComponents. in my scenario it's like this
var _default = {domComponents: {
names: {
'': 'Kutu',
wrapper: 'Gövde',
text: 'Metin',
comment: 'Yorum',
image: 'Görsel',
video: 'Video',
label: 'Etiket',
link: 'Link',
map: 'Harita',
tfoot: 'Tablo alt',
tbody: 'Tablo gövde',
thead: 'Tablo başlık',
table: 'Tablo',
row: 'Satır',
cell: 'Hücre'
}...}..}
Document for this is here : https://grapesjs.com/docs/modules/I18n.html#plugin-development
I apologize, but I'm not able to provide a working jsFiddle snippet. I will update the question if I understand how to put the code below in it.
Using dojox/mobile I populate an EdgeToEdgeStoreList with custom ListItems. Some code:
html (jade)
div(data-dojo-type="dojox/mobile/View")
h1(data-dojo-type="dojox/mobile/Heading") Device List
div(data-dojo-type="dojox/mobile/ScrollablePane")
ul#list(data-dojo-type="dojox/mobile/EdgeToEdgeStoreList" data-dojo-props="itemRenderer: DeviceListItem, select: 'single'")
js
var store;
var list = registry.byId("listDevices");
var devices = JSON.parse("a string received from server");
store = new Memory({data: devices, idProperty: "label"});
list.setStore(store);
DeviceListItem
define([
"dojox/mobile/ListItem",
"dijit/_TemplatedMixin",
"dojo/_base/declare"
], function (ListItem, TemplatedMixin, declare) {
var template =
"<div class='deviceDone${done}'>" +
" ${id} - <div style='display: inline-block;' data-dojo-attach-point='labelNode'></div>" +
" <div class='deviceCategory'>${category}</div>" +
"</div>";
TemplatedListItem = declare("DeviceListItem",
[ListItem, TemplatedMixin], {
id: "",
label: "",
category: "",
done: "false",
templateString: template
}
);
});
It works fine, that is I will see my custom ListItems.
But if I resize the window (on desktop browsers) or change orientation (on mobile ones) only the ${id} field remains visible. The others (label and category) disappear. The behavior is the same in all browsers (that I tried).
After debugging I discovered the following. Before any resize the actual html of a ListItem looks like this:
<div id="item1728" class="deviceDoneFalse mblListItem mblListItemUnchecked" tabindex="0" widgetid="item1728" aria-selected="false" role="option">
item1728 -
<div style="display: inline-block;" data-dojo-attach-point="labelNode">n.a.</div>
<div class="deviceCategory">General purpose</div>
</div>
and it's like the template string. After a resize the inner div becomes:
<div style="display: block;" data-dojo-attach-point="labelNode">n.a.</div>
without "inline" all the layout will mess-up and thus the fields "disappear" (actually go below, behind the next row).
I wonder why this happens - the display style is hardcoded into the template strings!
Furthermore, I inspected the CSS rules at runtime, and it's not due to them, it's the html that has changed - indeed.
ListItem (source in dojox/Mobile/ListItem.js) has the following function:
resize: function(){
if(this.variableHeight){
this.layoutVariableHeight();
}
// labelNode may not exist only when using a template (if not created by an attach point)
if(!this._templated || this.labelNode){
// If labelNode is empty, shrink it so as not to prevent user clicks.
this.labelNode.style.display = this.labelNode.firstChild ? "block" : "inline";
}
},
This function is called after a resize and as you can see sets the labelNode display style to "block".
You can replace this function when you define your DeviceListItem, keeping the original source as is but changing the display style.
i am trying to implement ckeditor's inline editing for first time,i have gone through documentations and solutions but i haven't found any solution for my issue.
the content of the div tag that i am modifying does not have a unique id ,actually its generated at run time like this
<%
for(Section subSection:subSections) {
%>
<div class="editable" id="contact<%=subSection.getSectionId()%>" contenteditable="true">
<content goes here that also comes from db>
</div>
<%}%>
i am able to show the current selected content using on click of save button like this
CKEDITOR.plugins.registered['save'] = {
init: function (editor) {
var command = editor.addCommand('save',
{
modes: { wysiwyg: 1, source: 1 },
exec: function (editor) { // Add here custom function for the save button
console.log(editor.getData());
}
});
editor.ui.addButton('Save', { label: 'Save', command: 'save' });
}
}
but i need the value of Id attribute also of currently selected div which i am not sure how to get.
i was able to do this in tinymce with var div_id = tinymce.activeEditor.id;if that helps in anyway.
It's editor.element.getId(). Use it in your command's exec method. Read more about CKEDITOR.editor#element.
I am looking for some code which would add a dropdown to my WYSIWYG fields in the WordPress backend through which I would be able to choose an inline line-height for the selected text. I find the tinyMCE documentation very confusing. Additionally it is mostly aimed at TM 3, but WP 3.9 uses the fourth version…
My tinyMCE Plugin looks something like this:
tinymce.PluginManager.add('ad_lineheight', function(editor, url) {
…
editor.addButton('ad_lineheight', {
type: 'splitbutton',
text: 'line-height',
icon: false,
menu: menuval
});
});
How would you integrate the function, which adds inline-styles to the selected input, like so <span style="line-height: 120%; display: inline-block;">selected text</span>?
EDIT: I already managed to add the dropdown to the editor, it shows the line-heights I defined programmatically like 80%, 90%, 100% and so on.
EDIT2: With this code I am able to change the line-height:
editor.addCommand('lineHeight', function(com, value) {
var selected = tinyMCE.activeEditor.selection.getContent();
var content = '<span style="line-height: '+value+';">' + (selected != '' ? selected : '') + '</span>';
editor.execCommand('mceInsertContent', false, content);
});
editor.addButton('lineheightselect', function() {
…
…
return {
type: 'listbox',
text: 'line-height',
tooltip: 'line-height',
values: items,
fixedWidth: true,
onclick: function(e) {
if (e.control.settings.value) {
editor.execCommand('lineHeight', false, e.control.settings.value);
}
}
};
});
But it is not very practical as it ignores inline-styles that are already there leading to code like this:
<span class="h3" style="font-size: 90%;"><span style="line-height: 160%;">AND</span></span>
this is an old question but I am adding the answer here just in case anyone still need it.
you can use getNode() instead of getContent()
you command code will be
editor.addCommand('lineHeight', function(com, value) {
var node = tinyMCE.activeEditor.selection.getNode();
$(node).css('line-height', value);
});
You need to add custom button to TinyMCE editor, you need also to create your style in some CSS stylesheet. Maybe some WP function may be needed. I don't think you will need adding anything in JS - there is already possibility to add custom style button in TinyMCE and you could achieve that using PHP.
http://codex.wordpress.org/TinyMCE_Custom_Buttons
http://codex.wordpress.org/TinyMCE_Custom_Styles
I've developed web applications with Dojo for more than one year, and I've used dojox grid a lot, but there is no way to add customize buttons on DataGrid or EnhancedGrid, as I know that ExtJS, or EasyUI, jQuery jqgrid are capable doing this.
So I want to ask if there is any way that can add buttons or other HTML DOM in the dojox.DataGrid?
at least, you can add dojo.form.Button's to it. simly add an element to the structure-property of your DataGrid like that (sorry, due to no-time i just copy pasted it from an actual project of mine...):
{
name: ' ',
field: 'idx',
type: dojox.grid.cells._Widget,
editable: false,
formatter: function (idx) {
return new dijit.form.Button({
_destroyOnRemove: true,
label: 'Bearbeiten',
onClick: function () {
dojo.byId('clickedItemIdx').value = idx + '';
if (reports.entries[idx].type == 'Rufbereitschaft') {
dojo.byId('addOrEditEntry_OCD_btn').click();
} else {
dojo.byId('addOrEditEntry_ASS_btn').click();
}
}
});
}
},
note that my data contains an idx-field which i commit to the onclick-function in order to know which element was clicked. This is the only way i got this to work.
As you may know, you can add multiple of those structure-elements referring to the same field.