Inspiring

Answered

CSS Formatting Removes Spaces from calc(), Breaks CSS

Forum|Forum|6 years ago
June 16, 2019
5 replies
2216 views

Last months Dreamweaver updates introduced a problem with CSS formatting, they randomly remove spaces from calc(), then calc stops to work and a site could be broken. Any solution to this?

This topic has been closed for replies.

Correct answer WebProm

Today's DW update fixes the problem, thanks to all!

WebPromAuthorCorrect answer

Inspiring

Today's DW update fixes the problem, thanks to all!

Jon Fritz

Braniac

Wow, there's a happy coincidence.

WebPromAuthor

Inspiring

maybe your bug report helped good

pziecina

Braniac

Just out of interest, what happens if you include division, multiplication or nested calculations, (calculations in brackets). I ask because I use CS6 which whilst flaging as syntax error it leaves the code as written.

I'd hate to see what happens to the other css maths functions, (min(), max() and clamp() ).

Jon Fritz

Braniac

As far as I can see, it's just the + symbol that loses its leading space, and only in external css files.

I created a bug report on the uservoice forum here, if anyone wants to jump on it...

Apply Source Formatting Breaks calc() in CSS Files

WebPromAuthor

Inspiring

Here for example it happens with the + too. Adding () not helping. Minus is left intact.

.QID771 {

margin-top: -moz-calc(50vh - 50%+ 92px);

margin-top: -ms-calc(50vh - 50%+ 92px);

margin-top: -webkit-calc(50vh - 50%+ 92px);

margin-top: calc(50vh - 50%+ 92px);

}

Jon Fritz

Braniac

Looks like when the css is written into in external stylesheet, it removes the space before the + symbol only. When I rewrite your code with a few extra + in it...

.QID771 {

margin-top: -moz-calc(50vh - 50% + 92px);

margin-top: -ms-calc(50vh + 50% + 92px);

margin-top: -webkit-calc(50vh - 50% + 92px);

margin-top: calc(50vh + 50% + 92px);

}

...and apply source formatting to the .css file, it removes only the spaces before the + in the code. The spaces before the - symbols are untouched.

Make sure to start a new post, or add to an existing bug report, over at the uservoice link given above.

Jon Fritz

Braniac

I can confirm the bug in the version 19.1 Build 11240 of DW.

If the css is written into the <head> of an html page, Apply Source Formatting does't affect how the calc() function is written.

However, if the css is placed in an external stylesheet, Apply Source Formatting removes the spaces before the +.

Nancy OShea

Braniac

Show us an example please.

I have no trouble with calc functions. Are you certain the rest of your code is free of errors?

Nancy O'Shea— Product User, Community Expert & Moderator

WebPromAuthor

Inspiring

Yes, I'm certain.

This simple expression loses space inside calc before +

I had problems with + and - in some previous files too.

@media(min-width:1200px) {

.wrap {

max-width: 76em;

max-width: -webkit-calc(68.26em + 8vw);

max-width: calc(68.26em + 8vw);

padding-right: 4vw;

padding-left: 4vw;

}

Formatting issue. It never happened before last updates.

Nancy OShea

Braniac

I have the latest Dreamweaver and cannot reproduce the formatting problem at my end.

Try Restore Preferences.

Unusual behavior in Dreamweaver? Try restoring preferences.

Nancy O'Shea— Product User, Community Expert & Moderator

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded