I am currently designing a table that was made with rc-table. I made the last row for actions which renders the buttons edit and delete. I want to edit it's style with Sass but I was unable to
I also specified classes for both the edit and delete button since they'll have different background-colors.
Is it possible to access it directly via a class? or is there another way which I don't know about.
for example if you have something like this in your code
this.columns = [
{
title: 'Operations', dataIndex: '', key: 'd', render: (text, record) =>
<a className="delete-btn" onClick={e => this.onDelete(record.key, e)} href="#">Delete</a>,
},
];
you can add class t the a element and the overwrite those styles with your CSS/SASS.
like this
.rc-table td {
background-color: 'red';
// custom styles here
}
notice the className attribute in a.
Related
In my angular project, I have some css variables defined in top level styles.scss file like this. I use these variable at many places to keep the whole theme consistent.
:root {
--theme-color-1: #f7f7f7;
--theme-color-2: #ec4d3b;
--theme-color-3: #ffc107;
--theme-color-4: #686250;
--font-weight: 300
}
How can I update values of these variables dynamically from app.component.ts ? And What is the clean way to do this in angular ?
You can update them using
document.documentElement.style.setProperty('--theme-color-1', '#fff');
If u want to update many values, then create a object
this.styles = [
{ name: 'primary-dark-5', value: "#111" },
{ name: 'primary-dark-7_5', value: "#fff" },
];
this.styles.forEach(data => {
document.documentElement.style.setProperty(`--${data.name}`, data.value);
});
The main thing here is document.documentElement.style.setProperty. This line allows you to access the root element (HTML tag) and assigns/overrides the style values.
Note that the names of the variables should match at both places(css and js files)
if you don't want to use document API, then you can use inline styles on HTML tag directly
const styleObject = {};
this.styles.forEach(data => {
styleObject[`--${data.name}`] = data.value;
});
Then In your template file using ngStyle (https://angular.io/api/common/NgStyle)
Set a collection of style values using an expression that returns
key-value pairs.
<some-element [ngStyle]="objExp">...</some-element>
<html [ngStyle]="styleObject" >...</html> //not sure about quotes syntax
Above methods do the same thing, "Update root element values" but in a different way.
When you used :root, the styles automatically got attached to HTML tag
Starting with Angular v9 you can use the style binding to change a value of a custom property
<app-component-name [style.--theme-color-1="'#CCC'"></app-component-name>
Some examples add variables directly to html tag and it seem in the element source as a long list. I hope this helps to you,
class AppComponent {
private variables=['--my-var: 123;', '--my-second-var: 345;'];
private addAsLink(): void {
const cssVariables = `:root{ ${this.variables.join('')}};
const blob = new Blob([cssVariables]);
const url = URL.createObjectURL(blob);
const cssElement = document.createElement('link');
cssElement.setAttribute('rel', 'stylesheet');
cssElement.setAttribute('type', 'text/css');
cssElement.setAttribute('href', url);
document.head.appendChild(cssElement);
}
}
I'm using TinyMCE 4. Unfortunately the "backcolor" control seems to only allow changes to text, not a whole paragraph. Even when I select a paragraph in the status bar of TinyMCE and apply a background color, it's only applied to the inner span, not the paragraph itself. I would need to set the background color for the complete content, not only parts of it. This should be applied to the HTML output, something like
<div style="background-color: #f00">[complete editor content]</div>
Thanks for any help.
You can use this code to access the tinymce's body to set background color:
tinymce.activeEditor.getBody().style.backgroundColor = '#<yourcolor>';
Disadvantage: Setting the background color that way will not change/affect the html content inside the editor. So you have to treat/update/store that value in a separate way.
You can also add a button on initialising tinymce:
tinymce.init({
...
setup: function (editor) {
editor.addButton('mybutton', {
text: 'Set bgColor',
icon: false,
onclick: function () {
editor.getBody().style.backgroundColor = '#E5FFCC';
}
});
...
});
You have to reach the editable content body in the dynamically generated iframe. The iframe is generated after the initialization of the editor.
If your textarea id is foo, the id of the iframe is foo_ifr.
You may also open the editor with firebug or developer tools and use dom explorer, you may see the inner dynamically generated components.
use:
var iframe = document.getElementsByTagName("iframe")[0];
// or
var iframe = document.getElementsById("foo_ifr");
// check if iframe.contentDocument is cross-browser, i tested with IE 11.
var innerBody = iframe.contentDocument.getElementsByClassName("mceContentBody")[0];
innerBody.style.backgroundColor="red";
To get the custom styling that you want, you have to create new custom style formats when the editor is being initialized. This gives you the ability to define css styling to the element. For example
HTML
<form>
<textarea></textarea>
</form>
JS
tinymce.init({
selector: 'textarea',
//merge with default formats
style_formats_merge: true,
//set up custom style formats
style_formats: [
{title: 'Red Background', block: 'p', styles: {
'background-color': '#ff0000',
'color':'white',
'padding': '7px'}
},
{title: 'Blue Background', block: 'p', styles: {
'background-color': '#0000ff',
'color':'white',
'padding': '7px'}
}
]
});
This merges two new custom formats with the default formats. See this DEMO
i am have 2 forms, and in first form i am have button1:
Buttons[{
width: 350,
text: 'Book',
name:'button1'}]
on second form i am have button2, and when button click in second form, then button in first form disabled, before i am use id of button (id:'button1') and make this:
Ext.getCmp('button1').setDisabled(true);
but now i am remove ID and use name in components. But i am didn"t know how disable button1 by name!
Buttons don't have a name property - you should consult the documentation to see what configuration variables you have available to you. I'd instead assign it an itemId so you can make use of the up() and down() functions in order to easily find an item in the component hierarchy from an event handler.
Or if you want to find it directly you can use the following to lookup up the item:
{
text : 'Button',
itemId : 'buttonSelector'
}
var button = Ext.ComponentQuery.query('#buttonSelector');
if(button.length) button[0].disable();
Keep in mind that the ComponentQuery utility returns an array of items (even if you make your itemId unique). Here's a simple fiddle / demonstration.
In response to your comment, there may be confusion in regards to what the buttons config actually does - according to the docs it is shorthand for the following:
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
ui: 'footer',
defaults: {minWidth: minButtonWidth},
items: [
{ xtype: 'component', flex: 1 },
{ xtype: 'button', text: 'Button 1' }
]
}]
... this creates an extra "step" in the hierarchy which you must account for in a query. For example, if your form had an itemId of formId you could try something like:
Ext.ComponentQuery.query('#formId toolbar #myButtonId')[0].disable();
I've updated your fiddle to demonstrate this.
I'm wondering if it's possible to add custom formatting to redactor? I created a custom button, and I'm able to change the formatting of text, but only using certain elements:
['p', 'blockquote', 'pre', 'h3', 'h4', 'h5']
However, I'm not able to add any of the following:
['small', 'figcaption']
I followed the Redactor docs to set up the button, and here is my function that is being called:
var selected_html = $('#redactor_content').getSelected();
$('#redactor_content').execCommand('formatblock', '<small>');
I also tried adding elements to my 'formattingTags' array, but it didn't seem to have any affect.
formattingTags: ['p', 'blockquote', 'small', 'pre', 'h3', 'h4']
Thank you in advance.
I think I figured it out.
I added the following to my button function:
var $selected_html = $('#redactor_content').getSelected();
$('#redactor_content').execCommand('inserthtml', '<small>' + $selected_html + '</small>');
However, this is not perfect as it does not replace the parent tag, and you can keep adding elements within elements.
Something like that:
redactorOptionsDefaults = {
buttonsAdd: {},
activeButtonsAdd: {},
buttonsCustom: {}
};
redactorOptionsDefaults.buttonsCustom.small = {
title: 'small Header',
callback: function () {
this.formatBlocks('small');
}
}
redactorOptionsDefaults.activeButtonsAdd.small = 'small';
It formatting block, highlight button if needed while selecting block. But don't remove style while repeat button click
I would like to add a class to my "formatselect" options of the tinyMCE in Wordpress. So when selecting a h1 from the dopdown it should generate a <h1 class="blue">.
I found this Post, but can't get it to work.
Any ideas?
Thanks in advance!
What is described there is working even though not suitable for everyone. I'll give you a short list of what you need to do:
1. use the content_css tinmce init setting
content_css: "http://www.mydomain.com/css/content.css",
2. Create a content.css file containing your class
h1.foo {
background-color: #F067A0;
}
3. use the styleformatting tinmce init setting
style_formats: [{
title: 'My Foo styles'
}, {
title: 'Foo',
block: 'h1',
classes: 'foo',
exact: true
,
4. Make sure you have the style button included (tinymce init)
theme_advanced_buttons1: "styleselect",
You should be able to select text from the h1-tag in the editor and select foo from the dropdown menu of styles. The class should be applied to your selected text.