Highlighted

CSS Formatting Removes Spaces from calc(), Breaks CSS

Explorer ,
Jun 16, 2019

Copy link to clipboard

Copied

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?

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

Views

690

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

CSS Formatting Removes Spaces from calc(), Breaks CSS

Explorer ,
Jun 16, 2019

Copy link to clipboard

Copied

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?

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

Views

691

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 16, 2019 0
Adobe Community Professional ,
Jun 16, 2019

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 16, 2019 0
Explorer ,
Jun 16, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 16, 2019 0
Adobe Community Professional ,
Jun 16, 2019

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 16, 2019 1
LEGEND ,
Jun 16, 2019

Copy link to clipboard

Copied

If you are talking about just the -webkit- calc() function, then there should not be spaces between the value and operator.

If it is both the prefixed and final (none prefixed) without spaces then try removing the prefixed version, to see if the fault still exists. If it does not then it may be a bug, that is caused by using the prefixed version with spaces.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 16, 2019 1
Explorer ,
Jun 16, 2019

Copy link to clipboard

Copied

Both become without space before +, when I'm formatting.

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

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

Same if I'm removing -webkit line or not.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 16, 2019 1
LEGEND ,
Jun 17, 2019

Copy link to clipboard

Copied

WebProm  wrote

Both become without space before +, when I'm formatting.

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

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

Same if I'm removing -webkit line or not.

Both those calc() functions would fail, as they should be -

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

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

(webkit no spaces, final with spaces)

I don't know if Nancys suggestion will work, but it is worth trying.

If it does not work then all I can suggest is filing a bug report.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 17, 2019 0
Explorer ,
Jun 17, 2019

Copy link to clipboard

Copied

I'll try preferences refresh, don't want to loose my preferences right now.

Where to fill in the bug report?

thanks.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 17, 2019 0
LEGEND ,
Jun 17, 2019

Copy link to clipboard

Copied

The Dw user voice, (bug link on r/h side) is at -

https://dreamweaver.uservoice.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 17, 2019 1
Adobe Community Professional ,
Jun 17, 2019

Copy link to clipboard

Copied

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 +.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 17, 2019 1
Explorer ,
Jun 17, 2019

Copy link to clipboard

Copied

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);

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 17, 2019 0
Adobe Community Professional ,
Jun 17, 2019

Copy link to clipboard

Copied

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. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 17, 2019 1
LEGEND ,
Jun 17, 2019

Copy link to clipboard

Copied

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() ).

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 17, 2019 0
Adobe Community Professional ,
Jun 17, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 17, 2019 2
Explorer ,
Jun 17, 2019

Copy link to clipboard

Copied

brackets seem not to affect this bug

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 17, 2019 1
Explorer ,
Jun 18, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 18, 2019 0
Adobe Community Professional ,
Jun 18, 2019

Copy link to clipboard

Copied

Wow, there's a happy coincidence.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 18, 2019 0
WebProm LATEST
Explorer ,
Jun 18, 2019

Copy link to clipboard

Copied

maybe your bug report helped good

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 18, 2019 0