Hello, I noticed that some of CSS breaks if you simply use the wizard together with th

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Issue when using Material Wizard with Material Kit,about creativetimofficial/material-bootstrap-wizard

Comments (8)

minikN commented on May 18, 2024 2

@rbarcelos @alexandru-paduraru Alright so the problem is pretty simple to describe. It occurs if you use the Material Wizard and the Material Kit together. In my case, I use the Material Wizard as a modal inside my project, which also uses the Material Kit. So in this scenario, I use both the wizard's css and the kit's css files, and at at least one point, they collide.

In Material Kit, if you use nav pills, an anchor tag (<a href="#">Link</a>) gets applied a box-shadow by default (official documentation):

<ul class="nav nav-pills nav-pills-primary" role="tablist">
	<li>
		<a href="#dashboard" role="tab" data-toggle="tab"> **// <-- THIS TAG** 
			<i class="material-icons">dashboard</i>
			Dashboard
		</a>
	</li>
</ul>

This is defined in material-kit/_pills.scss in line 31, 44, 57, 70 and 83. It's a block of code that gets repeated for every color (primary, success, warning, ....)

Example:

    &.nav-pills-info{
        > li {
            &.active > a{
                &,
                &:focus,
                &:hover{
                    background-color: $brand-info;
                    @include shadow-big-color($brand-info); **// THIS LINE**
                }
            }
        }
    }

So moving on to the wizard now, because it uses nav pills as well to build up the navigation, the above described rules get applied as well.

If you inspect your official wizard demo with chrome dev tools, you can see how you build up the wizard navigation:

<div class="wizard-navigation">
  <ul class="nav nav-pills">
    <li class="active"><a href="#details" data-toggle="tab" aria-expanded="true">Account</a></li>
    <li><a href="#captain" data-toggle="tab">Room Type</a></li>
    <li><a href="#description" data-toggle="tab">Extra Details</a></li>
  </ul>
  <div class="moving-tab" style="width: 250px; transform: translate3d(-8px, 0px, 0px); transition:   transform 0s;">Account</div>
</div>

As you can see it's the same setup: ul.nav-pills > li > &:active > a > &:hover. Because the material kit assets are being used as well, material kit is unintentionally applying the shadow.

I hope this explanation makes clear what's going on. I fixed this issue by applying a block of scss to counter the behaviour. I did not want to alter the source files, hence why I use my own scss file with all my alternations.

.wizard-navigation {
  >.nav-pills{
      > li {
          &.active > a{
              &,
              &:focus,
              &:hover{
                  box-shadow: none;
              }
          }

      }
  } 
}

This block of scss ensures the applied shadow by material kit gets removed again, but only if the ul.nav-pills is inside a div.wizard-navigation to make sure I don't alter the intended nav-pills behaviour across all material kit.

I hope this helps.