GWT CssResource not propagating width:calc(x) property

[Wayne Rasmuss]

I have the following css entry that I'm accessing via a CSS resource

.form-input-line-cell {

    position: absolute;

    left: 8px;

    top:3px;

    bottom: 3px;

    font-size: 32px;

    text-indent: 8px;

    border: solid #d3d3d3 1px;

    border-radius: 3px;

    color: black;

    width: -webkit-calc(100% -16px);

    width: calc(100% - 16px);

}

When I view a field using it in the dev tools in firefox, the width properties with calc are not present. I've verified that other changes I make are propagating as expected, so the build is working and I'm looking in the right place. Any ideas?

I 

[Deanna Bonds]

Try wrapping the calc() in a literal("calc(100% - 16px)" ) ;

the literal() works for anything the cssresource parser doesn't know about yet.

[Pavel Zlámal]

Hi,

firefox doesn't support standard calc yet - this works for me:

width: -moz-calc(100% -16px);

Pavel

Dne pátek, 9. srpna 2013 19:13:33 UTC+2 Wayne Rasmuss napsal(a):

[Wayne Rasmuss]

Thanks! Using literal fixed it. It turned out I didn't need the special web kit value either. This seems to work in IE 10, Firefox, and Chrome (latest or very recent updates of each)

[Wayne Rasmuss]

For anyone who cares the final css looks like this:

I'm actually thinking of trying position relative and using the same calc method for the height as well.

.form-input-line-cell {

    position: absolute;

    left: 8px;

    top:3px;

    bottom: 3px;

    font-size: 32px;

    text-indent: 8px;

    border: solid #d3d3d3 1px;

    border-radius: 3px;

    color: black;

    width: literal("calc(100% - 16px)");

[Stefan Falk]

Unfortunately GWT 2.8.0 still does not support that feature. Had to use literal("") as well here.

[Jens]

Unfortunately GWT 2.8.0 still does not support that feature. Had to use literal("") as well here.

You are still using Css right? According to https://github.com/google/closure-stylesheets/issues/59 closure stylesheet should support  and thus GWT GSS should support it.

-- J.

[Gilberto]

Stefan, convert all your CSS files and <ui:style> declarations to GSS and save yourself from going crazy. With GSS you can use all the CSS (and CSS3!) goodies without pain (including media queries, CSS functions and so on).

Take a look at http://www.gwtproject.org/articles/gss_migration.html and http://www.gwtproject.org/doc/latest/DevGuideGssVsCss.html for hints on how to do the migration.

[Stefan Falk]

Oh!

Thanks Jens and Gilberto! I'm definitely going to check that out!

[Nagarajan S]

After migrating to gss, are you able to calc() without literals ?