Skip to content

Datepicker with framework material-design does not open / icon doesnt show #15

@domaxistd

Description

@domaxistd

Hello!
im using your Package with the Versions:
"@zajsf/core": "^17.2.4"
"@zajsf/cssframework": "^17.2.4"
"@zajsf/material": "^17.2.4"

and with Angular and Material Version 17. I have a Problem with the date-time type and the material-design framework. As soon as i use the material-design framework, i can't open the datepicker and the icon to open it also doesn't show as seen in the following screenshot.

image

If i use no framework it works as it should.
As far as i understood, all the necessary imports should be there.

styles.scss
@import "node_modules/@zajsf/material/assets/material-design-themes.scss";

app.module.ts
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatNativeDateModule } from '@angular/material/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatIconModule } from '@angular/material/icon';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatToolbarModule } from '@angular/material/toolbar';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatAutocompleteModule } from "@angular/material/autocomplete";
import { MatChipsModule } from "@angular/material/chips";
import { MatButtonModule } from "@angular/material/button";
import { MatCheckboxModule } from "@angular/material/checkbox";
import { MatCardModule } from "@angular/material/card";
import { MatSlideToggleModule } from "@angular/material/slide-toggle";
import { MatRadioModule } from "@angular/material/radio";
import { MatProgressBarModule } from "@angular/material/progress-bar";
import { MatTableModule } from "@angular/material/table";
import { MatSelectModule } from "@angular/material/select";
import { MatInputModule } from "@angular/material/input";
import { MatSnackBarModule } from "@angular/material/snack-bar";
import { MatTooltipModule } from "@angular/material/tooltip";
import { MatDialogModule, MatDialogRef } from "@angular/material/dialog";
import { MatMenuModule } from "@angular/material/menu";
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
import { JsonSchemaFormModule } from "@zajsf/core";
import { MaterialDesignFrameworkModule } from "@zajsf/material";
import { CommonModule } from "@angular/common";

The schema looks like this:

image

I also can't see any errors or anything like that.

Is there anything i forgot to do or is it a known bug? I haven't found anything on it.
Thanks for your help!

  • OS: Ubuntu 22.04, Windows 11
  • Browser: Chrome, Edge

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions