mdb navbar keeps flipping height - css

I have a mdb navbar in my Angular app but the height of the navbar seems to flip to a bigger one randomly when reloading the page (Sometimes it keeps height, some other time it has increased height). Also, as soon as I open the developer console in Chrome the size adjusts back to normal which makes it hard to find the issue.
The following screenshots show 1.) how it should look like all the time and 2.) how it is displayed sometimes when I refresh the page:
My navbar is in a separated Angular component which I add to the app.component.html as it shows here:
<app-header></app-header>
<div class="d-flex p-2 justify-content-center">
<router-outlet></router-outlet>
</div>
The header itself is also pretty simple and looks almost like the provided example of mdb
<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark indigo" [containerInside]="false">
<mdb-navbar-brand>
<a class="navbar-brand" [routerLink]="'/dashboard'">Admin Console</a>
</mdb-navbar-brand>
<links>
<ul class="navbar-nav mr-auto">
<li class="nav-item" routerLinkActive="active">
<a class="nav-link waves-light" mdbWavesEffect [routerLink]="'/dashboard'">Dashboard</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link waves-light" mdbWavesEffect [routerLink]="'/todo'">Users</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link waves-light" mdbWavesEffect [routerLink]="'/todo'">A</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link waves-light" mdbWavesEffect [routerLink]="'/todo'">B</a>
</li>
</ul>
<span class="fill-remaining-space"></span>
<ul class="navbar-nav ml-auto">
<li *ngIf="!authService.isLoggedIn" class="nav-item">
<a class="nav-link waves-light" mdbWavesEffect [routerLink]="'/sign-in'">Login</a>
</li>
<li *ngIf="authService.isLoggedIn" class="nav-item">
<a class="nav-link waves-light" mdbWavesEffect (click)="this.authService.signOut()">Logout</a>
</li>
</ul>
</links>
</mdb-navbar>
I tried adding sticky-top as Sideclass which seems to improve the behavior when fixed content is inside the router-outlet. But as soon as I navigate to a component which feeds something more dynamic like a table into the router-outlet it happens again like shown here:
Any idea how to keep the navbar from growing?
Thank you!

This seems to be a bug in the component but I found out how to work around.
Apparently the div injected into nav has a style with is used for controllig the height when drop-down is active. This height is meant to be increased only in case of an active drop-down but in my case it got increased sporadically. So I used this CSS to limit the max-height of the navbar when it is not in drop-down mode:
:host ::ng-deep mdb-navbar nav div :not(.show) {
max-height: 40px !important;
}

Related

Auto margins with tabs in bootstrap 5

I'm learning to use bootstrap 5, so bear with me if this question seems a bit basic!
I'm toying around with tabs to generate tabbable panes of local content. I've used the code provided in the documentation here :
https://getbootstrap.com/docs/5.0/components/navs-tabs/#javascript-behavior
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>
And it works perfectly. It responds well also to justify-content, so the tabs are easy to center or distribute. Exactly what I am looking for.
But, I can't make them split with auto margins (mr-auto and ml-auto) so that, for example, the first two tabs will be aligned on the left and the last one on the right. When I include them in the ul tag, it is just ignored (while the justify-content work just fine)
I'm looking to do something like in the flex documentation :
https://getbootstrap.com/docs/4.0/utilities/flex/#auto-margins
or in Wikipedia where the article and talk tabs are on the left, and the read, edit and history are on the right.
How could I do that?
Change your last li like :
<li class="nav-item ms-auto" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
</li>
In Bootstrap 5,
t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
s - for classes that set margin-left or padding-left in LTR, margin-right or padding-right in RTL
e - for classes that set margin-right or padding-right in LTR, margin-left or padding-* left in RTL
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
blank - for classes that set a margin or padding on all 4 sides of the element
For More Info : here

pug seems to break bootstrap styling[resolved]

I'm trying to render a page with pug that displays either a welcome message or login/signup links. The message/links reside within a bootstrap navbar. My code is like the following:
.script
if user
document.getElementById('portal').innerHTML
<li class="nav-item">
<a class="nav-link" href="/account">Welcome! #{user.username}</a>
</li>
else
document.getElementById('portal').innerHTML
<li class="nav-item">
<a class="nav-link" href="/login">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/signup">Signup</a>
</li>
which causes the navbar's styling to break. The nav-items are originally supposed to be side by side.
Resolved, I wasn't paying attention to the finalized html structure, turns out a nested class is stopping the style from cascading as expected.

how can i replace text with css [duplicate]

This question already has answers here:
How can I replace text with CSS?
(25 answers)
Closed 2 years ago.
The text I need to replace is: "I'm Craftsman"
It is present in the following code:
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#craftsman_gateway" role="tab" data-toggle="tab" aria-expanded="true">I'm Craftsman</a>
</li>
It is possible to make it look as though there is text in an element using CSS. Actually what you are doing is creating a pseudo element, before or after, which you can style in a limited way and, importantly for this exercise, you can include content.
See this example which has an li element with text in the anchor element in the usual way, and another which has the text as content in a pseudo element. (I have given this li element an id just so I can distinguish it from the original one - you could use a class for example instead).
Note especially that the apostrophe (single quote) is a special character which has to be escaped using the backslash in the content setting. I guess this was part of the exercise to introduce this extra thing to have to consider.
<style>
#use-css::before {
content: 'I\'m Craftsman';
}
</style>
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#craftsman_gateway" role="tab" data-toggle="tab" aria-expanded="true">I'm Craftsman</a>
</li>
<li class="nav-item">
<a id="use-css" class="nav-link active" href="#craftsman_gateway" role="tab" data-toggle="tab" aria-expanded="true"></a>
</li>
</ul>
The following code is
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#craftsman_gateway" role="tab" data-toggle="tab" aria-expanded="true">I'm Craftsman</a>
</li>
Just change the I'm Craftsman.

Fix overflowing Bootstrap 4 horizontal Navbar content in ASP.NET Blazor app

I have overflowing content in my Blazor Server app 4 Navbar that I have positioned horizontally at the top of the page.
A search reveals I have the following four options for resolving this:
Reduce the number or width of navbar items.
Hide certain navbar items at certain screen sizes using responsive utility classes.
Change the point at which the navbar switches between collapsed and horizontal mode by using a media query.
Use the Priority+ Navigation Pattern at CSS-Tricks
Option 2 would do but I cannot find out how implement it.
Option 4 has some helpful implementation examples but these rely on JavaScript.
Because I'm using Blazor I want to use C# and not JavaScript.
Can anyone help me find a pattern or code for either option 2 or 4, but prefereably a Blazor implementation of option 4 the Priority+ Navigation Pattern.
I particularly like the demo CSS-Tricks calls the “Greedy Navigaton” example if anyone can Tell me how to Blazorize that.
To demonstrate the problem I have attached below some files that can replace the files of the same name that are generated using the VS 2019 Blazor Template.
Any comment most appreciated.
MainLayout.razor
#inherits LayoutComponentBase
<div class="toprow">
<NavMenu />
</div>
<div class="main">
<div class="content px-4">
#Body
</div>
</div>
NavMenu.razor
<nav class="navbar navbar-expand-md bg-dark navbar-dark ">
<!-- Brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link " href="/Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Long link Description One</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Long link Description Two</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Long link Description Three</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Long link Description Four</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Long link Description Five</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Long link Description Six</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Long link Description Seven</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Long link Description Eight</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Long link Description Nine</a>
</li>
</ul>
</div>
</nav>
#code {
private bool collapseNavMenu = true;
private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
private void ToggleNavMenu()
{
collapseNavMenu = !collapseNavMenu;
}
}
Index.razor
#page "/"

Bootstrap dropdown menu background ending on div

So my dropdowns all work fine but I've a main container div with a bg-color and as soon as the multi level dropdown menu goes over it the background doesn't display. The text is fine but the bg stops at the DIV margin.
I've tried using z-index at multiple stages even all the way up the nav div but nothing seems to work.
Has anyone experienced this before? Any ideas?
HTML Sample
<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1" style="z-index:1;">
<ul class="nav navbar-nav">
<li><i class="fa fa-lg fa-home"></i> Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-lg fa-cog"></i> Tools</a>
<ul class="dropdown-menu multi-level">
<li class="">MAC Lookup</li>
<li>Locate ISP</li>
<li>PG&E Power Outages</li>
<li class="divider"></li>

Resources