Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$
Light
Dark
System
Ask  Question

VUE DEMO1 Style issues


https://preview.keenthemes.com/metronic8/vue/demo1/?_ga=2.36191776.1634400312.1676862361-1139528689.1670912406#/crafted/modals/forms/new-address



Wrong, this border has a shadow
https://ibb.co/5RYNT47

Right, this border has no shadow
https://ibb.co/GJZSnnS


L
Leamon Z 1 year ago
Vue
1 Answers
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)

user
Lauris Stepanovs Author1 year ago

Hi Leamon,

Thank you for your message, good catch.

We will update this form in the next release, for now, to add a border you can conditionally add is-invalid class to your Field elements, check example below.

<VForm
 class="form"

 @submit="submit"
 :validation-schema="validationSchema"
 v-slot="{ errors }"
 >
 <!--begin::Modal header-->
 <div class="modal-header" >
 <!--begin::Modal title-->
 <h2>Add New Address</h2>
 <!--end::Modal title-->

 <!--begin::Close-->
 <div
 class="btn btn-sm btn-icon btn-active-color-primary"
 data-bs-dismiss="modal"
 >
 <span class="svg-icon svg-icon-1">
 <inline-svg
 :src="getAssetPath("media/icons/duotune/arrows/arr061.svg")"
 />
 </span>
 </div>
 <!--end::Close-->
 </div>
 <!--end::Modal header-->

 <!--begin::Modal body-->
 <div class="modal-body py-10 px-lg-17">
 <!--begin::Scroll-->
 <div
 class="scroll-y me-n7 pe-7"

 data-kt-scroll="true"
 data-kt-scroll-activate="{default: false, lg: true}"
 data-kt-scroll-max-height="auto"
 data-kt-scroll-dependencies="#kt_modal_new_address_header"
 data-kt-scroll-wrappers="#kt_modal_new_address_scroll"
 data-kt-scroll-offset="300px"
 >
 <!--begin::Notice-->
 <div
 class="notice d-flex bg-light-warning rounded border-warning border border-dashed mb-9 p-6"
 >
 <span class="svg-icon svg-icon-2tx svg-icon-warning me-4">
 <inline-svg
 :src="
 getAssetPath("media/icons/duotune/general/gen044.svg")
 "
 />
 </span>
 <!--begin::Wrapper-->
 <div class="d-flex flex-stack flex-grow-1">
 <!--begin::Content-->
 <div class="fw-semobold">
 <h4 class="text-gray-800 fw-bold">Warning</h4>
 <div class="fs-6 text-gray-600">
 Updating address may affter to your
 <a href="#" target="_blank">Tax Location</a>
 </div>
 </div>
 <!--end::Content-->
 </div>
 <!--end::Wrapper-->
 </div>
 <!--end::Notice-->

 <!--begin::Input group-->
 <div class="row mb-5">
 <!--begin::Col-->
 <div class="col-md-6 fv-row">
 <!--begin::Label-->
 <label class="required fs-5 fw-semobold mb-2"
 >First name</label
 >
 <!--end::Label-->

 <!--begin::Input-->
 <Field
 type="text"
 class="form-control"
 :class="
 errors.firstName ? "is-invalid" : "form-control-solid"
 "
 placeholder=""
 name="firstName"
 v-model="newAddressData.firstName"
 />
 <ErrorMessage class="invalid-feedback" name="firstName" />
 <!--end::Input-->
 </div>
 <!--end::Col-->

 <!--begin::Col-->
 <div class="col-md-6 fv-row">
 <!--end::Label-->
 <label class="required fs-5 fw-semobold mb-2"
 >Last name</label
 >
 <!--end::Label-->

 <!--end::Input-->
 <Field
 type="text"
 class="form-control"
 :class="
 errors.lastName ? "is-invalid" : "form-control-solid"
 "
 placeholder=""
 name="lastName"
 v-model="newAddressData.lastName"
 />
 <ErrorMessage class="invalid-feedback" name="lastName" />
 <!--end::Input-->
 </div>
 <!--end::Col-->
 </div>
 <!--end::Input group-->

 <!--begin::Input group-->
 <div class="d-flex flex-column mb-5 fv-row">
 <!--begin::Label-->
 <label class="d-flex align-items-center fs-5 fw-semobold mb-2">
 <span class="required">Country</span>
 <i
 class="fas fa-exclamation-circle ms-2 fs-7"
 data-bs-toggle="tooltip"
 title="Your payment statements may very based on selected country"
 ></i>
 </label>
 <!--end::Label-->

 <!--begin::Select-->
 <Field
 name="country"
 class="form-select"
 :class="errors.country ? "is-invalid" : "form-control-solid""
 as="select"
 v-model="newAddressData.country"
 >
 <option value="">Select a Country...</option>
 <option value="AF">Afghanistan</option>
 </Field>
 <ErrorMessage class="invalid-feedback" name="country" />
 <!--end::Select-->
 </div>
 <!--end::Input group-->

 <!--begin::Input group-->
 <div class="d-flex flex-column mb-5 fv-row">
 <!--begin::Label-->
 <label class="required fs-5 fw-semobold mb-2"
 >Address Line 1</label
 >
 <!--end::Label-->

 <!--begin::Input-->
 <Field
 class="form-control"
 :class="errors.address1 ? "is-invalid" : "form-control-solid""
 placeholder=""
 name="address1"
 v-model="newAddressData.address1"
 />
 <ErrorMessage class="invalid-feedback" name="address1" />
 <!--end::Input-->
 </div>
 <!--end::Input group-->

 <!--begin::Input group-->
 <div class="d-flex flex-column mb-5 fv-row">
 <!--begin::Label-->
 <label class="required fs-5 fw-semobold mb-2"
 >Address Line 2</label
 >
 <!--end::Label-->

 <!--begin::Input-->
 <Field
 class="form-control"
 :class="errors.address2 ? "is-invalid" : "form-control-solid""
 placeholder=""
 name="address2"
 v-model="newAddressData.address2"
 />
 <ErrorMessage class="invalid-feedback" name="address2" />
 <!--end::Input-->
 </div>
 <!--end::Input group-->

 <!--begin::Input group-->
 <div class="d-flex flex-column mb-5 fv-row">
 <!--begin::Label-->
 <label class="fs-5 fw-semobold mb-2">Town</label>
 <!--end::Label-->

 <!--begin::Input-->
 <Field
 class="form-control"
 :class="errors.town ? "is-invalid" : "form-control-solid""
 placeholder=""
 name="town"
 v-model="newAddressData.town"
 />
 <ErrorMessage class="invalid-feedback" name="town" />
 <!--end::Input-->
 </div>
 <!--end::Input group-->

 <!--begin::Input group-->
 <div class="row g-9 mb-5">
 <!--begin::Col-->
 <div class="col-md-6 fv-row">
 <!--begin::Label-->
 <label class="fs-5 fw-semobold mb-2">State / Province</label>
 <!--end::Label-->

 <!--begin::Input-->
 <Field
 class="form-control"
 :class="errors.state ? "is-invalid" : "form-control-solid""
 placeholder=""
 name="state"
 v-model="newAddressData.state"
 />
 <ErrorMessage class="invalid-feedback" name="state" />
 <!--end::Input-->
 </div>
 <!--end::Col-->

 <!--begin::Col-->
 <div class="col-md-6 fv-row">
 <!--begin::Label-->
 <label class="fs-5 fw-semobold mb-2">Post Code</label>
 <!--end::Label-->

 <!--begin::Input-->
 <Field
 class="form-control"
 :class="
 errors.postCode ? "is-invalid" : "form-control-solid"
 "
 placeholder=""
 name="postCode"
 v-model="newAddressData.postCode"
 />
 <ErrorMessage class="invalid-feedback" name="postCode" />
 <!--end::Input-->
 </div>
 <!--end::Col-->
 </div>
 <!--end::Input group-->

 <!--begin::Input group-->
 <div class="fv-row mb-5">
 <!--begin::Wrapper-->
 <div class="d-flex flex-stack">
 <!--begin::Label-->
 <div class="me-5">
 <!--begin::Label-->
 <label class="fs-5 fw-semobold"
 >Use as a billing adderess?</label
 >
 <!--end::Label-->

 <!--begin::Input-->
 <div class="fs-7 fw-semobold text-gray-400">
 If you need more info, please check budget planning
 </div>
 <!--end::Input-->
 </div>
 <!--end::Label-->

 <!--begin::Switch-->
 <label
 class="form-check form-switch form-check-custom form-check-solid"
 >
 <!--begin::Input-->
 <Field
 class="form-check-input"
 :class="
 errors.postCode ? "is-invalid" : "form-control-solid"
 "
 name="billing"
 type="checkbox"
 value="1"
 checked
 />
 <ErrorMessage class="invalid-feedback" name="billing" />
 <!--end::Input-->

 <!--begin::Label-->
 <span class="form-check-label fw-semobold text-gray-400">
 Yes
 </span>
 <!--end::Label-->
 </label>
 <!--end::Switch-->
 </div>
 <!--begin::Wrapper-->
 </div>
 <!--end::Input group-->
 </div>
 <!--end::Scroll-->
 </div>
 <!--end::Modal body-->

 <!--begin::Modal footer-->
 <div class="modal-footer flex-center">
 <!--begin::Button-->
 <button
 type="reset"

 class="btn btn-light me-3"
 >
 Discard
 </button>
 <!--end::Button-->

 <!--begin::Button-->
 <button
 ref="submitButtonRef"
 type="submit"

 class="btn btn-primary"
 >
 <span class="indicator-label"> Submit </span>
 <span class="indicator-progress">
 Please wait...
 <span
 class="spinner-border spinner-border-sm align-middle ms-2"
 ></span>
 </span>
 </button>
 <!--end::Button-->
 </div>
 <!--end::Modal footer-->
 </VForm>


Regards,
Lauris Stepanovs,
Keenthemes Support Team


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  :(