CODEWITHSUNDEEP
htmltwitter-bootstrap-3bootstrap-popover
V.Prasad
V.Prasad

Reputation: 151

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="http://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="{&quot;tlang&quot;:true,&quot;tsbc&quot;:true,&quot;pun&quot;:true,&quot;mk&quot;:true,&quot;ss&quot;:true}"></div></body>
</html>

enter image description here

I have attached one image where described the same issue.

Upvotes: 0

Views: 951

Answers (1)

Muhammad Tarique
Muhammad Tarique

Reputation: 1437

First of all you should use bootstrap 4 dropdown not popovers.

to achieve this try the below code snippet with bootstrap 4.5 cdn link also provided -

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>


<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark" id="topnav">
    <div class="container px-0">
        <a href="#" class="navbar-brand text-warning py-0">
            Application Name
        </a>

        <button class="navbar-toggler border-0" type="button" data-toggle="collapse" data-target="#myNavbar" aria-controls="myNavbar" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item pr-3">
                   <a href="" class="text-decoration-none text-nowrap text-white">Menu 1</a>
                </li>
                <li class="nav-item pr-3">
                  <a href="" class="text-decoration-none text-nowrap text-white">Menu 2</a>
                </li>
            </ul>
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <div class="dropdown">
                        <a href="#" id="userUlDrop" class="dropdown-toggle text-decoration-none text-nowrap text-white" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Hi User!
                        </a>
                        <div class="dropdown-menu dropdown-menu-right rounded-0 mt-2" aria-labelledby="userUlDrop">
                          <a class="dropdown-item" href="">
                                About
                            </a>
                          <a class="dropdown-item" href="">
                                Contact
                            </a>
                            <a class="dropdown-item" href="">
                                Log off
                            </a>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</nav>

Upvotes: 2

Related Questions