Problem with layout in Metronic Angular - Version 8.1.4

Hello, we're working on Metronic 8.1.4, we previously worked on another project using 8.1.0 and we're noticing some differences when it comes to the layout that makes things hard for us to implement elements such as cards.

-We're using Demo1
-We created a new page, following Metronic's Documentation to do so in Angular.
-When we try to start working on the page's html file. everything occupies less space on the screen that it should, here's a pic and the code for referrence:

Whats-App-Image-2022-10-04-at-3-32-50-PM

<div class="card mb-10">
<div class="card-body d-flex align-items-center py-8">

<form id="kt_ecommerce_settings_general_form" class="form" >
<!--begin::Row-->
<div class="row row-cols-1 row-cols-sm-1 rol-cols-md-1 row-cols-lg-1">
<!--begin::Col-->
<div class="col">
<!--begin::Input group-->
<div class="fv-row mb-7">
<!--begin::Label-->
<label class="fs-6 fw-semibold form-label mt-3">
<span class="required">Nombre</span>
<i class="bi bi-info-circle-fill ms-1 fs-7" data-bs-toggle="tooltip"
title="Enter the contact's email."></i>
</label>
<!--end::Label-->
<!--begin::Input-->
<input formControlName="name"
class="form-control form-control-solid" />
<!--end::Input-->
</div>
<!--end::Input group-->
<!--begin: : if de Error
<div *ngIf="formAdd.get('name')?.touched && formAdd.get('name')?.errors?.['required'] || submitted && formAdd.controls.name.errors "
class="alert alert-danger">Este campo es requerido </div>
<div *ngIf="formAdd.get('name')?.touched && formAdd.get('name')?.errors?.['minlength']"
class="alert alert-danger">Es requerido minimo 3 caracteres</div>-->
</div>
<!--end::Col-->

</div>
<!--end::Row-->

<!--begin::Action buttons-->
<div class="d-flex justify-content-end">
<!--begin::Button-->
<button type="reset" data-kt-contacts-type="cancel" class="btn btn-light me-3">Cancelar</button>
<!--end::Button-->
<!--begin::Button-->
<button type="submit" data-kt-contacts-type="submit" class="btn btn-primary">
<span class="indicator-label">Guardar</span>
<span class="indicator-progress">Espere...
<span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
</button>
<!--end::Button-->
</div>
<!--end::Action buttons-->
</form>
</div>

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)

Hi,

Not sure why do you need card here, just use standard bootstrap row/col and it will fit perfect then.
You can check HTML markup with the page https://preview.keenthemes.com/metronic8/angular/demo1/crafted/pages/profile/overview (it also uses card).
Try to clear your localStorage also.

Regards,
Keenthemes support

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(