Sidebar primeblock is not working properly [Primeblocks 3.1] [Angular 14.0.6]

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
omexwolf
Posts: 1
Joined: 17 Jul 2022, 15:00

18 Jul 2022, 12:22

Hello,

So I've recently bought PrimeBlocks licence and I have a problem with Grouped Menu Sidebar Component.

First of all the notification badge looks strangely big and also cropped, like this:
Image

Second of all on the tablet mode [hideOnOutsideClick] doesn't seem to be working and once the sidebar is shown it can't be hidden on the outside click.
I'm using angular 14.0.6

Please let me know if You need more to reproduce this issue or if You have any information about how i can fix it.

I'm providing my code below:

app.component.html

Code: Select all

<div class="min-h-screen flex surface-ground">
  <div
    id="app-sidebar-1"
    class="surface-section h-screen hidden lg:block flex-shrink-0 fixed lg:sticky left-0 top-0 z-1 border-right-1 surface-border select-none"
    style="width: 280px"
  >
    <div class="flex flex-column h-full">
      <div
        class="flex align-items-center px-5 flex-shrink-0"
        style="height: 60px"
      >
        <img
          src="assets/images/blocks/logos/hyper-700.svg"
          alt="Image"
          height="30"
        />
      </div>
      <div class="overflow-y-auto">
        <ul class="list-none p-3 m-0">
          <li>
            <div
              pRipple
              class="p-3 flex align-items-center justify-content-between text-600 cursor-pointer"
              pStyleClass="@next"
              enterClass="hidden"
              enterActiveClass="slidedown"
              leaveToClass="hidden"
              leaveActiveClass="slideup"
            >
              <span class="font-medium">FAVORITES</span>
              <i class="pi pi-chevron-down"></i>
            </div>
            <ul class="list-none p-0 m-0 overflow-hidden">
              <li>
                <a
                  pRipple
                  class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors"
                >
                  <i class="pi pi-home mr-2"></i>
                  <span class="font-medium">Dashboard</span>
                </a>
              </li>
              <li>
                <a
                  pRipple
                  class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors"
                >
                  <i class="pi pi-bookmark mr-2"></i>
                  <span class="font-medium">Bookmarks</span>
                </a>
              </li>
              <li>
                <a
                  pRipple
                  class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors"
                  pStyleClass="@next"
                  enterClass="hidden"
                  enterActiveClass="slidedown"
                  leaveToClass="hidden"
                  leaveActiveClass="slideup"
                >
                  <i class="pi pi-chart-line mr-2"></i>
                  <span class="font-medium">Reports</span>
                  <i class="pi pi-chevron-down ml-auto"></i>
                </a>
                <ul
                  class="list-none py-0 pl-3 pr-0 m-0 hidden overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out"
                >
                  <li>
                    <a
                      pRipple
                      class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors"
                      pStyleClass="@next"
                      enterClass="hidden"
                      enterActiveClass="slidedown"
                      leaveToClass="hidden"
                      leaveActiveClass="slideup"
                    >
                      <i class="pi pi-chart-line mr-2"></i>
                      <span class="font-medium">Revenue</span>
                      <i class="pi pi-chevron-down ml-auto"></i>
                    </a>
                    <ul
                      class="list-none py-0 pl-3 pr-0 m-0 hidden overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out"
                    >
                      <li>
                        <a
                          pRipple
                          class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors"
                        >
                          <i class="pi pi-table mr-2"></i>
                          <span class="font-medium">View</span>
                        </a>
                      </li>
                      <li>
                        <a
                          pRipple
                          class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors"
                        >
                          <i class="pi pi-search mr-2"></i>
                          <span class="font-medium">Search</span>
                        </a>
                      </li>
                    </ul>
                  </li>
                  <li>
                    <a
                      pRipple
                      class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors"
                    >
                      <i class="pi pi-chart-line mr-2"></i>
                      <span class="font-medium">Expenses</span>
                    </a>
                  </li>
                </ul>
              </li>
              <li>
                <a
                  pRipple
                  class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors"
                >
                  <i class="pi pi-users mr-2"></i>
                  <span class="font-medium">Team</span>
                </a>
              </li>
              <li>
                <a
                  pRipple
                  class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors"
                >
                  <i class="pi pi-comments mr-2"></i>
                  <span class="font-medium">Messages</span>
                  <span
                    class="inline-flex align-items-center justify-content-center ml-auto bg-blue-500 text-0 border-circle"
                    style="min-width: 1.5rem; height: 1.5rem"
                    >3</span
                  >
                </a>
              </li>
              <li>
                <a
                  pRipple
                  class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors"
                >
                  <i class="pi pi-calendar mr-2"></i>
                  <span class="font-medium">Calendar</span>
                </a>
              </li>
              <li>
                <a
                  pRipple
                  class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors"
                >
                  <i class="pi pi-cog mr-2"></i>
                  <span class="font-medium">Settings</span>
                </a>
              </li>
            </ul>
          </li>
        </ul>
        <ul class="list-none p-3 m-0">
          <li>
            <div
              pRipple
              class="p-3 flex align-items-center justify-content-between text-600 cursor-pointer"
              pStyleClass="@next"
              enterClass="hidden"
              enterActiveClass="slidedown"
              leaveToClass="hidden"
              leaveActiveClass="slideup"
            >
              <span class="font-medium">APPLICATION</span>
              <i class="pi pi-chevron-down"></i>
            </div>
            <ul class="list-none p-0 m-0 overflow-hidden">
              <li>
                <a
                  pRipple
                  class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors"
                >
                  <i class="pi pi-folder mr-2"></i>
                  <span class="font-medium">Projects</span>
                </a>
              </li>
              <li>
                <a
                  pRipple
                  class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors"
                >
                  <i class="pi pi-chart-bar mr-2"></i>
                  <span class="font-medium">Performance</span>
                </a>
              </li>
              <li>
                <a
                  pRipple
                  class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors"
                >
                  <i class="pi pi-cog mr-2"></i>
                  <span class="font-medium">Settings</span>
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="mt-auto">
        <hr class="mb-3 mx-3 border-top-1 border-none surface-border" />
        <a
          pRipple
          class="m-3 flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors"
        >
          <img
            src="assets/images/blocks/avatars/circle/avatar-f-1.png"
            class="mr-2"
            style="width: 28px; height: 28px"
          />
          <span class="font-medium">Amy Elsner</span>
        </a>
      </div>
    </div>
  </div>
  <div class="min-h-screen flex flex-column relative flex-auto">
    <div
      class="flex justify-content-between align-items-center px-5 surface-0 border-bottom-1 surface-border relative lg:static"
      style="height: 60px"
    >
      <div class="flex">
        <a
          pRipple
          class="cursor-pointer block lg:hidden text-700 mr-3"
          pStyleClass="#app-sidebar-1"
          enterClass="hidden"
          enterActiveClass="fadeinleft"
          leaveToClass="hidden"
          leaveActiveClass="fadeoutleft"
          [hideOnOutsideClick]="true"
        >
          <i class="pi pi-bars text-4xl"></i>
        </a>
        <span class="p-input-icon-left">
          <i class="pi pi-search"></i>
          <input
            type="text"
            pInputText
            class="border-none w-10rem sm:w-20rem"
            placeholder="Search"
          />
        </span>
      </div>
      <a
        pRipple
        class="cursor-pointer block lg:hidden text-700"
        pStyleClass="@next"
        enterClass="hidden"
        enterActiveClass="fadein"
        leaveToClass="hidden"
        leaveActiveClass="fadeout"
        [hideOnOutsideClick]="true"
      >
        <i class="pi pi-ellipsis-v text-2xl"></i>
      </a>
      <ul
        class="list-none p-0 m-0 hidden lg:flex lg:align-items-center select-none lg:flex-row surface-section border-1 lg:border-none surface-border right-0 top-100 z-1 shadow-2 lg:shadow-none absolute lg:static"
      >
        <li>
          <a
            pRipple
            class="flex p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-duration-150 transition-colors"
          >
            <i class="pi pi-inbox text-base lg:text-2xl mr-2 lg:mr-0"></i>
            <span class="block lg:hidden font-medium">Inbox</span>
          </a>
        </li>
        <li>
          <a
            pRipple
            class="flex p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-duration-150 transition-colors"
          >
            <i
              class="pi pi-bell text-base lg:text-2xl mr-2 lg:mr-0"
              pBadge
              severity="danger"
            ></i>
            <span class="block lg:hidden font-medium">Notifications</span>
          </a>
        </li>
        <li class="border-top-1 surface-border lg:border-top-none">
          <a
            pRipple
            class="flex p-3 lg:px-3 lg:py-2 align-items-center hover:surface-100 font-medium border-round cursor-pointer transition-duration-150 transition-colors"
          >
            <img
              src="assets/images/blocks/avatars/circle/avatar-f-1.png"
              class="mr-3 lg:mr-0"
              style="width: 32px; height: 32px"
            />
            <div class="block lg:hidden">
              <div class="text-900 font-medium">Josephine Lillard</div>
              <span class="text-600 font-medium text-sm"
                >Marketing Specialist</span
              >
            </div>
          </a>
        </li>
      </ul>
    </div>
    <div class="p-5 flex flex-column flex-auto">
      <div
        class="border-2 border-dashed surface-border border-round surface-section flex-auto"
      ></div>
    </div>
  </div>
</div>
app.module.ts

Code: Select all

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

import { InputTextModule } from 'primeng/inputtext';
import { BadgeModule } from 'primeng/badge';
import { RippleModule } from 'primeng/ripple';
import { StyleClassModule } from 'primeng/styleclass';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    CommonModule,
    InputTextModule,
    BadgeModule,
    RippleModule,
    StyleClassModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}
package.json

Code: Select all

{
  "name": "test-blocks-2",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^14.0.0",
    "@angular/common": "^14.0.0",
    "@angular/compiler": "^14.0.0",
    "@angular/core": "^14.0.0",
    "@angular/forms": "^14.0.0",
    "@angular/platform-browser": "^14.0.0",
    "@angular/platform-browser-dynamic": "^14.0.0",
    "@angular/router": "^14.0.0",
    "primeflex": "^3.2.1",
    "primeicons": "^5.0.0",
    "primeng": "^14.0.0-rc.1",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.0.6",
    "@angular/cli": "~14.0.6",
    "@angular/compiler-cli": "^14.0.0",
    "@types/jasmine": "~4.0.0",
    "jasmine-core": "~4.1.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.7.2"
  }
}
styles.scss

Code: Select all

/* You can add global styles to this file, and also import other style files */



body {
    font-family: var(--font-family);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


@import "primeng/resources/primeng.min.css";
@import "primeng/resources/themes/saga-blue/theme.css";
@import "primeflex/primeflex.css";
@import "primeicons/primeicons.css"
Top
mahy
Posts: 1
Joined: 27 Apr 2022, 10:49

08 Aug 2022, 16:54

Same Issue here - we've also purchased the comercial license.

Towards your issue with the notification dot: Try to specify your own size of the marker by setting

Code: Select all

.p-badge {
  min-width: 0.5rem;
  height: 0.5rem;
}
inside your src/styles.css (or where ever you specify your general css).

It seems that the same issue with the stuck open menu is reported several times: but the devs of primefaces / primeblocks simply don't seem to care which is a real bad example for customer support for a paid product.

Regards
Top
cetincakiroglu
Posts: 130
Joined: 17 Dec 2021, 09:33

12 Aug 2022, 16:37

Hi,

Problem is caused by your modification in classes of the first two divs.

Here you can directly copy and paste the code below to the first 2 opening divs.

Code: Select all

<div class="min-h-screen flex relative lg:static surface-ground">
    <div id="app-sidebar-1" class="surface-section h-screen hidden lg:block flex-shrink-0 absolute lg:sticky left-0 top-0 z-2 border-right-1 surface-border select-none" style="width:280px">
When it comes to your problem with badge. I can't replicate it in anywhere, could you please share your angular.json?
Top
abdulali
Posts: 1
Joined: 01 Mar 2023, 18:03

08 Mar 2023, 20:52

Hello
I have the same issue with

Code: Select all

hideOnOutsideClick="true"

app-sidebar-4

Code: Select all

<div class="min-h-screen flex surface-ground">
    <div id="app-sidebar-4" class="bg-gray-900 h-screen hidden lg:block flex-shrink-0 fixed lg:sticky left-0 top-0 z-1 border-right-1 border-gray-800 w-18rem lg:w-5rem select-none">
        <div class="flex flex-column h-full">
            <div class="flex align-items-center justify-content-center flex-shrink-0 bg-indigo-500" style="height:60px">
                <img src="assets/images/blocks/logos/hyper-light.svg" alt="Image" height="30">
            </div>
            <div class="mt-3 select-none">
I solved the badge problem by reordering my imports in
style.scss

Code: Select all

@import "primeng/resources/themes/lara-light-blue/theme.css";
@import "primeng/resources/primeng.min.css";
@import "primeflex/primeflex.css";
@import "primeicons/primeicons.css";
@import "primeicons/primeicons.css";

html {
  font-size: 1rem ;
  height: 100%;
}

body {
  font-family: var(--font-family);
  background-color: var(--surface-ground);
  color: var(--text-color);
  padding: 0;
  margin: 0;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
Top
atompower
Posts: 1
Joined: 29 May 2020, 17:54

10 May 2023, 20:07

Our company has the same issue with Narrow Sidebar with Titles

Sidebar does not collapse with a click outside
Top
Post Reply

Return to “PrimeBlocks for PrimeNG”

  • Information

  • Who is online

    Users browsing this forum: No registered users and 1 guest