CODEWITHSUNDEEP
cssextjs
user1960836
user1960836

Reputation: 1782

Trying to change width on dynamic created panel, but not working

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

Upvotes: 0

Views: 249

Answers (4)

Saki
Saki

Reputation: 5856

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.

Upvotes: 1

user1960836
user1960836

Reputation: 1782

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

width: 400px !important;

This solved my problem. Gratitude to all that helped

Upvotes: 0

tomtomtom
tomtomtom

Reputation: 899

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.

Upvotes: 2

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

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.

Upvotes: 1

Related Questions