Known Participant

Answered

CSS Grid and DW

55 replies
16139 views
Translate

Hey All, I am trying to use CSS Grid in DW and I am getting errors plus it isn't rendering properly in the Live View for some reason. If I just open the html in the browser it works so the code is ok. Is there something I am needing to turn on?

This topic is closed to new replies. Start a new post to keep the conversation going.

BenPleysierCorrect answer

Community Expert

1. You did not stipulate what errors you are getting, so cannot answer this.

2. Not only DW's Live view, but also IE, Edge an Opera Mini will not render CSS Grid. The only thing you can do to fix this is to provide a backup for the non-compliant browsers (incl DW Live view)

This is easily done by using Flex first and overriding the instructions using Grid similar to:

#contact.content {
  display: flex;
  flex-flow: row wrap;
  display: grid;
  grid-template-columns: 100%;
  grid-template-areas:
    "main-area"
    "right-sidebar";
  >.col-main {
    flex: 1 100%;
    grid-area: main-area;
  }
  >.col-right {
    flex: 1 100%;
    grid-area: right-sidebar;
  }
  @include media-breakpoint-up(sm) {
    grid-template-columns: 50% 50%;
    grid-template-areas:
      "main-area right-sidebar";
    >.col-main {
      flex: 1 0;
    }
    >.col-right {
      flex: 1 0;
    }
  }
}

display: flex; followed by display: grid;

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

john stephanitesAuthor

Known Participant

I personally think DW is about to be EOL'ed. To me unless they add a terminal it is really useless.

Translate

B i r n o u

Legend

I'm just curious, why integrating a terminal in within DW, what will be the advantage compare to just have a shortcut that launch the terminal present in the computer... personnaly I prefer powershell... any way... so what the goal... as I said just curious !

Translate

john stephanitesAuthor

Known Participant

DW was my first editor I used but now I use Visual Studio Code, after trying a ton of them, and it has an integrated terminal. It’s nice to have for finding bugs, not switching back and forth when you need a terminal. Live Reload in different browsers since that doesn’t work very well in DW, git commands, although VSC has awesome Git integration. Creating pregenerated files and other things.

Translate

Niharika Jha

Adobe Employee

Hi,

Thank You for your inputs. We have started supporting Code Hints for CSS grid layout but the Live View still not shows the correct rendering because the CEF version that supports CSS GRid layout as in Chrome is an earlier one. Although, we have added this issue in our backlog and will take it up in the next releases.

Regards,

Niharika Gupta

Adobe Dreamweaver

Translate

P

patgov

Participant

I can't use Dreamweaver until it supports Flexbox and CSS Grid Layout. All the major browsers are now supporting these standards, especially Firefox.

Translate

O

osgood_

Legend

patgov wrote
I can't use Dreamweaver until it supports Flexbox and CSS Grid Layout. All the major browsers are now supporting these standards, especially Firefox.

You could write your own code? I agree that given DW is a premium product which barks on about how a subscription model will be more effective at rolling out updates to take advantage of todays modern workflow but it fails miserably. Make no mistake a subscription model is about making money for the company, not keeping you up-to-date. It doesnt even have the latest version of Bootstrap so anyone using the default Bootstrap version in DW youre sadly being ripped off, in my opinion, and not least insulted.

Is that harsh, I don't think so but if you disagree I want to hear your opinions.

Translate

BenPleysier

Correct answer

Community Expert

1. You did not stipulate what errors you are getting, so cannot answer this.

2. Not only DW's Live view, but also IE, Edge an Opera Mini will not render CSS Grid. The only thing you can do to fix this is to provide a backup for the non-compliant browsers (incl DW Live view)

This is easily done by using Flex first and overriding the instructions using Grid similar to:

#contact.content {
  display: flex;
  flex-flow: row wrap;
  display: grid;
  grid-template-columns: 100%;
  grid-template-areas:
    "main-area"
    "right-sidebar";
  >.col-main {
    flex: 1 100%;
    grid-area: main-area;
  }
  >.col-right {
    flex: 1 100%;
    grid-area: right-sidebar;
  }
  @include media-breakpoint-up(sm) {
    grid-template-columns: 50% 50%;
    grid-template-areas:
      "main-area right-sidebar";
    >.col-main {
      flex: 1 0;
    }
    >.col-right {
      flex: 1 0;
    }
  }
}

display: flex; followed by display: grid;

Translate

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

john stephanitesAuthor

Known Participant

Yea I realized that after while. I think all the browsers, if updated now support Grid except something like Dreamweaver.

Translate

pziecina

Legend

The Brackets code editor now has some support for css grid layouts, so if the Dw roadmap from a few years ago is followed the next version of Dw should also hopefully include code hints and completion, (due end October, approx).

The Brackets code editor gets a few things wrong, just as it did for flexbox, but these are not fatal errors.

Translate

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.