Good morning,
I recently purchased the Babylon template and I'm having several problems trying to modify the Wizard.vue component, so I'm hoping to get some help by contacting you.
First, I tried to implement error handling on the component with vee-validate and yup, but when one of the error messages appears, it moves the fields underneath and creates an asymmetry between the two field columns. Then when I try to use "p-invalid" on InputText, AutoComplete or DropDown, nothing happens. (see images)
https://imgur.com/iXmPXCM
When I zoom out to 50%, the images in the card's header don't fill the entire banner zone (see images).
https://imgur.com/A8RUSWv
I would like add a BACK button, but when I add him to the div "wizzard-button" this one sticks to the CONTINUE button (see images).
https://imgur.com/hVhFrC5
And finally, I have a problem with the footer when I am on a small screen (see images).
https://imgur.com/JjnTY4z
https://imgur.com/IlpeZgs
Thank you in advance and have a nice day.
Component Wizard problems
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
-
- Posts: 560
- Joined: 23 Oct 2020, 09:28
Hi,
I've never work with vee-validate or yup but here is an example with vuelidate https://codesandbox.io/s/ge1ut?file=/sr ... rmDemo.vue. I think they have similar logic.
https://www.primefaces.org/babylon-vue/#/wizard in here I tried to zoom but I can't replicate your issue. How can can I see it?
If you don't want to sticked buttons, you can add a simple style attribute or override _wizard.scss or just use PrimeFlex spacing utilities.
Best,
I've never work with vee-validate or yup but here is an example with vuelidate https://codesandbox.io/s/ge1ut?file=/sr ... rmDemo.vue. I think they have similar logic.
https://www.primefaces.org/babylon-vue/#/wizard in here I tried to zoom but I can't replicate your issue. How can can I see it?
If you don't want to sticked buttons, you can add a simple style attribute or override _wizard.scss or just use PrimeFlex spacing utilities.
Best,
Hello, first of all thank you for your answer.
I have managed to solve some problems, however there are still a few left.
The problem with the image not filling the whole area happens when you zoom out and not when you zoom in.
Otherwise I still can't use the "p-invalid" class with the wizard style, I tried without using vee-validate and the problem persists.
Here is an example of when it doesn't work to illustrate my point :As for the buttons, do I need to add something in the .scss files? If so, can you enlighten me please?
EDIT [08/09/2021] : I added theses lines in the file Wizard.scss after the ".wizard-forms {" line.
(But does not work on AutoComplete and DropDown components).
EDIT 2 [08/09/2021] : The Wizard style does not work on TextArea components so I modified the file Wizard.scss like this :
Thank you in advance and have a nice day.
I have managed to solve some problems, however there are still a few left.
The problem with the image not filling the whole area happens when you zoom out and not when you zoom in.
Otherwise I still can't use the "p-invalid" class with the wizard style, I tried without using vee-validate and the problem persists.
Here is an example of when it doesn't work to illustrate my point :
Code: Select all
<template>
...
<div class="wizard-card-content register">
<div class="wizard-forms-wrapper p-grid p-nogutter">
<div class="p-field wizard-forms">
<label for="testInputText">testInputText</label>
<InputText id="testInputText" class="p-invalid" v-model="testInputText" />
<label for="testAutoComplete">testAutoComplete</label>
<AutoComplete id="testAutoComplete" class="p-invalid" v-model="testAutoComplete" />
<label for="testTextArea">testTextArea</label>
<TextArea id="testTextArea" class="p-invalid" v-model="testTextArea" />
<label for="testDropDown">testDropDown</label>
<DropDown id="testDropDown" class="p-invalid" v-model="testDropDown" />
</div>
</div>
</div>
...
</template>
EDIT [08/09/2021] : I added theses lines in the file Wizard.scss after the ".wizard-forms {" line.
(But does not work on AutoComplete and DropDown components).
Code: Select all
.p-invalid,
.p-invalid .p-inputtext {
border-color: #f44336;
}
Code: Select all
.wizard-form {
...
input,
textarea {
width: 100px;
...
}
...
}
Thank you in advance and have a nice day.
Last edited by Railonn on 08 Sep 2021, 13:00, edited 2 times in total.
-
- Posts: 560
- Joined: 23 Oct 2020, 09:28
Hi,
Could please try to use this
_wizard.scss
Could please try to use this
_wizard.scss
Code: Select all
.banner-image {
...
overflow: hidden;
img {
object-fit: fill;
}
}
Hello,
I tried to add these lines, but nothing changes after generating the .css files.
Here are the images that can help you understand where the problem comes from.
https://imgur.com/a/CHflHwh
I tried to add these lines, but nothing changes after generating the .css files.
Here are the images that can help you understand where the problem comes from.
https://imgur.com/a/CHflHwh
-
- Posts: 560
- Joined: 23 Oct 2020, 09:28
-
- Posts: 560
- Joined: 23 Oct 2020, 09:28
Hello,
I have changed the previous post for .banner-image style. Could please review it again?
Best,
I have changed the previous post for .banner-image style. Could please review it again?
Best,
-
- Information
-
Who is online
Users browsing this forum: No registered users and 0 guests