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:
<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>
Replies (2)
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
Hi Mikle,
did you solve the problem?
I'm having the same problem and don't know how to fix it.
Best Regards,
Marcel
