- Home
- Forum
- Angular - EJ 2
- Grid, Styling issues: Angular, TypeScript 3+, Material, JS2
Grid, Styling issues: Angular, TypeScript 3+, Material, JS2
Hi,
Im having some issues with the css of the Grid component. The grid is showing a popup of an "ok" or "ok& cancel" button when a grid contains the property:
[editSettings]='editSettings' //html
editSettings: object = { allowEditing: true }; //ts
Info:
-It's there, even though no selection has been made.(Grid is not in edit mode )
-It does not matter if there is a toolbar inside the grid or not, the weird buttons remain.
please check the attached zip file for examples(.png's).
Any idea what could be causing this? Or am i missing some file/code?
//Styles.css
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-angular-buttons/styles/material.css";
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.css';
@import "../node_modules/@syncfusion/ej2-angular-diagrams/styles/material.css";
@import "../node_modules/@syncfusion/ej2-angular-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-angular-inputs/styles/material.css";
//package.json
"@syncfusion/ej2-angular-base": "^16.3.32",
"@syncfusion/ej2-angular-buttons": "^16.3.30",
"@syncfusion/ej2-angular-diagrams": "^16.3.30",
"@syncfusion/ej2-angular-grids": "^16.3.30",
"@syncfusion/ej2-angular-inputs": "^16.3.30",
"@syncfusion/ej2-angular-lists": "^16.3.30",
"@syncfusion/ej2-angular-navigations": "^16.3.30",
"@syncfusion/ej2-angular-splitbuttons": "^16.3.30",
"syncfusion-javascript": "^16.3.30",
"ej-angular2": "^16.2.46", // needs this because of the old treeview
Attachment: zip_f8e0b075.zip
SIGN IN To post a reply.
5 Replies
MF
Mohammed Farook J
Syncfusion Team
November 21, 2018 06:12 AM UTC
Hi Laurens,
Thanks for contacting Syncfusion support.
From your given screenshot, we suspect you have enabled the editing in the Grid and this buttons are the popup of the edit confirmation dialog. So you need to refer the below popup css to your project to resolve this issue,
We must need to refer this css when we use Syncfusion popups control.
If you want all the EJ2 controls css in single reference, then please use this cdn to achieve this,
Otherwise, you need to refer all the EJ2 controls css separately for which you want to use in your project like below list,
If you still facing this same issue, please share your full Grid code for further assistance.
Regards,
J Mohammed Farook
LA
Laurens Albers
November 21, 2018 08:11 AM UTC
Thank you! I used your suggested:
<link rel='nofollow' rel='nofollow' href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet"/>
greetings,
Laurens
MF
Mohammed Farook J
Syncfusion Team
November 21, 2018 08:24 AM UTC
Hi Laurens,
Thanks for your update.
We are happy to hear that the provided solution has been resolved your problem.
Regards
J Mohammed Farook
Hi Laurens,Thanks for contacting Syncfusion support.From your given screenshot, we suspect you have enabled the editing in the Grid and this buttons are the popup of the edit confirmation dialog. So you need to refer the below popup css to your project to resolve this issue,
hi mohammed. i could not get the ui design even after adding these styles in the file. Is any other solution is provided??
Thanks in advance
Attachment: error_document_c31fe6e8.zip
SS
Seeni Sakthi Kumar Seeni Raj
Syncfusion Team
December 30, 2019 11:00 AM UTC
Hi Madhu,
Greetings from Syncfusion.
Query: i could not get the ui design even after adding these styles in the file. Is any other solution is provided??
We have validated your query and you can resolve the reported problem by using below way. By default, we can provide style reference by using either mentioning CDN link in html file or mentioning all the EJ2 controls CSS separately styles.css file(src/styles.css). Find the below code snippets and sample for you reference.
[index.html]
|
<head>
...
<link rel='nofollow' href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" /> //use rel=’stylesheet’ alone in link tag
</head> |
(Or) use you need to refer all the EJ2 controls CSS separately for which you want to use in your project like below list in styles.css file.
[src/styles.css]
|
/* You can add global styles to this file, and also import other style files */
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.css'; |
Help documentation: https://ej2.syncfusion.com/angular/documentation/grid/getting-started/?no-cache=1#adding-css-reference
Also, please ensure that the syncfusion packages are properly installed in your node_modules folder or not at your end.
Please get back to us if you need further assistance.
Regards,
Seeni Sakthi Kumar S
SIGN IN To post a reply.
- 5 Replies
- 4 Participants
-
LA Laurens Albers
- Nov 20, 2018 01:46 PM UTC
- Dec 30, 2019 11:00 AM UTC
