Dropdown not displaying all items

Topic: Dropdown not displaying all items

Chris Sweeney pro asked 5 years ago

Hi Weird one this! On page https://www.rotary-ribi.org/clubs/homepage.php?ClubID=1966 The 'what we do' dropdown list at the top of the page (PC) doesn't display all items. The same data is used in the slideout menu, where all items are displayed! The source code shows that all items are there - but the last three items (Membership onwards) aren't visible. <li class="nav-item btn-group dropdown hidden-md-down wwedo"> <a class="nav-link dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-cog" aria-hidden="true"></i> What We Do</a> <div class="dropdown-menu scrollable-menu" aria-labelledby="dropdownMenu1"> <a class="dropdown-item" href="#clubInfo"><i class="fa fa-star" aria-hidden="true"></i> About us</a> <a class="dropdown-item" href="#featuredPages"><i class="fa fa-star" aria-hidden="true"></i> Featured pages</a> <a class="dropdown-item" href="#next30"><i class="fa fa-calendar" aria-hidden="true"></i> Happening soon</a> <a class="dropdown-item" href="gallerypage.php?ClubID=1966"><i class="fa fa-camera" aria-hidden="true"></i> Photo Galleries</a> <a class="dropdown-item" href="page.php?PgID=657704&amp;ClubID=1966">2017 photos</a> <a class="dropdown-item" href="page.php?PgID=662081&amp;ClubID=1966">CLUB CONSTITUTION, BYLAWS, STANDING ORDERS AND POLICIES</a> <a class="dropdown-item" href="page.php?PgID=630613&amp;ClubID=1966">Our Projects</a> <a class="dropdown-item" href="page.php?PgID=482158&amp;ClubID=1966">Future Events</a> <a class="dropdown-item" href="page.php?PgID=513686&amp;ClubID=1966">Rotary Club of Uppingham - Alphabetical Guide to Rotary</a> <a class="dropdown-item" href="page.php?PgID=255149&amp;ClubID=1966">Youth Service</a> <a class="dropdown-item" href="page.php?PgID=254973&amp;ClubID=1966">Charitable Trust</a> <a class="dropdown-item" href="page.php?PgID=432515&amp;ClubID=1966">REPORTS TO CLUB AGM</a> <a class="dropdown-item" href="page.php?PgID=254975&amp;ClubID=1966">International</a> <a class="dropdown-item" href="page.php?PgID=255150&amp;ClubID=1966">Membership</a> <a class="dropdown-item" href="page.php?PgID=290014&amp;ClubID=1966">President's Action Plan for the year ahead</a> <a class="dropdown-item" href="page.php?PgID=320208&amp;ClubID=1966">Recent Events</a> </div> </li> There's nothing apparently different in the database content - and a full list works properly on other pages, e.g. https://www.rotary-ribi.org/clubs/homepage.php?ClubID=638 Totally baffled! Cheers Chris

Marta Wierzbicka staff answered 5 years ago

Hi, I'm not sure what you mean, you can see in the attached screen that .dropdown-menu is too long for my screen. Best, Marta  

Marta Wierzbicka staff answered 5 years ago

Hi, it's because your .dropdown-menu is too long. Change .scrollable-menu { max-height: 800px } to e.g. 500 px and everything will show. Best, Marta

Chris Sweeney pro commented 5 years ago

Hi Marta The code already allows longer lists (see https://www.rotary-ribi.org/clubs/homepage.php?ClubID=638). There are a couple of examples where the menu doesn't display in full, and I can't fathom why! Cheers Chris

Please insert min. 20 characters.


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



Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Other
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes