• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

CSS Formatting Removes Spaces from calc(), Breaks CSS

Explorer ,
Jun 16, 2019 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?

Views

1.3K

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
community guidelines

correct answers 1 Correct answer

Explorer , Jun 18, 2019 Jun 18, 2019

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

Votes

Translate

Translate
Community Expert ,
Jun 16, 2019 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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Explorer ,
Jun 16, 2019 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.

Votes

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
community guidelines
Community Expert ,
Jun 16, 2019 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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
LEGEND ,
Jun 16, 2019 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.

Votes

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
community guidelines
Explorer ,
Jun 16, 2019 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.

Votes

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
community guidelines
LEGEND ,
Jun 17, 2019 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.

Votes

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
community guidelines
Explorer ,
Jun 17, 2019 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.

Votes

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
community guidelines
LEGEND ,
Jun 17, 2019 Jun 17, 2019

Copy link to clipboard

Copied

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

https://dreamweaver.uservoice.com

Votes

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
community guidelines
Community Expert ,
Jun 17, 2019 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 +.

Votes

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
community guidelines
Explorer ,
Jun 17, 2019 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);

}

Votes

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
community guidelines
Community Expert ,
Jun 17, 2019 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. 

Votes

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
community guidelines
LEGEND ,
Jun 17, 2019 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() ).

Votes

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
community guidelines
Community Expert ,
Jun 17, 2019 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

Votes

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
community guidelines
Explorer ,
Jun 17, 2019 Jun 17, 2019

Copy link to clipboard

Copied

brackets seem not to affect this bug

Votes

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
community guidelines
Explorer ,
Jun 18, 2019 Jun 18, 2019

Copy link to clipboard

Copied

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

Votes

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
community guidelines
Community Expert ,
Jun 18, 2019 Jun 18, 2019

Copy link to clipboard

Copied

Wow, there's a happy coincidence.

Votes

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
community guidelines
Explorer ,
Jun 18, 2019 Jun 18, 2019

Copy link to clipboard

Copied

LATEST

maybe your bug report helped good

Votes

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
community guidelines