Select List without arrow on right

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Select List without arrow on right

pro asked 7 years ago

Hey, i try use sidenav as https://mdbootstrap.com/live/_MDB/index/docs/skins/black-skin.html But on left i need use element without children (without arrow on right). I can't find this on example, and when i try change somethink then not working good. Can you show me example, how to add new element without children?

Marta Szymanska staff pro premium answered 7 years ago

Hi, first of all, there is a bug with live previews in our side-nav section, this is a correct live preview for black skin in MDB 4.3.2 version: https://mdbootstrap.com/live/_MDB/4.3.2/docs/skins/black-skin.html. Secondly, you need just remove things inside .collapsible-body and an icon, like here: Now you have a list like this: 
<ul class="collapsible collapsible-accordion">
            <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-chevron-right"></i> Submit blog<i class="fa fa-angle-down rotate-icon"></i></a>
                <div class="collapsible-body">
                    <ul>
                        <li><a href="#" class="waves-effect">Submit listing</a>
                        </li>
                        <li><a href="#" class="waves-effect">Registration form</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-hand-pointer-o"></i> Instruction<i class="fa fa-angle-down rotate-icon"></i></a>
                <div class="collapsible-body">
                    <ul>
                        <li><a href="#" class="waves-effect">For bloggers</a>
                        </li>
                        <li><a href="#" class="waves-effect">For authors</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-eye"></i> About<i class="fa fa-angle-down rotate-icon"></i></a>
                <div class="collapsible-body">
                    <ul>
                        <li><a href="#" class="waves-effect">Introduction</a>
                        </li>
                        <li><a href="#" class="waves-effect">Monthly meetings</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-envelope-o"></i> Contact me<i class="fa fa-angle-down rotate-icon"></i></a>
                <div class="collapsible-body">
                    <ul>
                        <li><a href="#" class="waves-effect">FAQ</a>
                        </li>
                        <li><a href="#" class="waves-effect">Write a message</a>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
After removing you will have the list like this: 
<ul class="collapsible collapsible-accordion">
            <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-chevron-right"></i> Submit blog</a>
            </li>
            <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-hand-pointer-o"></i> Instruction</a>
            </li>
            <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-eye"></i> About</a>
            </li>
            <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-envelope-o"></i> Contact me</a>
            </li>
        </ul>
Best, Marta

pro answered 7 years ago

Hey Marta, Thanks for your answer. But this is for jquery version. I looking for angular 2 (directive and component). Can you send example?

CNK answered 7 years ago

Hello, could you tell me if problem was solved? (in Angular version)

Edyta Dabrowska answered 7 years ago

Hi, If it comes to angular components please use appropriate sidenav behavior from here.
And then apply styles needed to get black skin appearance.

If you want to have an item without arrow and children just don't add any like here:

<mdb-item class="no-collase">
<mdb-item-head mdbRippleRadius><i class="fa fa-hand-pointer-o"></i> Simple link</mdb-item-head>
<mdb-item-body></mdb-item-body>
</mdb-item>

Let me know if this works for you.

Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
michalmw
Pro User
7Support score
2Questions 2Answers
0Snippets likes 0Snippets