Sub menu not displayed correctly

Question

i use bootstrap 3 and i try to display a button group with a submenu. i use bootstrap-submenu

i created the menu

<div class="btn-group">
        <button class="btn btn-primary" type="button">Actions</button>
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" data-submenu="" aria-expanded="false">
            <span class="caret"></span>
        </button>

        <ul class="dropdown-menu dropdown-menu-right">
            <li><a tabindex="0">Annuler</a></li>
            <li><a tabindex="0">Sauvegarder</a></li>
            <li class="divider"></li>
            <li class="dropdown-submenu">
                <a tabindex="0">Payer</a>

                <ul class="dropdown-menu">
                  <li><a tabindex="0">Comptant</a></li>
                  <li><a tabindex="0">Débit</a></li>
                  <li><a tabindex="0">Carte de crédit</a></li>
                  <li><a tabindex="0">Carte cadeaux</a></li>
                  <li><a tabindex="0">Chèque</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

that work fine.

but when i try to add something under it, i don't see all the menu http://jsfiddle.net/hxnznnz6/

it's seem like something block it to display completly the menu.

Also if you compare the layout of the two button, it's different

Edit i removed the first btn-group like @Eduardo Arruda Pimentel said.

look ok, but the sub menu of Payer is not displayed when i click on it

New result http://jsfiddle.net/wn9u5z28/

score 1 · Answer 1 · edited May 23 '17 at 12:07

1

1)Bootstrap 3 removed support for multilevel dropdowns, citing usability issues as the cause. As you can see in these two links:

Bootstrap 3 dropdown sub menu missing

Responsive multilevel menu with Bootstrap 3

2) The reason for the different layout is that the code is different. To solve that, just recode and delete this part of line 3:

class="btn-group"

edited May 23 '17 at 12:07

Community

1
1

answered May 20 '16 at 04:32

Eduardo Arruda Pimentel

518
1
6
25

menu is not displayed corectly, i posted an image who show the problem – robert gagnon May 20 '16 at 11:23
I tested again, in my work. Menu is displaying correctly. What browser are you using? – Eduardo Arruda Pimentel May 20 '16 at 17:01
firefox, ie and chrome... when i click on Payer item... nothing is displayed like the picture show – robert gagnon May 21 '16 at 01:22
Your fiddle ia normal to me. Even in my cellphone. – Eduardo Arruda Pimentel May 21 '16 at 01:53
what do you see in the Payer submenu? – robert gagnon May 21 '16 at 02:54
tried under windows 7 ie/chrome/firefox, linux with firefox, chrome don't work surely a bug – robert gagnon May 21 '16 at 11:44
Please make sure your fiddle is identical your real code. I will post a images as soon as possible. Not now because i'm using my cellphone to post. – Eduardo Arruda Pimentel May 21 '16 at 14:54
Posted the image on answer...see, it's normal. Try in another pc. I tested in home (windows 10), work (windows 7) and mobile (iphone 4s). – Eduardo Arruda Pimentel May 21 '16 at 22:16
that work like that... if you increase screen size of the table.. you should get the problem.. – robert gagnon May 21 '16 at 22:54
What is your screen size? – Eduardo Arruda Pimentel May 22 '16 at 14:42
tested on 32", 27", 22" – robert gagnon May 22 '16 at 21:38

Sub menu not displayed correctly

1 Answers1