turning off all inline css styles

[trooperbill]

we're having problems with achieving IE compatibility... some or our
panels are calling up unrelated content which i think is due to GWT's
use of inline css (style="width100%;height:100%;display:block") is
there any thing i can to to turn off GWT's implementation of all of
this as its driving me insane as it overrides my own CSS because its
inline :(

[walden]

trooperbill,

I'm not seeing how setting size and display properties inline is
inserting unwanted content into your application. Can you post
something so we can have a closer look?

Generally, the inline style stuff is there to keep the widget acting
like it's supposed to. Could be you need a different widget; maybe a
custom one. Depending on what you're trying to do, you have a couple
of options:

1. extend an existing widget. In this case, you will rewrite the
constructor and set only the inline styles you want.
2. it's always possible in application code to dig down to the dom
elements of the widget (getElement()), and then use the DOM utilities
to hack the underlying structure. This risks portability, but can be
the right way to go in some cases.

Walden

[obesga]

Well, sometimes I has the same problem.
For example, I was getting mad with a FlexTable where I was inserting
a lot of text and TextField's.

I did'nt want the Flextable to expand all the width of the container
wigdet, I wanted to adjust this size to the elements wihtin.

So here is what i've done

{

panel = new FlexTable();

DOM.setStyleAttribute(panel.getElement(), "height", "auto");
DOM.setStyleAttribute(panel.getElement(), "width", "auto");

}

It works !

Oskar

[Ian Bambury]

Hi Obesga,

 

FlexTables don't expand to the size of their container, at least, not in my experience. Do you have an example?

 

Ian

 

--------------------------------------------

[Ian Petersen]

It's been a while since I've looked at the docs on the CSS cascade,
but doesn't putting an !important tag in a referenced stylesheet raise
its specificity above that of inline styles? Might be the wrong tool,
even if it works.

Ian

--
Tired of pop-ups, security holes, and spyware?
Try Firefox: http://www.getfirefox.com

[Jason Essington]

If there is truly something inline that you need to override in css,
you could try using !important.

so something in your css like:

display: none !important;

might help if you are indeed needing to override inline styles.

-jason

[obesga]

The tricky part of GWT is you can define the layout of a component by
a lot of ways:
- Directly by CSS ( gwt-Flextable )
- By CSS on code ( setStyleName )
- With wigdet methods ( setWidth )
- With the style attribute ( style="width..." )
- By DOM on code ( DOM.setStyleAttribute(panel.getElement(), "width",
"auto"); )

sometimes it gets you mad, I know.

Use Firefox with Firebug to see what CSS and sytyles are finally
applied to a wigdet or element.

To expand it, I would use:

{

panel = new FlexTable();
pane.setSize("100%","100%")
DOM.setStyleAttribute(panel.getElement(), "height", "100%");
DOM.setStyleAttribute(panel.getElement(), "width", "100%");

}

If anyone uses a better way, please let us know... I see it very
redundant.

Oscar