View Full Version : CSS Issues

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:


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

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

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


onButtonClick: function(button, e, eOpts) {


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:


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.

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.

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?)

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"

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:


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


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


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.