treeview in sidebar


Topic: treeview in sidebar

ecline pro asked 3 months ago

When I put a treeview within a sidebar nav it does not indent properly, but when the same treeview is located in the page main body it is indented properly. Is there a way to fix this?

enter image description here

here is the sidebar code used in both places:

        <!-- Side navigation links -->
        <div class="treeview border border-0">
          <ul class="mb-1 pl-3 pb-2">
            <li><i class="fas fa-angle-right rotate"></i>
              <span><i class="far fa-envelope-open ic-w mx-1"></i> Facility A</span>
              <ul class="nested">
                <li><i class="fas fa-angle-right rotate"></i>
                  <span><i class="far fa-envelope-open ic-w mx-1"></i> Process 1</span>
                  <ul class="nested">
                    <li><i class="far fa-address-book ic-w mr-1"></i> Process 1 Subgroup 1</li>

                  </ul>
                </li>

                <li><i class="far fa-address-book ic-w mr-1"></i> Process 2</li>

                <li><i class="far fa-address-book ic-w mr-1"></i> Process 3</li>

              </ul>
            </li>

            <li><i class="fas fa-angle-right rotate"></i>
              <span><i class="far fa-envelope-open ic-w mx-1"></i> Facility B</span>
              <ul class="nested">
                <li><i class="far fa-address-book ic-w mr-1"></i> Process 4</li>

                <li><i class="far fa-address-book ic-w mr-1"></i> Process 5</li>

              </ul>
            </li>

          </ul>
        </div>
        <!--/. Side navigation links -->

Krzysztof Wilk staff answered 3 months ago

Hi!

It looks like the SideNav CSS overwrites the treeview CSS. You can see that padding property of li is equal to 0.

You can add .treeview ul li {padding-left: 20px !important;} to your CSS and it should work :)

Also you can adjust this padding by changing this value, but I think now it looks good :D


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: jQuery
  • MDB Version: 4.17.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No