Component Wizard problems

[Railonn]

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.

[siris]

Hi,

Are you using PrimeFaces or PrimeVue?

[Railonn]

Hi siris,

I'm using PrimeVue.
(It's possible that I made a mistake with the category of the forum, sorry).

[tugce.kucukoglu]

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,

[Railonn]

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 :

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>

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).

Code: Select all

.p-invalid,
.p-invalid .p-inputtext {
    border-color: #f44336;
}

EDIT 2 [08/09/2021] : The Wizard style does not work on TextArea components so I modified the file Wizard.scss like this :

Code: Select all

.wizard-form {
    ...

    input,
    textarea {
        width: 100px;
        
	...
    }
    
    ...
}

Thank you in advance and have a nice day.

[tugce.kucukoglu]

Hi,

Could please try to use this

_wizard.scss

Code: Select all

.banner-image {
    ...
    overflow: hidden;
    
     img {
           object-fit: fill;
     }
}

[Railonn]

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

[tugce.kucukoglu]

Hello,

You need to run this command

Code: Select all

sass --watch public/assets:public/assets

[Railonn]

Hello,

After running this command in my console and restarting my project, the problem is still there.

[tugce.kucukoglu]

Hello,

I have changed the previous post for .banner-image style. Could please review it again?

Best,