Not able to change border width

[jeremia.morling]

Hi!
I am very new to Ext GWT, so please have patience! :)
I am trying to change the border width (preferrably only on one side if possible).
I have a tree named menuTreePanel. I use the "border" attribute now to see what works:


menuTreePanel.setStyleAttribute( "border" , "20px dotted red" );


The border gets red and dotted alright, but the width does not change.
See attached screenshot.
Does anyone knows how to change the border width?

/ Jeremia

[gslender]

I've found that firebug is good to figure out what/which style is/isn't working

[jeremia.morling]

Thanks for the reply!!!
The tool is really great. There are so many styles for the just a single object!!

The border width seems to get overrided by a style called: element.style
Firebug tells me where the other styles comes from, but not where "element.style" comes from. Do you know where it comes from and how to make my styles come before "element style"?

Here are the styles (except the inherited ones):

element.style {
border-bottom-width:1px;
border-left-width-ltr-source:physical;
border-left-width-rtl-source:physical;
border-left-width-value:1px;
border-right-width-ltr-source:physical;
border-right-width-rtl-source:physical;
border-right-width-value:1px;
border-top-width:1px;
height:667px;
left:0;
position:absolute;
top:0;
width:218px;
}

.test {CarPoolB...ngApp.css (line 31)
border-color:green;
border-width:10px;
}

.my-tree {ext-all.css (line 1964)
cursor:default;
font-size:11px;
}

.x-border {ext-all.css (line 1019)
border:1px solid #99BBE8;
}

.x-unselectable, .x-unselectable * {ext-all.css (line 30)
-moz-user-select:none;
}

.test {CarPoolB...ngApp.css (line 31)
border-color:green;
border-width:10px;
}

html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {ext-all.css (line 9)
margin:0;
padding:0;
}

* {Resources.css (line 1)
font-family:arial,helvetica,tahoma,sans-serif;
}

* {ext-all.css (line 954)
margin:0;
padding:0;
}




Is there some way to make GWT use Firefox in hosted mode without having to compile everything? It takes so much time to compile...

/ Jeremia

[jeremia.morling]

I see.
The element.style is of course hard coded for widget in question and can therefore not be overrided...

What I want to do is to increase the indicated border-width in the attached screenshot (this time I will try to remember to actually attach the screenshot also ;))

Do you have any idea how I can do that?
/ Jeremia

[gslender]

try this


menuTreePanel.setStyleAttribute( "borderBottomWidth" , "20px dotted red" );

[jeremia.morling]

I tried with the following:


menuTreePanel.setStyleAttribute( "border", "10px dotted green" );
menuTreePanel.setStyleAttribute( "border-top-width", "10px" );
menuTreePanel.setStyleAttribute( "borderTopWidth", "10px" );
menuTreePanel.setStyleAttribute( "border-top-width-value", "10px" );
menuTreePanel.setStyleAttribute( "borderTopWidthValue", "10px" );
menuTreePanel.setStyleAttribute( "borderWidth", "10px" );
menuTreePanel.setStyleAttribute( "border-width", "10px" );



None of them works (except that the border becomes dotted and green).
The part about the top border in the element.style says:

border-top-color:green;border-top-style:dotted;
border-top-width:1px;



It seems like I am simply not able edit the border width.
What do you think?

[gslender]

try putting it in the onRender method of menuTreePanel