Element.style is overwriting my CSS style

General
1

I am using my CSS file to set the width and height for the component. If I call the component.setWidth() and component.setHeight() it is working fine but if I put these values in my CSS file and set this CSS file to my component it does not work.
Looking at Firebug, CSS elements, we figured that there there is an element called element.style and that is overriding my CSS values. How can I prevent this?

Also, I notice that even though, I have my own CSS file attached to the component but it still adds the style=“…” attribute to my component. Cant I just use class=“my.css” as an attribute, why is it adding style=“…” attribute. Can I prevent it?

Thanks
wG

2

The “element.style” thing in Firebug indicates that the styles are set with javascript instead of CSS - such styles will always override CSS styles.

Note that layouts may require that you set the sizes from Java, not CSS.

I’m not totally sure what you mean by “I have my own CSS file attached to the component”, but I hope you did application.setTheme() and component.setStyleName() in java and you’re trying to apply styles to that in your theme.

Vaadin will still force some stuff that is needed to make the “application like” layouting work, though.

It might help if you’d tell exactly what you’re trying to style, and which properties are getting overridden…

Best Regards,
Marc

3

Hi Marc,
Thanks for the response.

Here are the exact details as you asked.

I set the theme of my application as
this.setTheme(“mytheme”);

My style class in
styles.css
 in “mytheme” is following

.myStyle
{
width: 100px;
height: 100px;
}

CASE 1

  • I have Absolute layout as parent component
  • I have a Panel as as a child component (Say the name is P1)
  • I do P1.setStyleName(“myStyle”);

Result
This does not work

CASE 2

  • I have Absolute layout as parent component
  • I have a Panel as as a child component (Say the name is P1)
  • I do P1.setWidth(“100px”) and P1.setHeight(“100px”);

Result
This does work

And In the Firebug, I see the following

..

So obviously my width and height are overridden by the values of the style attribute and I have no clue from where are these width and height attributes got added into the style attribute.

I want to ensure that any CSS properties that are already present in myStyle should not be added in style attribute at all, otherwise what is the point of creating the myStyle as separate CSS for that component.
Please help.

thanks
wG

4

Please answer that thread. I think the UI creation process i probably broken by design at that point.

TIA

5

hallo,
is this still the way to set the sizes of components? I prefer to set sizes with css. Is this possible yet?

Greetz,
Michel

6

With CssLayout you can use CSS for most layout parameters.
With other standard layouts, only a limited subset of layout parameters can be changed with CSS.

7

You raised this query two years back.

i am not sure you got a solution. i am working on several addons and i want to eliminate the generation of “style” attribute that is dynamically added by Vaadin (GWT?). i am not able to locate the exact location where it is added.

Any idea how i need to proceed? (i am using 6.8 of vaadin.jar)

Jeyaraj

8

It is not possible to eliminate the styles added automatically by the client side, although we do try in Vaadin 7 to reduce the situations where rules are added by the client directly on elements. Apart from sizes, there are not very many such but there are some, especially for certain components. You can override such styles with “!important” in your CSS file, though, but you probably should not try try to tweak with sizes in CSS except inside a CssLayout - use the Java APIs elsewhere.

To know where each style attribute is added, one would need to know which attribute and for which component - and possibly in which context (layout). Different parts of the style might be added in different locations etc.

9

Thanks for the reply.

i will just add two lines explaining my need.

my project uses predefined html templates and composed of mostly <Divs.

i try using Vaadin to generte these divs. (i use the Dash layout that produces single div unlike the Vertical layout which produces multiple Dvis per layout.

I tried CustomLayout to use the predefined templates but no so successful and depndancy to template html (from Object oriented angle) is not so attractive.

if i have the ability to simply genete the div alone with Vaadin, it would be great i thought. All other Layout related things are controlled by CSS.

Thanks

10

If you have predefined html templates, surely it is better to use CustomLayout?

Other than that, the only other approach is to add the components to a CSSLayout.

Ultimately, the base starting point for Vaadin is to be a cross-platform (browser) application - and, up until recently, browsers differed so much in their layout engines that the only practical approach for laying out components was to calculate size using code.

I imagine this will diminish over time (by which I mean years, as there is backwards compatibility to maintain), but if you want to lay everything out using CSS, you’ll find yourself working against the framework most of the time.

So, to reiterate :
If you do have html templates, I think it probably is best to use a CustomLayout.
Other than that, add your components to a CSSLayout - Vaadin doesn’t touch the style attribute for elements inside it.

Cheers,

Charles.

11

Thanks for the replies.

i was able to remove the “style” attributes and now i have a GenericDiv that could accept any styleName.

All the layout decisions are from CSS fully. Luckily the code to add the “style” attribute was there in the ChildCell and VDashLayout classes.

Thanks all for this wonderful framework. Seem like anything is possible with Vaadin.

12

Java: component.setSizeUndefined();
This command remove “element.style”

13

Hi and sorry again for reviving a dead thread.

First of all: @Jesús X, that’s not true, or at least it’s not working in my case. If I do a
.setWidthUndefined()
 and then I set it in my css / scss, all I get is a "
width: auto
" inline style that overrides my css.

And now to my case:

I I’m trying to set a size using
calc(100% - 190px)
 in a component that’s inside a CssLayout, and there’s no way to do that due to those )$"&(!·($=%( inline styles overriding my css settings. The component is a TabSheet, and I read in this thread that it should work with a CssLayout (although I realize it’s 6 years old…).

If I add and !important in the style definition it also doesn’t work, as the inline style takes precedence.

Finally, I even tried doing it programatically with a
.setWidth(“calc(100% - 190px)”)
; it deserved a try because
the docs
 say “String presentation is similar to what is used in Cascading Style Sheets […]
See CSS specification for more details” and then a link to the CSS specs is provided. Unfortunately, as expected, this doesn’t work, giving a
java.lang.IllegalArgumentException: Invalid size argument: “calc(100% - 190px)” (should match ^(-?\d*(?:.\d+)?)(%|px|em|rem|ex|in|cm|mm|pt|pc)?$)
 error.

My purpose is to archieve a similar effect to the Vaadin QuickTickets Dashboard demo left menu, but I don’t want to mess with negative paddings and margins. Come on, guys – this is 2017, and css properties like calc() have been for enough years around that it should be fully supported without such hassle…


IMPORTANT EDIT: I looked at my code again and I forgot to remove a
.setWidthUndefined()
 which was preventing my
!important
 css definition for work. I can confirm it works this way. Anyway, I’m keeping my rants for your amusement and for trying to convince Vaadin team to admit calc as a valid parameter for
setWidth()
.