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

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


Right, this border has no shadow


L
Leamon Z 3 years ago
Vue
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)

user
Lauris Stepanovs Author 3 years 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

                      Tax Location

                    </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
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