View Issue Details

IDProjectCategoryView StatusLast Update
0006983module Visual CMSmodule Visual CMS - subpublic2020-06-25 13:50
Reportermkirchhoefer Assigned To 
PriorityhighSeveritymajorReproducibilityalways
Status acknowledgedResolutionopen 
Product Version3.3.1 
Summary0006983: VCMS uses deprecated Bootstrap3 classes in Wave-Theme
DescriptionVCMS still uses Bootstrap3 classes while the new Wave-Theme is active, though Wave is running with Bootstrap4.

This is quite a huge drawback in terms of VCMS-Responsive-Design, since e.q. col-xs-12 doesn't exist in Bootstrap4 and sm, md has new defined width-ranges.
TagsWave
Attached Files

Relationships

has duplicate 0007140 closedbenjamin.joerger Missing support for Bootstrap 4 

Activities

QA

2019-05-23 09:35

administrator   ~0012896

Last edited: 2019-05-23 09:42

As a workaround its possible to activate "Use custom grid" in the Visual CMS module "Frond end" settings. The column prefix could be "col-sm-" and the offset prefix "offset-sm-". After that you may need to add classes for different devices in the widget settings in the tab "Layout settings". Like col-12 for mobile devices.

KIRATIKdevs

2020-05-21 12:08

reporter   ~0013235

Last edited: 2020-05-21 14:33

The workaround does not solve the whole problem. I found a situation when I cannot use different numbers of columns for mobile and desktop screen resolution because when I set columns via drag and drop editor (e.g. 6 cols) I cannot add settings for different screen resolution (classes added in widget settings were added inside the widget, not in root widget selector). See attached pictures for details.

Additionally cannot set odd number of columns for widget (allowed: 2,4,6,8,10,12).

vcms01.png (9,636 bytes)   
vcms01.png (9,636 bytes)   
vcms02.png (15,807 bytes)   
vcms02.png (15,807 bytes)   
vcms03.png (20,932 bytes)   
vcms03.png (20,932 bytes)   
vcms_settings.png (27,244 bytes)   
vcms_settings.png (27,244 bytes)   

KIRATIKdevs

2020-06-25 12:10

reporter   ~0013259

Last edited: 2020-06-25 13:50

We found some pretty nice workaround for this issue.
We created custom .scss file which creates columns and offsets classes with bootstrap 3 names, then set these classes to extend just col-* or offset-*.
Here is example of our bootstrap3_support.scss file:

$breakpoints: "xs", "sm", "md", "lg";

@each $breakpoint in $breakpoints {
  /*
  * creating classes with bs3 col names e.g.
  * col-xs-12 and extending here just bs4 col-12
  */
  @for $i from 1 through 12 {
    .col-#{$breakpoint}-#{$i} {
      @if ($breakpoint == "xs") {
        @extend .col-#{$i};
      } @else {
        @extend .col-#{$breakpoint}-#{$i};
      }
    }
  }
  /*
  * creating offset classes with bs3 offset name e.g.
  * col-xs-offset-4 and extending here just bs4 offset-4
  */
  @for $i from 1 through 11 {
    .col-#{$breakpoint}-offset-#{$i} {
        @if($breakpoint == "xs") {
          @extend .offset-#{$i};
        } @else {
          @extend .offset-#{$breakpoint}-#{$i};
        }
    }
  }
}
Then you have to make sure that in visual CMS module settings "use custom grid layout" is DISABLED, and additionally option "Deactivate Bootstrap import via this module" is disabled too.
With these changes now you can use VisualCms normally and columns and offsets are set properly :)