I'm trying to add bootstrap tooltips to some icons on a list, but the tooltip is partially hidden by the row height:
What style do I need to add to my code below to have the tooltip hover on top?
<div ng-repeat="item in c.data.list track by $index" class="list-group-item">
<div class="flex">
<div style="margin-right:auto;">
<span class="h4">{{item.short_description}}</span>
<div>
<small class="text-muted"><i class="fa fa-clock-o m-l-xs"></i><span style="padding-left: 5px;">Last Updated: {{item.last_updated}}</span></small>
</div>
</div>
<div class="h4">
<a class="link" ng-click="" data-toggle="tooltip" data-placement="top" title="Preview"><i class="fa fa-eye"></i></a>
<a class="link" ng-click="" data-toggle="tooltip" data-placement="top" title="Download"><i class="fa fa-download"></i></a>
</div>
</div>
</div>
I had an issue with tooltips being cut off as well and what worked for me was to set the data-container to 'body'. For example:
<span data-toggle="tooltip" data-placement="bottom" data-html="true" data-container="body" title="bla">
Related
I have card with dropdown menu like below
<div class="content d-flex">
<div class="ps-1 align-self-center">
<img src="#" class="rounded-circle shadow-l preload-img entered loading" data-ll-status="loading" width="45">
</div>
<div class="ps-2 align-self-center">
<h5 class="font-15 color-dark-dark">Jasdeep Singh <i class="fa fa-circle font-12 color-green-dark ms-1"></i></h5>
<p class="opacity-50 mt-n2 me-n1 font-13 mb-0">
Seen on 2022-05-09 10:52:36 </p>
</div>
<div class="ms-auto align-self-center">
<div class="dropdown">
<i class="fa fa-align-justify dropdown-toggle color-black me-2" data-toggle="dropdownMenu2" data-bs-toggle="dropdown"></i>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><button type="button" data-id="28" class="dropdown-item block_user" style="display:block">Block User</button></li>
<li><button type="button" data-id="28" class="dropdown-item unblock_user" style="display:none">Unblock User</button></li>
<li><button type="button" data-id="28" class="btn-link dropdown-item report_spam">Report Spam</button></li>
</ul>
</div>
</div>
</div>
Its all fine but dropdown menu getting cut like below image. I have tried many solution but not working. Let me know if any one here can help me for solve the puzzle.
Thanks!
So I have the below code that will render a mega menu for me using the Bulma Framework, but I'm running into issues on having it position center underneath.
Please note: Please click "Run code" and then expand to full page to see what I mean, the mobile version doesn't show it.
The code that I have renders the mega menus as such:
I want to have the hoverable menu item be centered with the mega menu (Meaning have the middle "Sub Menu Title" be right below the blog hover dropdown.
There is a min-width: 50% set on the .navbar-dropdown class.
All help would be appreciated.
.navbar-item.is-mega {
position: static;
.is-mega-menu-title {
margin-bottom: 0;
padding: .375rem 1rem;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.1/css/bulma.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav class="navbar">
<div class="navbar-brand">
<a class="navbar-item" href="http://bulma.io">
<img src="http://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
</a>
<div class="navbar-burger burger" data-target="navMenubd-example">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="navMenubd-example" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">
Home1
</a>
<a class="navbar-item">
Home2
</a>
<a class="navbar-item">
Home3
</a>
<a class="navbar-item">
Home3
</a>
<a class="navbar-item">
Home3
</a>
<a class="navbar-item">
Home3
</a>
<div class="navbar-item has-dropdown is-hoverable is-mega">
<div class="navbar-link flex">
Blog <span class="tag is-info ml-2">Hover here<span>
</div>
<div id="blogDropdown" class="navbar-dropdown " style="min-width: 50%" data-style="width: 18rem;">
<div class="container is-fluid">
<div class="columns">
<div class="column">
<h1 class="title is-6 is-mega-menu-title">Sub Menu Title</h1>
<a class="navbar-item" href="/2017/08/03/list-of-tags/">
<div class="navbar-content">
<p>
<small class="has-text-info">03 Aug 2017</small>
</p>
<p>New feature: list of tags</p>
</div>
</a>
<a class="navbar-item" href="/2017/08/03/list-of-tags/">
<div class="navbar-content">
<p>
<small class="has-text-info">03 Aug 2017</small>
</p>
<p>New feature: list of tags</p>
</div>
</a>
<a class="navbar-item" href="/2017/08/03/list-of-tags/">
<div class="navbar-content">
<p>
<small class="has-text-info">03 Aug 2017</small>
</p>
<p>New feature: list of tags</p>
</div>
</a>
</div>
<div class="column">
<h1 class="title is-6 is-mega-menu-title">Sub Menu Title</h1>
<a class="navbar-item" href="/2017/08/03/list-of-tags/">
<div class="navbar-content">
<p>
<small class="has-text-info">03 Aug 2017</small>
</p>
<p>New feature: list of tags</p>
</div>
</a>
<a class="navbar-item " href="/documentation/overview/start/">
Overview
</a>
<a class="navbar-item " href="http://bulma.io/documentation/modifiers/syntax/">
Modifiers
</a>
<a class="navbar-item " href="http://bulma.io/documentation/columns/basics/">
Columns
</a>
</div>
<div class="column">
<h1 class="title is-6 is-mega-menu-title">Sub Menu Title</h1>
<a class="navbar-item " href="/documentation/overview/start/">
Overview
</a>
<a class="navbar-item " href="http://bulma.io/documentation/modifiers/syntax/">
Modifiers
</a>
<a class="navbar-item " href="http://bulma.io/documentation/columns/basics/">
Columns
</a>
<a class="navbar-item " href="http://bulma.io/documentation/layout/container/">
Layout
</a>
</div>
</div>
</div>
<hr class="navbar-divider">
<div class="navbar-item">
<div class="navbar-content">
<div class="level is-mobile">
<div class="level-left">
<div class="level-item">
<strong>Stay up to date!</strong>
</div>
</div>
<div class="level-right">
<div class="level-item">
<a class="button bd-is-rss is-small" href="http://bulma.io/atom.xml">
<span class="icon is-small">
<i class="fa fa-rss"></i>
</span>
<span>Subscribe</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="navbar-item">
Home
</a>
</div>
<div class="navbar-end">
<a class="navbar-item is-hidden-desktop-only" href="https://github.com/jgthms/bulma" target="_blank">
<span class="icon" style="color: #333;">
<i class="fa fa-github"></i>
</span>
</a>
<a class="navbar-item is-hidden-desktop-only" href="https://twitter.com/jgthms" target="_blank">
<span class="icon" style="color: #55acee;">
<i class="fa fa-twitter"></i>
</span>
</a>
<div class="navbar-item">
<div class="field is-grouped">
<p class="control">
<a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="http://bulma.io" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&hashtags=bulmaio&url=http://bulma.io&via=jgthms">
<span class="icon">
<i class="fa fa-twitter"></i>
</span>
<span>
Tweet
</span>
</a>
</p>
<p class="control">
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.1.zip">
<span class="icon">
<i class="fa fa-download"></i>
</span>
<span>Download</span>
</a>
</p>
</div>
</div>
</div>
</div>
</nav>
Currently in bulma.min.css .navbar-dropdown has:
position: absolute;
left: 0;
Thus you could add those 2 lines to do the trick:
left: 50%; // will position it at 50% of its relative parent (the .navbar)
transform: translateX(-50%); // will translate it 50% of its own width to the left
im trying to make bootstrap drop down menu but in it doesn't render as expected (the button to expand the menu is unclickable )
<div class="news-blocks mb-5">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-md-12 services-section">
<div class="inner">
<div class="inner-align">
<div class="row">
<div class="col-lg-4">
<h2 class="heading">
<i class="la la-gears"></i> الخدمات الإلكترونية </h2>
<div class="dropdown open">
<button class="btn btn-secondary dropdown-toggle" type="button" id="triggerId" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
تسجيل الشركة
</button>
<div class="dropdown-menu" aria-labelledby="triggerId">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 1</a>
</div>
</div>
</div>
<div class="col-lg-8">
<p class="text">
text
</p>
<button type="button" class="arrow-btn btn btn-primary btn-lg">
<i class="fa fa-arrow-left" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
the area highlited in red should be the dropdown menu but it is not
I have an app that uses Bootstrap 3. In that app, I have a toolbar. I only want that toolbar to appear on "md" and "lg" screens. On "xs" and "sm" sized screens, I want a drop-down menu to appear in its place. My question is, how do I do that? Currently, I have the following code, which is available in this Bootply.
<div class="container">
<div class="row">
<div class="col-xs-9">
<ul class="list-inline">
<li><i class="fa fa-user"></i></li>
<li><strong>Joe Smith</strong></li>
</ul>
</div>
<div class="col-xs-3">
<div class="btn-toolbar pull-right hidden-xs">
<div class="btn-group">
<button class="btn"><i class="fa fa-save"></i></button>
<button class="btn"><i class="fa fa-close"></i></button>
</div>
</div>
<div class="dropdown hidden-lg">
<i class="fa fa-chevron-down"></i>
<ul class="dropdown-menu dropdown-menu-right">
<li><button class="btn btn-sup"><i class="fa fa-save"></i><span>Save</span></button></li>
<li><button class="btn btn-sup"><i class="fa fa-close"></i><span>Close</span></button></li>
</ul>
</div>
</div>
</div>
</div>
My problem is, in Bootstrap 3, the responsive utilities do not seem to let define multiple breakpoints for visibility. Is there a way for me to say something like, "if my screen size is "md" or less, show the menu. Otherwise, use the toolbar?" If so, how?
Thanks!
you can look it up here
http://getbootstrap.com/css/#responsive-utilities-classes
So on the toolbar you should have
<div class="btn-toolbar pull-right hidden-xs hidden-sm">
and on the dropdown
<div class="dropdown hidden-md hidden-lg">
Try use this code:
<div class="container">
<div class="row">
<div class="col-xs-9">
<ul class="list-inline">
<li><i class="fa fa-user"></i></li>
<li><strong>Joe Smith</strong></li>
</ul>
</div>
<div class="col-xs-3">
<div class="btn-toolbar pull-right visible-md visible-lg">
<div class="btn-group">
<button class="btn"><i class="fa fa-save"></i></button>
<button class="btn"><i class="fa fa-close"></i></button>
</div>
</div>
<div class="dropdown visible-xs visible-sm">
<i class="fa fa-chevron-down"></i>
<ul class="dropdown-menu dropdown-menu-right">
<li><button class="btn btn-sup"><i class="fa fa-save"></i><span>Save</span></button></li>
<li><button class="btn btn-sup"><i class="fa fa-close"></i><span>Close</span></button></li>
</ul>
</div>
</div>
Might be easiest if I point you here: http://bootsnipp.com/snippets/featured/user-profile-widget
What I am trying to do is align these side by side so that there are two per row...
I'm just completely confused with the order of the columns...
I guess any Bootstrap expert could please chime in with a suggestion? Thanks!
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="well well-sm">
<div class="row">
<div class="col-sm-6 col-md-4">
<img src="http://placehold.it/380x500" alt="" class="img-rounded img-responsive" />
</div>
<div class="col-sm-6 col-md-8">
<h4>
Bhaumik Patel</h4>
<small><cite title="San Francisco, USA">San Francisco, USA <i class="glyphicon glyphicon-map-marker">
</i></cite></small>
<p>
<i class="glyphicon glyphicon-envelope"></i>email#example.com
<br />
<i class="glyphicon glyphicon-globe"></i>www.jquery2dotnet.com
<br />
<i class="glyphicon glyphicon-gift"></i>June 02, 1988</p>
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-primary">
Social</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span><span class="sr-only">Social</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Twitter</li>
<li>Google +</li>
<li>Facebook</li>
<li class="divider"></li>
<li>Github</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
Perhaps I'm not understanding the question, but it seems to work just fine when including two of them on the same row.
http://bootsnipp.com/user/snippets/M23j