I have a button. and i need to align it to the right, make the font size increase and bold etc. When i googled it says i should use CSS.
How can i use CSS, to style the button that i added ?
My Question :
Where should i add the CSS file in my application, and how can i use it to style the button ?
items: [
{
xtype: 'button',
align: 'right',
text:'Assign'
}
]
items: [
{
xtype: 'button',
align: 'right',
text:'Assign',
cls : 'foo'
}
]
And in a CSS file:
.foo { background:black; }
This adds a CSS class to the outer most element of the Button. There may be many elements involved in the DOM markup, so use Firebug to figure out which elements you want to style.
More details in Ext docs: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.button.Button-cfg-cls
Related
I am trying to change the default color of vuetify table header. I managed to change the header using custom class using code below:
headers = [
{
text: "Metering Point",
align: "start",
sortable: true,
value: "meteringpoint",
class: "success--text title"
},
]
Unfortunately, the checkbox style for select all is still on default color. As the header for the check box is not declared on the array headers so it is not declared with the custom class.
Previously I tried to overwrite it on the tag with this code below:
.v-data-table-header {
background-color: grey;
}
but it doesn't work.
how do I declare the class for the checkbox? Or is there any possible way for me to overwrite the default styling?
As said by #StevenSiebert. I need to check what is the class after being rendered.
I checked the table header class name and use this code inside the style tag to change the style for that class:
::v-deep .v-data-table-header {
background-color: #DCDCDC;
}
Here is the reference I found for Scoped CSS in Vue: https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors
when taking a look at the official Vuetify Docs here: Vuetify API
It gives the option to set checkbox-color on the v-data-table (for all checkboxes) or v-data-table-header (for the select all checkbox) which would be my choice considering it is officially supported.
<v-data-table
:items="desserts"
headers = [
{
text: "Metering Point",
lign: "start",
sortable: true,
value: "meteringpoint",
class: "success--text title"
},
]
checkbox-color="#DCDCDC"
></v-data-table>
I have been trying to learn styling in extjs, but I cannot figure out how it works. In a very simple example, I would like to apply some styles to panel header:
app.js
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.panel.Panel', {
title: 'MyPanel',
cls: 'title',
renderTo: Ext.getBody(),
items: [{
xtype: 'button',
text: 'myButton'
}, {
html: 'Hello World!!!',
}]
})
}
});
So, according to documentation I managed to change header background-color with the following css file:
app.css
.title .x-panel-header {
background-color: pink;
color: red; /* this doesn't work */
font-size: 22px; /* this doesn't work */
}
The problem is that some theme variables aren't applied correctly - for example, text color or font-size, although these variables are specified according to documentation for panel header. What am I missing?
Almost all ExtJS components have a style or cls property.
Manually overriding the extjs css classes should be the last resort.
In your case you should be looking at these components:
Ext.panel.Header
Ext.panel.Title
The panel component should have a header config and the header component should have a title config to customize each part.
Here is working example: Sencha fiddle example
For the sass variables you mentioned
They are used to customize ExtJS Themes. So if you want to make your own theme with let's say triton as base you can use these variables to create your own theme. This is quite useful if you want to make overrides for the whole theme (e.g. the background color of all Ext.panel.Panel components)
I'd recommend you to read this guide for more information on this subject: Theming guide
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 have a grid with many columns, each of them has a filter, and some of the columns has a long text in the header:
I added a css rule to wrap text in the header:
.x-column-header-inner .x-column-header-text { white-space: pre-wrap; }
In result I got filters with different height:
How to make the same height filters?
I implemented the search filter with your hint. You can find it here. I didn't have your issue with long column labels. They just cut off using an ellipsis like it is the standard behavior in ExtJs.
I've solved my issue by including search filters into fieldcontainers, and using vbox layout with pack at the end.
items: [
{
xtype: 'fieldcontainer',
layout: {
type: 'vbox', pack: 'end'
},
width: '100%',
items: [
{
xtype: 'triggerfield',
...other code...
}
]
}
]
I'm currently working on a project where we recieved all our icons in 1 sprite file. I have never ever used sprites (and i'm pretty new to extjs)
I cannot find a decent example of how to transform the following code (which uses 1 upload.png) into using a spritefile (icons.png)
{
xtype: 'actioncolumn',
cls: 'tasks-icon-column-header tasks-upload-column-header',
width: 24,
icon: 'images/upload.png',
iconCls: 'x-hidden',
tooltip: 'Upload',
menuDisabled: true,
sortable: false
handler: Ext.bind(me.handleUploadClick, me)
}
You need to define class in your css file and define the background image and position of your icon in sprite. For example, if you have icons like this, do something like below to define your class and show only google icon:
.google_icon {
background:url(http://start.ubuntu.com/12.04/sprite.png) -10px -310px;
height:38px;
}
and use this class in your code like this:
iconCls: 'google_icon',
you also need to remove this line:
icon: 'images/upload.png'
I hope it helps!