Carousel is not working after update angular to 8.2.14

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
knowlative
Posts: 1
Joined: 20 May 2019, 23:51

10 Feb 2020, 16:21

Hello,
I've just updated the sapphire 8 template to angular v 8.2.14.

Here is my package.json:

Code: Select all

{
    "name": "sapphire",
    "version": "8.0.0",
    "license": "PrimeNG Commercial",
    "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
        "@angular/animations": "~8.2.14",
        "@angular/common": "~8.2.14",
        "@angular/compiler": "~8.2.14",
        "@angular/core": "~8.2.14",
        "@angular/forms": "~8.2.14",
        "@angular/platform-browser": "~8.2.14",
        "@angular/platform-browser-dynamic": "~8.2.14",
        "@angular/router": "~8.2.14",
        "@angular/cdk": "8.2.3",
        "@fullcalendar/core": "4.3.1",
        "@fullcalendar/daygrid": "4.3.0",
        "@fullcalendar/interaction": "4.3.0",
        "@fullcalendar/timegrid": "4.3.0",
        "chart.js": "2.9.3",
        "intl": "1.2.5",
        "primeflex": "1.0.0",
        "primeng": "8.1.4",
        "rxjs": "~6.4.0",
        "tslib": "^1.10.0",
        "zone.js": "~0.9.1",
        "web-animations-js": "github:angular/web-animations-js#release_pr208",
        "websocket-driver": "^0.7.3",
        "quill": "1.3.7"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "0.803.23",
        "@angular/cli": "8.3.23",
        "@angular/compiler-cli": "8.2.14",
        "@angular/language-service": "8.2.14",
        "@types/node": "8.9.5",
        "@types/jasmine": "3.3.13",
        "@types/jasminewd2": "2.0.3",
        "codelyzer": "5.1.0",
        "jasmine-core": "3.4.0",
        "jasmine-spec-reporter": "4.2.1",
        "karma": "4.1.0",
        "karma-chrome-launcher": "2.2.0",
        "karma-coverage-istanbul-reporter": "2.0.5",
        "karma-jasmine": "2.0.1",
        "karma-jasmine-html-reporter": "1.4.2",
        "protractor": "5.4.2",
        "ts-node": "7.0.1",
        "tslint": "5.17.0",
        "typescript": "~3.5.3"
    }
}
The elements of the theme seem to work, except for the carousel:
https://pasteboard.co/IU2Npjn.png

Please let me know if something is missing or wrong.
Thanks in advance for your help

Roberto

merve7
Posts: 861
Joined: 12 Sep 2017, 10:44

20 Feb 2020, 11:05

Hi,
Carousel component is updated with PrimeNG 8.1.0 (https://www.primefaces.org/primeng-8-1- ... -carousel/). Therefore, the carousel component's style is broken.
Firstly, I have to say that we will update and release Sapphire as soon as. But also, I added steps and the below style code for you can use until release;
1. delete .ui-carousel styles(line 507) in your _data.scss(src/assets/sass/theme/_data.scss)
2.add the below code in your stylesheet or _theme_styles.scss (src/assets/sass/overrides/_theme_styles.scss)

Code: Select all

body {
    .ui-carousel {
        .ui-carousel-content {
            .ui-carousel-prev,
            .ui-carousel-next {
                background-color: #ffffff;
                border: none;
                @include border-radius(50%);
                margin: .2em;
                color: $textColor;
                @include transition(color $transitionDuration);
                height: 2.5em;
                padding: 0;

                span {
                    color: $textColor;
                    font-size: 26px;
                    vertical-align: middle;
                }

                &:not(.ui-state-disabled) {
                    &:hover {
                        background-color: $hoverBgColor;
                        color: $hoverTextColor;
                        border-color: none;
                    }
                }
            }
        }

        .ui-carousel-dots-container {
            .ui-carousel-dot-item {
                > .ui-button {
                    border-color: #ffffff;
                    background-color: #ffffff;
                    @include shadow(none);
                    padding: 0;
                }

                .ui-carousel-dot-icon {
                    width: 20px;
                    height: 6px;
                    background-color: #b2c1cd;
                    margin: 0 .2em;

                    &::before {
                        content: ' ';
                    }
                }

                &.ui-state-highlight {
                    .ui-carousel-dot-icon {
                        background-color: $primaryColor;
                    }
                }
            }
        }
    }
}
Also, please check the new carousel component (http://primefaces.org/primeng/#/carousel) and you can add style code like demo page(source section).

Post Reply

Return to “Sapphire - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests