I'm looking to create a dropdown button with a popover. The menu works fine by itself but once the popover is added the menu sticks in the open position once clicked. How would I get dropdown and popover working together?
<div class="btn-group">
<button class="btn btn-primary" data-bs-toggle="tooltip" rel="nofollow" title="Make a GET request">GET</button>
<button class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" data-bs-toggle-second="tooltip" title="Specify a format for the GET request">
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" data-bs-toggle="tooltip" title="A title">An item</a>
</li>
</ul>
</div>
<script type="text/javascript">
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"], [data-bs-toggle-second="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>
I've also created it on JSFiddle
This is the easiest workaround i could find. Divide the toggle and the tooltip functionalities, and it will work as intended.
<button class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
<span class="sr-only" data-bs-toggle="tooltip" title="Specify a format for the GET updated">Toggle Dropdowns</span>
</button>
This is where i find the idea for the solution stackoverflow similar problem
Related
This is a jump I made using the ActionLink in #Htmlhelper, but my Bootstrap button design turned out like this:
#HTMLAction() button code is:
<button class="btn btn-success btn-icon-split">
<span class="icon text-white-50">
<i class="fas fa-edit"></i>
</span>
#Html.ActionLink("Edit", "EditForm", "Dashboard", new { id = Model.FormId })
</button>
When I jump with the <a> tag it renders this effect:
HTML markup is:
<button href="/Dashboard/EditForm" class="btn btn-success btn-icon-split">
<span class="icon text-white-50">
<i class="fas fa-edit"></i>
</span>
<span class="text" id="Edit">Edit</span>
</button>
While I use Htmlhelper to pass values while jumping, I can't achieve such a normal effect anyway.
try this :
<button href="/Dashboard/EditForm" class="btn btn-success btn-icon-split">
<span class="icon text-white-50">
<i class="fas fa-edit"></i>
</span>
<a class="text" href="#Html.ActionLink("Edit", "EditForm", "Dashboard", new { id = Model.FormId })" id="Edit">Edit</a>
</button>
Trying to align some menu buttons to left with Angular Material
like on the screenshoot
<div>
<mat-toolbar color="primary">
<div fxShow="true" fxHide.gt-sm="true">
<button mat-icon-button (click)="sidenav.toggle()">
<mat-icon>menu</mat-icon>
</button>
</div>
<a mat-button class="menu" routerLink="/">
<span>Just a menu</span>
</a>
<span class="example-spacer"></span>
<div fxShow="true" fxHide.lt-md="true">
<a mat-button routerLink="/component1">Button1</a>
<a mat-button routerLink="/component2">Button2</a>
<a mat-button routerLink="/component3">Button3</a>
<a mat-button routerLink="/login">Login</a>
<a mat-button routerLink="/logout">Logout</a>
</div>
</mat-toolbar>
</div>
How can I do this in proper way and still have responsive site?
You can use flexbox like this:
Add a class to your div and add container to specify "right and left block"
.container {
display: flex;
justify-content: space-between;
}
<div fxShow="true" fxHide.lt-md="true" class="container">
<div>
<a mat-button routerLink="/component1">Button1</a>
<a mat-button routerLink="/component2">Button2</a>
<a mat-button routerLink="/component3">Button3</a>
</div>
<div>
<a mat-button routerLink="/login">Login</a>
<a mat-button routerLink="/logout">Logout</a>
</div>
</div>
The 3 buttons will be on the left and Login, Logon on the right
I'm using this library: https://www.npmjs.com/package/#angular/flex-layout for easier alignment
After installing the library, use this snippet in your code
<div fxShow="true" fxHide.lt-md="true" fxLayout="row" fxLayoutAlign="space-between center">
<div fxLayout="row" fxLayoutAlign="start center">
<a mat-button routerLink="/component1">Button1</a>
<a mat-button routerLink="/component2">Button2</a>
<a mat-button routerLink="/component3">Button3</a>
</div>
<div>
<a mat-button routerLink="/login">Login</a>
<a mat-button routerLink="/logout">Logout</a>
</div>
</div>
I have a dashboard (MVC Razor + Bootstrap) navigation bar with these labels and badge
<span class="btn btn-danger" style="pointer-events: none;">Alert<span class="badge badge-pill badge-default">#alerts</span></span>
<span class="btn btn-warning" style="pointer-events: none;">Waring<span class="badge badge-pill badge-default">#warning</span></span>
<span class="btn btn-success" style="pointer-events: none;">Normal<span class="badge badge-pill badge-default">#normal</span></span>
I would like that on small screen show only badge. How can I do?
Thanks
use d-none d-md-inline d-lg-inline-bootstrap class name to hide particular elements on small screen.
I hope this is what u r expecting.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<span class="btn btn-danger"><span class="d-none d-md-inline d-lg-inline" style="pointer-events: none;">Alert</span><span class="badge badge-pill badge-default">#alerts</span></span>
<span class="btn btn-warning"><span class="d-none d-md-inline d-lg-inline" style="pointer-events: none;">Waring</span><span class="badge badge-pill badge-default">#warning</span></span>
<span class="btn btn-success"><span class="d-none d-md-inline d-lg-inline" style="pointer-events: none;">Normal</span><span class="badge badge-pill badge-default">#normal</span></span>
I'm having a problem implementing a toolbar for kendo grid. The problem is a partial view used to load a left-sided menu for a specific module in the website application.
So far, I have not been able to work around this, thus I'm asking here for help.
This is what the grid looks like without the left menu:
This is what the grid looks like with the left menu:
So far, this is what the menu code has:
<nav class="navbar navbar-default navbar-left" style="margin:0px; padding:0px; border-color:lightgray;">
<div class="collapse navbar-collapse" style="margin:0px; padding:0px;">
<ul class="nav navbar-">
#if (Request.IsAuthenticated)
{
<li>
<a href="#Url.Action("Index", "FicheiroIdqa")">
<span class="fa fa-circle" style="font-size:8px; vertical-align:middle;"></span> Ficheiros Idqa
</a>
</li>
<li>
<a href="#Url.Action("Index", "ZaPe")">
<span class="fa fa-circle" style="font-size:8px; vertical-align:middle;"></span> ZaPes
</a>
</li>
<li>
<a href="#Url.Action("Index", "LocalColheita")">
<span class="fa fa-circle" style="font-size:8px; vertical-align:middle;"></span> Locais Colheita
</a>
</li>
<li>
<a href="#Url.Action("Index", "FamiliaParametro")">
<span class="fa fa-circle" style="font-size:8px; vertical-align:middle;"></span> FamÃlias Parâmetro
</a>
</li>
<li>
<a href="#Url.Action("", "")">
<span class="fa fa-circle" style="font-size:8px; vertical-align:middle;"></span> Editais
</a>
</li>
<li>
<a href="#Url.Action("Index", "Resultados")">
<span class="fa fa-circle" style="font-size:8px; vertical-align:middle;"></span> Export. Resultados
</a>
</li>
}
</ul>
</div>
And this is the code in the view, where I am calling the partial with the menu:
#model List<INL.InLabLimsAqua.OnlineResults.WebApp.ViewModels.FicheiroIdqaViewModel>
#{ ViewBag.Title = "Ficheiros Idqa"; }
<h5>#Html.ActionLink("Ersar", "Index", "Ersar") > #ViewBag.Title</h5>
<hr />
<div class="col-md-2" style="padding-left:0px; width:200px;">
#Html.Partial("~/Views/Ersar/_ErsarMenu.cshtml")
</div>
<div class="col-md-offset-1" style="padding-left:95px;">
...
grid configuration
...
</div>
I think the problem resides in the fact that the toolbar is being loaded in the same row as the left menu, and it pushes it down with its height.
Any help to fix this would be much appreciated.
The html.Partial doesn't working very well, in fact it shows just path ~/Views/Shared/IconMenuPSA.cshtml, instead of showing the HTML content.
Where am I doing wrong?
My simple custom Helper in App_Code folder:
Helper
#using System.Web.Mvc.Html
#helper DefaultTitle(System.Web.Mvc.HtmlHelper html, string content) {
<br />
<div class="well well-sm text-center text-primary">
html.Partial("~/Views/Shared/IconMenuPSA.cshtml")
<p style="font-size:x-large">#content</p>
</div>
}
View
#model DatiGeneraliViewModel
#{
ViewBag.Title = "DatiGenerali";
Layout = "~/Views/Shared/_LayoutMainPage.cshtml";
}
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryui")
#Scripts.Render("~/bundles/bootstrap")
#MyHelper.DefaultTitle(Html, "Dati Generali")
PartialView
<div style="float:left">
<!-- Split button -->
<div class="btn-group">
<a href="MainPage" class="btn btn-primary" title="Torna al cruscotto">
<span class="glyphicon glyphicon-tasks"></span>
</a>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Cruscotto</li>
<li role="separator" class="divider"></li>
<li>Dati Generali</li>
<li role="separator" class="divider"></li>
<li>Riepilogo </li>
</ul>
</div>
</div>
How do I fix this?
Thanks.