Topic: Angular, navbar dropdown menu clipping in iPhone 6S+

Jim Kirker free asked 4 years ago


On the mdb-navbar, I have a drop down menu with sub items, and the dropdown menu gets clipped, not visible on the next section below the navbar just on iPhone 6S on the device itself and using Firefox in Responsive mode iPhone 6S+

I messed around with CSS but haven't isolated which element is the culprit and how to fix it. So if you set the browser to responsive testing, select iPhone 6S+ and click the software menu or the cog icon.My website issue exampleAny help would be appreciated!

I am interested in going with the Pro version, I just need to make sure I can get all the elements important to me to work first.

Stumbled upon it by accident and fixed it. But I think it might be an error in your scss filenavbar2.scss or something

@media (max-width: 768px) {
  .navbar {
    &.fixed-top .navbar-collapse, &.sticky-top .navbar-collapse {
      overflow-x: unset;
      overflow-y: unset;
    }
  }
  .dropdown-menu-right {
    padding-left: 6px;
  }
}

Damian Gemza staff commented 4 years ago

Dear @Jim Kirker

I don't know what's wrong there, on your website. Could you please provide me with some screenshots/screen capture movie on which I'll be able to see, what's wrong?

Best Regards,

Damian


Jim Kirker free commented 4 years ago

I fixed it already and posted the new revision of the website. Look at the post above again. Took me hours to figure it out. But thanks for responding!


Jim Kirker free answered 4 years ago


I found the element that needed change and added some extra SCSS to override the original SCSS. I had to turn the Overflow off to get the dropdown to extend beyond the navbar.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.5.4
  • Device: iPhone 6S+
  • Browser: Firefox IOS, Chrome IOS
  • OS: IOS
  • Provided sample code: No
  • Provided link: Yes