This is a migrated thread and some comments may be shown as answers.

Multiple Wizards with Separate Styles

2 Answers 31 Views
Wizard
This is a migrated thread and some comments may be shown as answers.
Chance
Top achievements
Rank 1
Chance asked on 04 Oct 2017, 04:32 PM

I have one wizard using a custom template css.  Then in the last step of that wizard I have another wizard control set to use a different template.  The issue I'm having is the styles for the main wizard are overwriting the sub wizard because by default they both use the same css class names.

 

Is there a way I could get the sub wizard to use different css class names or atleast use the version of the css classes that are under the template class I want for the sub wizard?

 

 

2 Answers, 1 is accepted

Sort by
0
Chance
Top achievements
Rank 1
answered on 04 Oct 2017, 06:48 PM

Got it to work adding css classes for the template name right above the second wizard. Thought I had tried this already but guess I must have done something wrong before.

.RadWizard_Bootstrap .rwzLink {
 
         
    }
   .RadWizard_Bootstrap .rwzHovered.rwzButton,
  .RadWizard_Bootstrap .rwzHovered .rwzLink {
    }
  .RadWizard_Bootstrap .rwzHovered.rwzNext,
  .RadWizard_Bootstrap .rwzHovered.rwzFinish {
     }
  .RadWizard_Bootstrap .rwzHovered.rwzPrevious
  {
  }
 
  .RadWizard_Bootstrap .rwzHovered .rwzLink:before {
   }
0
Magdalena
Telerik team
answered on 09 Oct 2017, 08:45 AM
Hi Chance,

When you set the CssClass property in those Wizard, you will add different CSS classes to them, and can style them separately. There are two possible solution to achieve the described behavior:
  1. Use the ">" in CSS selector, so rules will be applied only to immediately children:

    aspx:
    <telerik:RadWizard runat="server" ID="RadWizard1" CssClass="Wizard1">
        <WizardSteps>
            <telerik:RadWizardStep ID="RadWizardStep1" runat="server" Title="First STEP">
                <telerik:RadWizard runat="server">
     
                </telerik:RadWizard>
            </telerik:RadWizardStep>
        </WizardSteps>
    </telerik:RadWizard>

    CSS:
    .Wizard1 > .rwzBreadCrumb .rwzLink {
    }
     
    .Wizard1 > .rwzBreadCrumb .rwzHovered.rwzButton,
    .Wizard1 > .rwzBreadCrumb .rwzHovered .rwzLink {
    }
     
    .Wizard1 > .rwzBreadCrumb .rwzHovered.rwzNext,
    .Wizard1 > .rwzBreadCrumb .rwzHovered.rwzFinish {
    }

    This selectors will be apply styles to all rwzLink, which are in such rwzBreadCrumb that is the immediate child of Wizard1.

  2. The second solution is to overwrite styles for the imported Wizard by nesting RadWizard selectors.

    CSS:
    /*style all wizards*/
    .RadWizard .rwzLink {
    }
     
    .RadWizard .rwzHovered.rwzButton,
    .RadWizard .rwzHovered .rwzLink {
    }
     
    /*style only imported wizard*/
    .RadWizard .RadWizard .rwzLink {
    }
     
    .RadWizard .RadWizard .rwzHovered.rwzButton,
    .RadWizard .RadWizard .rwzHovered .rwzLink {
    }




Regards,
Magdalena
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Wizard
Asked by
Chance
Top achievements
Rank 1
Answers by
Chance
Top achievements
Rank 1
Magdalena
Telerik team
Share this question
or