I have this widget but I don't know how to design it. and one have this or do it before. can give me advice. I have attach an image.

Thanks 

Hi,

You can use wizard item for this. You have to do design using css .

Thanks.

Hi,

Looks like part of a Wizard pattern. I'd recommend the widget that OutSystems provides, but it's not very similar and it would involve moving the label step since it's underneath the actual step:


You could either clone the Wizard and WizardStep widgets OutSystems provides and then customise it to your needs, or build a wizard from the ground up - looking at the changes the WizardStep would require, I think I'd probably build a new one. There's a few CSS examples of what you need online, this one is very close to what you posted:

Afonso Carvalho wrote:

Hi,

Looks like part of a Wizard pattern. I'd recommend the widget that OutSystems provides, but it's not very similar and it would involve moving the label step since it's underneath the actual step:


You could either clone the Wizard and WizardStep widgets OutSystems provides and then customise it to your needs, or build a wizard from the ground up - looking at the changes the WizardStep would require, I think I'd probably build a new one. There's a few CSS examples of what you need online, this one is very close to what you posted:


Hi,

 I have test CSS examples from that link. But my css about before and after It does not work. when I check on website I does not have. I have design it on Button widget. Do you have any suggest for me??

Thanks

Without having access to the webblock, I'd guess it's because the elements inside your Wizard are buttons. I can see this causing two things:

 - there's a lot of default theme CSS that gets applied to inputs, it might be affecting your styling;

 - the example I linked and the examples I'm seeing typically use <li> and <div> elements: applying them to inputs might require adaptation.

Do you think you could isolate your Wizard and share a module for everyone to look over? It will be easier to help.