How can I control to opacity of a disabled panel with a mask.
I would like to disable to the panel (meaning It will be touchable) and leave its opacity as is.
Thx
You can create your own CSS style sheet that overrides ExtJS's default style sheet for disabled items. In ext-all.css, there are several style configurations for the .x-item-disabled class that you can take a look at. For example, they specify the opacity for toolbar button icons like so:
.x-toolbar .x-item-disabled .x-btn-icon {
opacity: .35;
-moz-opacity: .35;
filter: alpha(opacity=35);
}
So you'll have to look up what class your panel belongs to and construct a style sheet that includes specification for your particular selectors.
CSS Syntax (Wikipedia)
I would recommend to whoever lands on this post, to create a class for the panel disabled state in your own css file and then configure the panel disabled state class as follows, so you will only affect the desired panel and not the entire application:
In your CSS
.my-disabled-panel {
opacity: .35;
-moz-opacity: .35;
filter: alpha(opacity=35);
}
And in the panel config...
Ext.create('Ext.panel.Panel', {
[...],
disabledCls: 'my-disabled-panel',
[...]
}
Related
If I use #tailwindcss/forms it will be styled like Unstyled on the following site.
chackbox should look like Simple on the following site.
Currently, when you press down on the checkbox like Unstyled on the site, a border is displayed. I want to eliminate it.
enter link description here
//taiwind.config.js
plugins: [
require('#tailwindcss/custom-forms'),
]
You will have to override the the style for box-shadow which is applied on checkbox and radio:
[type='checkbox']:focus, [type='radio']:focus {
box-shadow: none;
}
I want all users see scrollbars as its in dark mode of chrome;
But some users dont use dark theme in chrome so I set colorSchema:"dark" of parent div style and it looks like pic below;
Why its diffirent from origin dark style? how to use the schema with strong dark?(first pic)
I know there is custom css solution to change scrollbar css. its ok, but I am using reactjs, is it possible to style scroll bar in react component file?
const PARENTDIV: React.CSSProperties = {
backgroundColor: color.quizBackground,
flex: 1,
colorScheme: 'dark',
}
I'm trying to customize a single component CSS, avoid to customize all component.
Ext.define('MyApp.tab.Panel', {
extend: 'Ext.tab.Panel',
header:{
xtype: 'myWorkspacesToolbar',
items:[
....
]
},
items:[
....
]
I want to customize only HEADER style and his sub items (added dynamically) and not Panel items.
Using scss file myWorkspacesToolbar.scss for example:
$button-toolbar-color: #F00;
I change all button color (header and panel items and sub items).
Using theme mixing variable I have to set UI for single field in header to obtain CSS changes.
What is the best way to do that?
Use extjs-button-ui mixin for create needed button and set ui property to your button in header
I have a senchatouch tabbar with 3 button docked at the bottom but the 3 button stay centralized how can I distribute this 3 button in my tabbar to each one have like 33% of width?
This is my tabbar:
https://www.dropbox.com/s/s0semvwywpnsacj/2014-01-03%2015.19.12.png
i want my tabbar looks like this one: https://s3.amazonaws.com/cocoacontrols_production/uploads/control_image/image/2207/iPhone.png
with separeted buttons
In configuration of Ext.tab.Panel you can add configuration for tabBar into tabBar config property. There you can set defaults width of tabBar tabs to flex: 1. Then each tab's width will take same proportion of whole tabBar width.
So your tabBar config should be:
tabBar: {
defaults: {
flex: 1
}
}
See this fiddle for live example: https://fiddle.sencha.com/#fiddle/2f6
I am trying to change theme of sencha application, i want to know how to change background color of all panels and containers of sencha touch app like touchstyle application
I changed the title bar, tab panel color, but i don't know how to change the color of panel and container.
Set the style config.
style: {
background: 'red'
}
EDIT:
You could set the cls config for your panel. E.g: cls: red-bg and in your stylesheet:
.red-bg .x-panel-body{
background-color : red !important;
}
Two ways:
First(Directly change in panel):
new Ext.Panel({
width:200,
height:200,
bodyStyle:{"background-color":"red"},
renderTo: document.body
});
Second(Add CSS class and use it in Panel's 'bodyCssClass' property):
.x-panel-body{
background-color: blue}