0

I have a dynamic created page with a panel which contains this:

<div class="x-panel-body x-panel-body-default x-panel-body-default" id="panel-1026-body" style="left: 0px; top: 0px; width: 1819px; height: 29px;">

I want to change the width of this panel, but the problem is that the width is not being overwritten.

What I have tried to do in my css is: 

#panel-1026-body {
width: 400px;

}

This does not work, since the width still stays 1819px as auto-created by the panel. How ever, it seems that it is only the width: that it won't accept, if I fx. add a margin-left: 400px; or background-color: red; it works.

Does anyone know what might be the cause of the width not taking effect? I have provided the info that I think is relevant, but please let me know if you need more info

Thank you

user1960836
  • 1,732
  • 7
  • 27
  • 47

4 Answers4

2

It is because when your set a value in your element like style="left: 0px; top: 0px; width: 1819px; height: 29px;", it will be prioritary on the CSS.

Rapid solution :

#panel-1026-body {
  width: 400px !important;
}

But it's a very bad pratice to use !important

Cool solution

Try to remove all the style of your element and put it into a CSS class. After, put your CSS code, who will be prioritary on the code before.

tomtomtom
  • 829
  • 1
  • 8
  • 20
  • since the style is dynamically added from a library,.. , so OP can't change that and must use !important in that case... – Bhojendra Rauniyar Feb 04 '15 at 10:56
  • I have no control over the created style="..." on the dynamic page, this is extjs that creates it :D – user1960836 Feb 04 '15 at 10:56
  • Why is it bad practice to use !important? Just curious – user1960836 Feb 04 '15 at 11:00
  • !important is a very specific selector. In case of two proprieties for an element, the browser applys the higher specific. But in case of the "!important", you lose this behavior and it's easy to put another important for bypass an important etc ... For more , there is a cool topic here : http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css – tomtomtom Feb 04 '15 at 13:56
1

inline-styles have greater specificity so with normally you can't override that. You need to use !important:

#panel-1026-body {
width: 400px !important;
}

And yes margin-left or background-color works as these are not defined in that inline-style.

Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231
1

Changing a complex component dimensions (panel, grid, tree, etc.) with CSS is generally not a good idea in Ext. The dimension you see in the DOM, in your case 1819px can also be set on some children of the panel depending on layout.

Thus, you would need to use css that addresses main container div plus all necessary children. Such solution is very vulnerable because the DOM structure can (and it does) change with Ext upgrades - sometimes even minor upgrades may introduce a change of DOM.

You should always set dimensions programmatically calling panel.setWidth(), panel.setHeight(), panel.setSize() or similar. Ext then takes care about itself and sets the width to all DOM elements it needs.

Saki
  • 5,827
  • 2
  • 15
  • 15
0

As all suggested in this topic, the solution was to add:

width: 400px !important;

This solved my problem. Gratitude to all that helped

user1960836
  • 1,732
  • 7
  • 27
  • 47