I have a panel in Sencha Touch defined as so:
var albumContainer = Ext.create('Ext.Panel', {
id: 'album_container',
html: '',
flex: 1,
scrollable: 'vertical',
padding: 0,
});
Everything works, however since adding the scrollable property the panel has had a white background, which I'm trying to get rid off, however just setting the background of #album_container, even as !important, does nothing. Any help? Thanks in advance.
Best regards,
Damir H.
For me, I had to change the background color of the items.
items: [{
style: 'background-color:#F00',
layout: 'hbox', padding: '5',
// some other stuff
Related
Currently I am facing an awkward situation:
I want to make the dialogContent's overflow: auto so my modal becomes scrollable if the content exceed the height of the dialog. However, there's a dropdown menu that I'd like it to display normally, but because overflow: auto, I have to not only scroll down the dropdown menu, but also the dialog itself. Can someone help me with this?
const dialogStyle = makeStyles((theme: Theme) =>
createStyles({
root: {
width: '100vw',
},
dialog: {
overflow: 'visible',
},
dialogContent: {
overflow: 'auto',
},
}),
)
For anyone who might have the same issue - I figured the answer myself.
So.. The best way to resolve this, is to add an attribute: <Dialog scroll='body' /> and keep the both dialog and dialogContent's overflow as visible.
Thanks for any thoughts on the subject.
I'm trying to work with the Material-UI Modal component. As shown in the picture below, there is always a black border on render.
I have tried
removing it with custom useStyles and applying it to Paper, Modal, as well as the inner divs
default CSS, (border:0 etc) with Paper, Modal etc.
The interesting thing is that when I click on the inspect tools, or when I focus the modal, the border disappears and leaves me with the style I desire until I re-render.
I greatly appreciate any suggestions or feedback, I'm new to Material UI and I'm not sure where I'm going wrong.
Thanks!
This borders are added by browser, another one is defined in paper.
const useStyles = makeStyles((theme) => ({
paper: {
position: 'absolute',
width: 400,
backgroundColor: theme.palette.background.paper,
outline: 0, // Disable browser on-focus borders
//border: '2px solid #000', // Remove black border of css
boxShadow: theme.shadows[5],
padding: theme.spacing(2, 4, 3),
},
}));
With this changes I have removed them from the sandbox sample.
In a sencha app, I want to create two or more "Panel" in the same page, but with different Style.
Panel_1.js:
Ext.define("MyApp.view.Panel_1",{
extend:'Ext.panel.Panel',
title:'Panel 1 title",
//some try
componentCls:'panel_1',
cls:'panel_1'
...
});
Panel_2.js:
Ext.define("MyApp.view.Panel_2",{
extend:'Ext.panel.Panel',
title:'Panel 2 title",
componentCls:'panel_2'
});
I add these two panels in one page, eg. the "center" of mainview. Add for css file with css class panel_1 and panel_2. But does not work.
how can I set these two panel with different Title, Background color, color, border, and so on.
Add the same question, I want different Button, eg. Blue Button with yellow text, red Button with white text, in a same toolbar.
I try override the extjs css class, eg. x-panel-body . You know, all compoent will be changed. That is not what I want.
It's hard to tell what you're having a hard time with. What you seem to be trying to do does work. I'll just provide a simple example, see https://fiddle.sencha.com/#fiddle/ecd
The easiest way is to add a cls to your panel, then you can use CSS to apply only within those classes. You can also add cls to items inside of your component. Also, Ext has some classes it already applies so you can use them (x-body, x-header for Ext.panel.Panel). The following example shows you how to scope your .x-header definitions so they only apply to your class
JavaScript
Ext.define("MyApp.view.Panel_1",{
extend:'Ext.panel.Panel',
title:'Panel 1 title',
cls:'panel_1',
html: 'Here I am',
buttons: [{text: 'OK', cls: 'ok'}, {text: 'Cancel', cls: 'cancel'}]
});
Ext.define("MyApp.view.Panel_2",{
extend:'Ext.panel.Panel',
title:'Panel 2 title',
cls:'panel_2',
html: 'Here I am again',
buttons: [{text: 'OK', cls: 'ok'}, {text: 'Cancel', cls: 'cancel'}]
});
CSS
.panel_1 .x-header{
background-color: blue;
}
.panel_1 .ok{
background-color: green;
}
.panel_2 .x-header{
background-color: yellow;
}
.panel_2 .cancel{
background-color: red;
}
Most typically, you would extend your sass resources to create custom classes for your both Panels (or at least for the one you wish to change).
You could do it with the Sencha Architect, which has a 30 day trial period.
The trick would then be to add a ui tag, that would then be added to your generated class name
Ext.define("MyApp.view.Panel_2", {
ui: 'black'
});
would then be generated with a class called like
.panel-default-black
for this class you could then create your sass for all internal elements
sass/component.css would then for eg contain
.panel-default-black {
background-color: black;
color: #ffffff;
.panel-default-header {
background-color: $some-predefined-value-in-another-sass-file;
}
}
another option would be to use the UI-label, like:
#include extjs-panel-ui(
$ui-label: 'black',
$ui-background: black;
$ui-color: white;
$ui-header-background-color: blue;
);
After compiling the theme, you would then see the changes between the 2 panels.
More info, you could find on the site of Sencha
Yet another none recommended way, would be to use the style tag, and to directly give your style for your panel, but that is not recommended to use
I have the following problem. I have a element and want to blur just a part of it. An example is given below, where the main background is a element
In short, I want to blur the content underneath the <div> that has the blur filter.
I have checked and found how to do this for images (http://jsfiddle.net/ezaLot4d/), using the CSS :before selector. However, it is not valuable in my case, as my element is a video, so that the bluring should happen continuosly and not only when the page is rendered.
Any ideas?
Thanks
Check out BlurJS, a JavaScript Library that blurs whatever is underneath something.
http://blurjs.com/
You can use it like so:
$('.target').blurjs(options);
I've included the default options here:
{
source: 'body', //Background to blur
radius: 5, //Blur Radius
overlay: '', //Overlay Color, follow CSS3's rgba() syntax
offset: { //Pixel offset of background-position
x: 0,
y: 0
},
optClass: '', //Class to add to all affected elements
cache: false, //If set to true, blurred image will be cached and used in the future. If image is in cache already, it will be used.
cacheKeyPrefix: 'blurjs-', //Prefix to the keyname in the localStorage object
draggable: false //Only used if jQuery UI is present. Will change background-position to fixed
}
You can now do this with backdrop-filter:
backdrop-filter: blur(10px);
src: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter
As the title says, I would like the message of Ext.Msg.alert() to in center align. I tried this:
Ext.Msg.alert({
title: 'Success',
msg: 'Deleted',
buttons: Ext.Msg.OK,
baseCls: 'msgbox'
});
CSS:
.msgbox {
text-align: center;
}
It is still on left align. How do I do this?
The displayed text is a displayfield component that has the same size that its text then, even when it is centered, you cannot see it aligned as you want.
So, the solution is to make it bigger. In my example i do it using a css class. Take a look at it:
var w = Ext.Msg.alert({
title: 'Success',
msg: 'Deleted',
buttons: Ext.Msg.OK,
autoShow: false,
cls: 'msgbox'
});
w.down('.displayfield' ).addCls('displayfield-fullsize');
and the class is, as you can imagine:
.displayfield-fullsize{
width: 100% !important;
}
See it working here: http://jsfiddle.net/lontivero/F7HE3/3/