DropLeft 's position is wrong - html

I designed a navbar with bootstrap4.in the right side of navbar I have my links.
when I place a drop left on the navbar, the drop left opens in the wrong place.
What is the problem?
my HTML:
<li class="nav-item dropleft">
<button class="btn bg-white nav-link text-dark dropdown-toggle" id="dd" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >MORE</button>
<div class="dropdown-menu" aria-labelledby="dd">
sadasd
</div>
</li>
This is What happens:
https://i.stack.imgur.com/Yakc3.png

This is a known issue in Bootstrap 4.0.0: https://github.com/twbs/bootstrap/issues/25304
As you can see in the comments, it's unknown if dropleft/right will be supported inside the navbar because of the way the popper.js positioning works.
This affects dropup, dropleft and dropright.

Related

Boostrap 4 dropdown menu is exceeding the page on the right

I added a dropdown menu to my bootstrap4 navbar, but the dropdown menu exceeds the page by quite a bit (on the right side).
I tried applying a few things I saw on google like adding dropdown-menu-left or drop-left but both haven't worked for me. The only thing that works at the moment is applying margin-right to the element but that's not what I want since it ruins the format of my navbar.
https://imgur.com/a/jpCWi3e
My html
<!-- right side -->
<ul class="navbar-nav ml-auto">
#if (isset($_SESSION['user_data']))
<!-- Dropdown -->
<li class="nav-item dropdown" style="right: 0;">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
{{$_SESSION['user_data']->username}}
</a>
<div class="dropdown-menu dropleft">
<a class="dropdown-item" href="{{ url('/servers') }}">Manage servers</a>
<a class="dropdown-item" href="{{ url('/logout') }}">Logout</a>
</div>
</li>
#else
#endif
</ul>
Have you tried dropdown-menu-right on your dropdown-menu ?
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="{{ url('/servers') }}">Manage servers</a>
<a class="dropdown-item" href="{{ url('/logout') }}">Logout</a>
</div>
Here's a fiddle for that (try to enlarge the preview window if you see the mobile layout).
Is it what you're looking for?
See bootstrap4 documentation for more details on menu alignment

Strange effect in data-toggle

I have a bootstrap navbar in my site but when it is shown collapse, if click on a link the menu does not close, and I would like navigate to the page and the menu will also be closed.
I've added
data-toggle="collapse" data-target="#navbarNav"
And do the trick, but the link have a strange effect when is not collapse (in a desktope mode)
I create a fiddle:
http://jsfiddle.net/soyjuanmedina/rscdu7gv/3/
An add the code to the link 'Home' and you can see (you need to expand the result window to see the menu not collapsed) and see when click in it the words disappear to appear again
This is happening because the menu when on desktop doesn't dissapear it just changes its layout so it will still try and collapse it.
If you just need a fix for this and don't mind it being a bit messy, here's what I came up with.
Have two elements, one that will be visible on mobile and one that will be visible on desktop like this (pay attention to the classes)
Mobile:
<a class="nav-link d-block d-md-none" href="#" data-toggle="collapse" data-target="#navbarSupportedContent">
Home
</a>
Desktop:
<a class="nav-link d-none d-md-block" href="#">
Home
</a>
So final result would be:
<li class="nav-item active">
<a class="nav-link d-none d-md-block" href="#">
Home
</a>
<a class="nav-link d-block d-md-none" href="#" data-toggle="collapse" data-target="#navbarSupportedContent">
Home
</a>
</li>

PrimeNg confirmDialog make changes on my navbar

My navbar works really well and it is fully responsible, but when I open confirm dialog in background my navbar width goes to 800px even if screen has 1480px making an empty space on the right side like you can notice on the screen.
I really don't have idea how to fix it, this is my navbar:
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" routerLink="">frontend</a>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link menu-item dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Vehicles</a>
<div class=" dropdown dropdown-menu">
<a class="dropdown-item menu-item" routerLink="/topic"> Vehicles list </a>
<a class="dropdown-item menu-item" routerLink="/add-topic"> Add vehicle </a>
</div>
</li>
</ul>
</div>
</nav>
<router-outlet></router-outlet>
I use default confirm dialog from primeNg without any changes:
confirm dialog
Maybe I could somehow make additional css to navbar to make position allways on 100% of screen? Any ideas how could I do that?
You are using bootstrap navbar and primeng so some css are getting conflict. If you write below css in style.css so navbar working normal.
.ui-overflow-hidden {
position: unset !important;
}

Dropdown menu dynamically "generated" from Umbraco backend possible?

I am trying to populate my header with links. I have two dropdowns at the moment. I would like to populate the links using Umbraco and Razor, so nothing is hardcoded. This can be done quite easily (see code below), but populating the dropdowns is the tricky part.
I'm not sure how I would populate the dropdown in a good way. They are not subpages or anything like that, but they are simply dropdowns to make the header less wide. Here's how I populate my header using Razor by grabbing the links in Umbraco:
var home = CurrentPage.Site();
#foreach (var item in home.Children.Where("Visible"))
{
<li class="#(item.IsAncestorOrSelf(CurrentPage) ? "active" : null)">
#Umbraco.GetDictionaryValue(item.Name)
</li>
}
home.Children.Where("Visible") is simply grabbing all the child pages, where I have not checked the umbracoNaviHide.
This is currently how my header is created NOT using Umbraco (which I need to populate using the pages from Umbraco):
<nav class="navbar navbar-toggleable-lg navbar-light fixed-top">
<div class="d-flex align-items-center justify-content-between">
<button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand ml-3" href="/en">
<img src="logo.png" class="logo" alt="logo">
</a>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto justify-content-between full-width">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">About Us</a>
<a class="dropdown-item" href="#">History</a>
</div>
</li>
<li>
Our Products
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href id="navbarDropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Resources
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink2">
<a class="dropdown-item" href="#">Tips</a>
<a class="dropdown-item" href="#">News</a>
</div>
</li>
<li>
Contact Us
</li>
</ul>
</div>
</nav>
This will produce a result like this: https://codepen.io/anon/pen/QvyeRm
I don't want any of the links to be affected by this, as the links or pages doesn't really have anything to do with the header's layout. Here are some example URLs:
/en/about-us/
/en/history/
/en/our-products/
/en/tips/
I hope that makes sense.
Is there a good and easy way to do this?
There are a few ways that you could do this. the way I typically do main navigation on a site is to have a multiple content picker or similar to alow me to choose the items I want to show up in the navigation.
In your example, your sub-menu items aren't actually underneath the parent menu item. You could create a picker for each of the dropdowns, say on your home node, and choose the pages for each one?
If you plan to make the navigation more flexible though, you might need to do something a bit fancier, you could look at something like the Nested Content package to help you do this?
So I found a pretty good way of doing this. All I need to create is a content with document type set to Dropdown, then set the title (basically the label) and then add permissions for the children of the dropdown.
#foreach (var item in selection)
{
if (item.GetPropertyValue<bool>("showDropdown"))
{
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
#item.GetVortoValue("Title")
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
#foreach (var child in item.Children)
{
<a class="dropdown-item" href="#child.Url">#child.GetVortoValue("Title")</a>
}
</div>
</li>
}
else
{
<li>
#item.GetVortoValue("Title")
</li>
}
}
I started by creating a document type called "Dropdown". The sole purpose of this document type, is to be a parent for the pages inside the dropdown. Then I set the permissions to allow the two pages I have to be inside the dropdown, and I set the permissions on my Master to allow the dropdown document type.
Then I created a new property on the master document type, which is called "Show dropdown". If this is ticked, it will show the dropdown on the page. I had to do this, because pages with children (if(item.Children.Any())) would be true no matter what.

Bootstrap dropdown: working on text, not buttons?

I can easily use Bootstrap to create a button dropdown such as the following:
<div class="btn-group">
<button class="btn">Action</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
content goes here
</ul>
</div>
However, this creates a button and block element (?).
Is it possible to use Bootstrap's button dropdwon to create normal text (best to be inline), clicking on which produces a dropdown?
I am not talking about Bootstrap tooltip. I am hoping to use the dropdown to hold a more complex layout.
Thanks for any idea or suggestion!
So you want a link instead of a button to toggle the dropdown? use this markup:
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
<ul class="dropdown-menu">
You can add any content here
</ul>
</div>
You can also add
.dropdown {
display: inline-block;
}
To make it appear inline