Log in to AnswerLog in to Follow
UserImage.jpg
Tomasz M. Lipinski
11Views
4Comments
Solved
Encapsulating WizardItem in a block
Question
Reactive
Application Type
Reactive

Hi,

The source of the issue is my attempt to encapsulate wizardItem in my own block, to avoid repeating customization of each item. But the issue, in fact, concerns CSS. It is as follows:

There is a Wizard widget with WizardItems - in the vertical mode. The fragment is below:


The "6" item's HTML has the following structure (starts at the blue arrow):

The element, I'm interested in, is the vertical line connecting the consequent items. It  is styled by a rule with "::before" selector (marked above with a blue dot):


As far as good. Let's now wrap the WizardItem widget in a simple div; it will pretend encapsulating the widget in a block:

Look what has happened:  "::before"  has disappeared as well as the vertical connector leading to "6":


Obviously the selector of the rule doesn't fit the markup. But I looked at both CSS and HTML, and looked - and found no reason why it doesn't fit.

Maybe somebody smarter than me will find the reason? 

Regards

Tomasz

0
0
02 Dec 2021
2021-06-02 20-50-03
Márcio Carvalho
Champion
Solution

The reason is disappearing is because by default the OutsystemsUI on the first child will remove the vertical line 


Now to fix this, what I did was override the content: none, but it needs to be tested and see if this is a valid solution or if I am creating more issues. Because of what you are doing I don't guarantee if it will work for your Use case. 

But yeah, this seems to work


.wizard-wrapper [data-block*=WizardItem]:first-child .wizard-item-icon-wrapper:before {

    content: "";

}

Create a theme on your side and insert this piece of code



To make this work without any repercussions I would put a parent class on the block and override the content: none by using the parent class. This way it will affect only the wizard items that is inside of the block and not all wizard items outside of the block

See solution in context
EncapsulatingWizardItem.oml

0
0
02 Dec 2021

Hello Tomasz M. Lipinski ,

Do you think is possible to share an OML?

I understand your issue, but to try to find a solution I must put all elements that you have and then try to find a solution. If you share an OML will be faster.

Best Regards,

Nuno R

0
0
02 Dec 2021

Hello Nuno,

Please find the attached test OML. Thanks for the efforts.

Regards

Tomasz

EncapsulatingWizardItem.oml

0
0
02 Dec 2021
2021-06-02 20-50-03
Márcio Carvalho
Champion
Solution

The reason is disappearing is because by default the OutsystemsUI on the first child will remove the vertical line 


Now to fix this, what I did was override the content: none, but it needs to be tested and see if this is a valid solution or if I am creating more issues. Because of what you are doing I don't guarantee if it will work for your Use case. 

But yeah, this seems to work


.wizard-wrapper [data-block*=WizardItem]:first-child .wizard-item-icon-wrapper:before {

    content: "";

}

Create a theme on your side and insert this piece of code



To make this work without any repercussions I would put a parent class on the block and override the content: none by using the parent class. This way it will affect only the wizard items that is inside of the block and not all wizard items outside of the block

EncapsulatingWizardItem.oml

0
0
02 Dec 2021

Hi Marcio,

Great, thanks a lot. Yes, I must add some CSS rules manipulating to keep standard Wizards working and to make the first item of my wizard having no connector. But it is a routine work :-)

Regards

Tomasz

0
0
03 Dec 2021
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.