Bootstrap Popover content truncated in mobile view when expand
I am running one web application where i used bootstrap 3.3.7 to design the application layout.
In Header Navbar i have some menu, i used one popover, So when user login then user can see his name as dropdown.
In Desktop View: When User hover his name then Popover content will display with other menu link and log out.
Mobile View: other menu will present inside breadcrumbs, Now when user expand the breadcrumbs menu then he can see his user name listed, Now when he click on dropdown then Popover content is showing but truncated.
Complete Popover content body is not visible.
I tried to reproduce the same behavior as discussed above in below html code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script> <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" type="text/javascript"></script> --> <script type="text/javascript"> $(function () { $('[data-toggle="tooltip"]').tooltip() }); </script> </head> <body style="background-color:gray"><div style="display: none;"></div> <div class="navbar navbar-inverse navbar-fixed-top" id="dvNavMenu"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <ul> <li class="active"> <a class="navbar-brand" href="/Home/Menu1" style="color:#FAAC58">Application name</a></li> </ul> </div> <div class="navbar-collapse collapse in" aria-expanded="true" style=""> <ul class="nav navbar-nav"> <li></li><li class="nav-item active"><a class="nav-link" href="/Home/Menu1">Menu1</a></li> <li></li><li class="nav-item"><a class="nav-link" href="/Menu2/Menu2">Menu2</a></li> </ul> <ul class="navbar-right" style="list-style:none"> <li class="dropdown dropbtn active"> <style type="text/css"> ul#ulDropdownParent { list-style:none; } ul#userUlDrop{ list-style:none; } .list-group { padding-left: 0; margin-bottom: 20px; text-align: center; } .popover-title { text-align: center; } .popover-content { width:160px; padding: 7px 15px 15px 28px !important; } .popover.bottom { margin-top: 10px; top: 26.325px !important; left: 39.6625px; display: block; } .list-group-item { position: relative; display: block; padding: 6px 10px; margin-bottom: -1px; background-color: #fff; } #Profile_N { width: 35px; height: 32px; border-radius: 100px; background: #FAAC58; } #Profile_name { text-align: center; color: black; font-size: 18px; line-height: 35px; font-weight: bold; } </style> <script type="text/javascript"> var isMobile = window.matchMedia("only screen and (max-width: 760px)");//Initializing mobile size $(document).ready(function () { $('[data-toggle="popover"]').popover({ html: true, trigger: "hover", animation:false, content: function () { return $('#popover-content').html(); } }) .on('hide.bs.popover', function (e) { if ($(".popover:hover").length) { return false; } }).parent().on('click', '.login-userprofile-custom-popover a', function (e) { e.preventDefault(); var checkUserInfo = $(this).attr('href'); if (checkUserInfo.indexOf("UserProfile") != -1) { window.location.href = $(this).attr('href') + "?user=" + $("#hdnUserEmail").val(); } else window.location.href = $(this).attr('href'); }); $('[data-toggle="popover"]').on('mouseleave', function () { $('#popover-content').stop(true, true).delay(2000).fadeOut();//.popover('hide'); }); if (isMobile.matches) { $('[data-toggle="popover"]').popover({ html: true, trigger: "click", animation: false, content: function () { return $('#popover-content').html(); } }).on('hide.bs.popover', function () { if ($(".popover:hover").length) { return false; } }).parent().on('click', '.login-userprofile-custom-popover a', function (e) { e.preventDefault(); var checkUserInfo = $(this).attr('href'); if (checkUserInfo.indexOf("UserProfile") != -1) { window.location.href = $(this).attr('href') + "?user=" + $("#hdnUserEmail").val(); } else window.location.href = $(this).attr('href'); }); $('[data-toggle="popover"]').on('mouseleave', function () { $('#popover-content').stop(true, true).delay(200).fadeOut();//.popover('hide'); }); $('.dropdown').on('click', function () { $('#popover-content').stop(true, true).delay(200).fadeOut();//.popover('hide'); }); $('body').mouseover(function () { $('#popover-content').stop(true, true).delay(200).fadeOut();//.popover('hide'); }); } }); </script> <ul id="ulDropdownParent" class="nav navbar-nav"> <li> <div class="row"> <div class="col-sm-3 login-userprofile-Img-header-style"> </div> <div class="col-sm-9 login-userprofile-lable-style"> <a data-toggle="dropdown" href="#" style="color:#FAAC58"> <span data-placement="bottom" data-toggle="popover" data-trigger="focus" data-original-title="" title=""> <label for="Hi_vikash_">Hi User!</label><span class="caret"></span> </span> </a> </div> </div> <div id="popover-content" style="display: none"> <ul id="userUlDrop" class="list-group login-userprofile-custom-popover"> <li class="list-group-item"></li><li class="nav-item"><a class="nav-link" href="/Account/UserProfile">Profile</a></li> <li class="list-group-item"></li><li class="nav-item"><a class="nav-link" href="/About/About">About</a></li> <li class="list-group-item"></li><li class="nav-item"><a class="nav-link" href="/Contact/Contact">Contact</a></li> <li class="list-group-item" style="border-top: 1px solid red !important;"> <div style="width:100%; padding-right:13px"> <form class="navbar-right" action="/Account/LogOff" id="logoutForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="54eZjHp7vkKj4BLsny6r25PhdEJfSaYq8zrAsKwcyyjfKgVFFILW2HTja89vMjwMGoti719oJyCeIS6OChwm6-Rq6uEhfTjHFeCB5SR0ohg1"> <a id="AppLogOff" href="javascript:document.getElementById('logoutForm').submit()">Log off</a> </form> </div> </li> </ul> <input type="hidden" id="hdnUserEmail" value="47OzJYFPoOraLDk2JErXzBU+dElMShXpIErfY/6apcA="> </div> </li> </ul> </li> </ul> </div> </div> </div> <div class="layout-Render-body-top-style" id="dvBody"> <div class="layout-Render-body-bottom-style"></div> </div> <footer class="footer navbar-fixed-bottom navbar-dark footer-distributed"> <div class="footer-right"> <ul id="footerItem" class="icon-effect icon-effect-1a footerUlStyle"> <li><a href="#" class="icon"><i class="fa fa-facebook"></i></a></li> <li><a href="#" class="icon"><i class="fa fa-twitter"></i></a></li> <li><a href="#" class="icon"><i class="fa fa-linkedin"></i></a></li> <li><a href="#" class="icon"><i class="fa fa-github"></i></a></li> </ul> </div> <div class="footer-left"> <p>Company Name © 2015</p> </div> </footer> <div id="BackToTop" class="Shown" style="display: none;"></div> <!-- Visual Studio Browser Link --> <script type="application/json" id="__browserLink_initializationData"> {"appName":"Chrome (Linux)","requestId":"af5256d531ca4a9bb0e4aeb3cc3392d3"} </script> <script type="text/javascript" src="https://localhost:57970/71b26b896f8f4f02a0de472308aad04c/browserLink" async="async"></script> <!-- End Browser Link --> <div class="k-list-container k-popup k-group k-reset km-widget km-scroll-wrapper" data-role="popup" style="position: absolute; overflow: hidden; height: auto; display: none;"><div class="km-scroll-header"></div><div class="km-scroll-container" style="transform-origin: left top;"><div class="k-group-header" style="display:none"></div><ul unselectable="on" class="k-list k-reset" tabindex="-1" aria-hidden="true" aria-live="off" data-role="staticlist" role="listbox" style="height: auto;"><li tabindex="-1" role="option" unselectable="on" class="k-item" data-index="0">5</li><li tabindex="-1" role="option" unselectable="on" class="k-item k-state-focused k-state-selected" data-index="1" id="9ca3f6c9-cd5f-4be0-8acd-a998ebf18920" aria-selected="true">10</li><li tabindex="-1" role="option" unselectable="on" class="k-item" data-index="2">20</li></ul></div><div class="km-touch-scrollbar km-horizontal-scrollbar" style="transform-origin: left top;"></div><div class="km-touch-scrollbar km-vertical-scrollbar" style="transform-origin: left top;"></div></div><iframe frameborder="0" scrolling="no" style="background-color: transparent; border: 0px; display: none;"></iframe><div id="GOOGLE_INPUT_CHEXT_FLAG" style="display: none;" input="" input_stat="{"tlang":true,"tsbc":true,"pun":true,"mk":true,"ss":true}"></div></body> </html>
I have attached one image where described the same issue.
