The New Way to Build with AI! Introducing ReUI — the developer platform for agentic UI with shadcn/ui
Browse ReUI Pro
Light
Dark
System
Ask  Question

Assistance Needed for Invoice Integration and Styling in Metronic Angular


Dear Metronic Support,

I am integrating the invoice creation feature from the Metronic HTML template into the Metronic Angular template. Specifically, I aim to replicate the functionality for line item amount and total amount calculations, as demonstrated in the HTML template. Could you guide me on how to achieve this?

Additionally, I encountered an issue with the datepicker. I tried both the native HTML datepicker and the ngbDatepicker, but neither is styled like the datepicker in your HTML online demo. Could you provide recommendations for styling it consistently?

Lastly, I noticed that the main app dev wrapper in the Angular template appears larger than in the HTML demo. How can I adjust its size to match the HTML version?

Thank you for your support.

Best regards,
Abdelmuniem


A
Abdelmuniem Mohamed 1 year ago
Angular Bootstrap HTML
1 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)

 
Deleted comment
 
Deleted comment
 
Deleted comment
user
Faizal Author 1 year ago

Hi Abdelmuniem,

Could you please share a screenshot of the component you’re referring to?

For the datepicker, have you imported the original styles from the plugin into the angular.json styles section? This might resolve the styling.

To update the app dev wrapper size, open the file:

/src/app/_metronic/layout/core/configs/dark-sidebar.config.ts

Find and replace all occurrences of "fluid" with "fixed".

Let us know if you need further assistance!

Thanks


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Metronic

Go to Metronic Downloads License Guide & FAQ Purchase Metronic Refunds
buy metronic keenthemes mega bundle

ReUI

Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.

ReUI by Keenthemes React Components UI Blocks React Templates ReUI Documentation