Dropdown creates wrong html-code

Forums Bug Reports Dropdown creates wrong html-code

This topic contains 9 replies, has 4 voices, and was last updated by  Frank 1 week, 1 day ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • Frank
    Member

    Hi,

    I’d like to create a Submenu with more levels. For 1 level we can use the “Dropdown” Component. But what if we need a 2. level?

    Inserting a 2. “Dropdown” into the existing Dropdown will cause wrong CSS.

    The 1. Problem is… a <ul></ul> is missing…

    To reproduce:

    1. create a new design
    2. make a Navbar
    3. Drop a “Dropdown” into “html/body/Nabvar/Navbar_Collapse/Nav” (in the Overview) between a “NavItem”
      … all is fine
    4. the drop another “Dropdown” into “html/body/Nabvar/Navbar_Collapse/Nav/Dropdown/Menu” between a “Menu Item”
      … the preview shows crasy css

    Here the code, how it should be for no html-errors:

    <li class="dropdown">
        <ul> <!-- *** This is <ul> manually inserted *** -->
            <li class="nav-item dropdown">
                <a href="#">Dropdown </a>
                <div class="dropdown-menu" role="menu">
                    <a href="#">2. Level 1</a>
                    <a href="#">2. Level 2</a>
                    <a href="#">2. Level 3</a>
                </div>
            </li>
        </ul> <!-- *** This </ul> is manually inserted *** -->
        <a href="#">First Item</a>
        <a href="#">Second Item</a>
        <a href="#">Third Item</a>
    </li>
    

    but the CSS is still broken

    So, I think it’s better you disallow dropping a 2. Dropdown into an other, and make another Component for Multilevel Menue with for e.g. unorderd lists

    or

    inserting some </p>

    <p><</p>

    <p>ul> and some CSS

    Frank
    Member

    The Cards seems working…

    I talked about the “Navbar”

    Jo
    Member
    Valued

    The links he put are for multilevel-dropdowns for navs. Not sure where you got the idea of cards from on them. 🙂

    I didn’t. 🙂

    Jo
    Member
    Valued

    Not you silly lol. I gotta quit being a lazy type and clarify who I am talking to lol.

    Twinstream
    Member

    @frank

    I was not able to make it work either that way. I went the route of using all ul. Only problem is that you have to type in the class “open” to view sub menu’s which is a real pain. Need to be able to toggle open and close please.

    Jo
    Member
    Valued

    Now you know why I use 3rd party menus lol. Yes I have to do it all by code with a custom code block, but since that’s what I’ve done for years before using this app that’s not a big deal for me 🙂

    Twinstream
    Member

    I uploaded mine as a component if helps anyone. Navbar Multidropdown Bootstrap 4

    You just have to add that pesky “open” class to see them and then remove it when you are done. Sometimes it can get a “little” buggy if you click in the wrong spot after doing so. I always make sure the class is applied before editing the canvas.

    Frank
    Member

    @twinstream

    I just wanted to create the same you did…

    Thank you for being faster 🙂

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.