PDA

View Full Version : CSS Issues



alejandroNNU
11 Mar 2014, 4:35 PM
I have a viewport with the 'cls' property pointed to a CSS that gives a certain background image, when I place a panel inside the viewport however, for some reason it looks like the same CSS gets applied to it, giving it the same background:

48249

how can I stop this from happening so that the panel retains it's original background?

existdissolve
11 Mar 2014, 6:05 PM
Can you share your code? Both JS configuration and CSS.

alejandroNNU
12 Mar 2014, 5:57 AM
Hi, sure thing, so I have this viewport:


Ext.define('MyApp.view.MyViewport', {
extend: 'Ext.container.Viewport',


cls: 'backgroundImg',
itemId: 'myViewport',


initComponent: function() {
var me = this;


Ext.applyIf(me, {
items: [
{
xtype: 'panel',
height: 231,
html: '<p>this is a test</p>',
width: 474,
title: 'My Panel'
},
{
xtype: 'button',
text: 'MyButton',
listeners: {
click: {
fn: me.onButtonClick,
scope: me
}
}
}
]
});


me.callParent(arguments);
},


onButtonClick: function(button, e, eOpts) {
window.print();
}


});


and this is the viewport.css


.backgroundImg div {
background: #071040 url('bg.jpg') no-repeat center;
}


.backgroundClr div {
background: #FFFFFF;
}


and it ends up looking like this:

48260

I'd just like to figure out how to stop the CSS from getting applied to the panels inside the viewport, any help would be great thankyou.

existdissolve
12 Mar 2014, 6:01 AM
Your selector (.backgroundImg div) is too greedy. You are basically telling it to apply that background to EVERY div beneath an element with a class of "backgroundImg". Be more specific with your selector to target only the desired element.

alejandroNNU
12 Mar 2014, 6:04 AM
I see, I'm sorry I just have almost no experience working with CSS, could you give me a quick example of how I could tell it to just apply it to a specific element? (in this case the viewport?)

existdissolve
12 Mar 2014, 6:10 AM
If the cls is on Viewport, that's going to get added to the body tag. So you could probably just swap ".backgroundImg div" with "body"

alejandroNNU
12 Mar 2014, 7:24 AM
thanks, I got it working properly, I just have one more question, I have a button on the panel that does
window.print() on click, which I understand is supposed to print all the contents of the current window. So if I leave the panel on the top left corner, no problem, when I hit the button I'll get this:

48261

If I change the margins property on the panel to something like: 150, 0, 0, 500 however, it'll display properly on the browser:

48262

but when I hit the button to print I'll get this:

48263

it looks like it only prints the left side of the page, do you know why this is and how I might get around it? Also, I'm not sure why it's not printing the blue blackground of my viewport, just the panel for some reason.