Select List without arrow on right

Topic: Select List without arrow on right

michalmw 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?

Add comment

Edyta Dabrowska free answered 7 years ago

0 0 Best answer

Please insert min. 20 characters.

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.

Add comment

CNK free answered 7 years ago

0 0 Best answer

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

Add comment

michalmw pro answered 7 years ago

0 0 Best answer

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

Add comment

Marta Wierzbicka staff answered 7 years ago

0 0 Best answer

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 <code>.collapsible-body</code> and an icon, like here:

Now you have a list like this:

<pre><code><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></code></pre>

After removing you will have the list like this:

<pre><code><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></code></pre>

Best,
Marta

Please insert min. 20 characters.

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

michalmw

Pro User 7Support score
2Questions 2Answers 0Snippets