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.
Related
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;
}
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.
I have downloaded a template and now I want to set up links in the header. There are links like about us, contact us and service page.
I have tried links like this but clearly it is wrong.
<ul class="navbar-nav align-items-center">
<li class="nav-item">
<a class="nav-link" href="index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.php">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services.php">services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.php">Contact</a>
</li>
</ul>
When I tried to google it only results I have found is by adding menus in wordpress. Is there any other approach so that it can be completed on a coding level without using wordpress solution because when I tried to do same thing done here in the last part of video, I lost all my styles applied to the header menu. How do I solve this?
Since wordpress uses a routing system trying to go directly to about.php won't work. Try the following:
<a class="nav-link" href="/about">About</a>
I am using Bootstrap dropdown menu with angular. I want to make some menu items visible and invisible using the display property. Class hidden_item is defined as display:none. When the user logs in, it does show the "Messages" menu item but clicking on it does not show Inbox and Sent links. Later if I refresh the page, everything works as expected and Inbox and Sent become visible. How can I make it work without refreshing the page?
<li [ngClass]="isLoggedIn() ? 'dropdown' : 'hidden_item'">
<a [routerLink]="['Mailbox', {'boxname': 'inbox'}]" class="dropdown-toggle">Messages <span class="nav-up-carret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a [routerLink]="['Mailbox', {'boxname': 'inbox'}]">Inbox</a> </li>
<li><a [routerLink]="['Mailbox', {'boxname': 'sent'}]">Sent</a></li>
</ul>
</li>
You can use *ngIf and try it this way:
li *ngIf="isLogedIn()">
<a [routerLink]="['Mailbox', {'boxname': 'inbox'}]" class="dropdown-toggle">Messages <span class="nav-up-carret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a [routerLink]="['Mailbox', {'boxname': 'inbox'}]">Inbox</a> </li>
<li><a [routerLink]="['Mailbox', {'boxname': 'sent'}]">Sent</a></li>
</ul>
</li>
This way, angular will automatically remove the block from the dom if isLogedIn() returns false but will add it if it returns true.
If I understood your problem correctly, you are missing a data-toggle="dropdown" property in your 'Messages' anchor element.
It should be
<li [ngClass]="isLogedIn() ? 'dropdown' : 'hidden_item'">
<a [routerLink]="['Mailbox', {'boxname': 'inbox'}]" class="dropdown-toggle" data-toggle="dropdown">Messages <span class="nav-up-carret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a [routerLink]="['Mailbox', {'boxname': 'inbox'}]">Inbox</a> </li>
<li><a [routerLink]="['Mailbox', {'boxname': 'sent'}]">Sent</a></li>
</ul>
</li>
I was having some rendering issues with the old-style menu control getting Chrome to look correct, so I decided to switch and use the CSS Friendly Adapters (http://cssfriendly.codeplex.com/) to get my menu control to render as a list and hopefully have some more cross-browser consistency, well that hasn't worked either!
So I have styled my menus and they now work great with Chrome, Safari and Firefox, but not IE I have a basic horizontal list loaded from a datasource, with 1-13 items in the dynamic lists attached to them. In Chrome and Firefox now, after the menu is styled the dynamic menu items are appearing properly below the static menu items. But in IE(7/8) the dynamic menu items are appearing directly to the right of the currently hovered over static menu item (and with the first dynamic item behind the static menu item to the right of the current one)
Here is a screenshot of the menu working properly in Chrome:
http://i42.tinypic.com/2d3lom.png
And a screenshot of the same menu being hovered over in IE (in this case 8, but it looks the same in 7):
http://i39.tinypic.com/2vmc4kn.png
Here is the rendered HTML for the menu:
<div class="AspNet-Menu-Horizontal" id="ctl00_navMenu">
<ul class="AspNet-Menu">
<li class="AspNet-Menu-WithChildren AspNet-Menu-Selected">
Home
<ul>
<li class="AspNet-Menu-Leaf AspNet-Menu-ParentSelected">
Home
</li>
</ul>
</li>
<li class="AspNet-Menu-WithChildren">
<a href="javascript:void(0);" class="AspNet-Menu-Link">
Financial Systems</a>
<ul>
<li class="AspNet-Menu-Leaf">
Input Sales
</li>
<li class="AspNet-Menu-Leaf">
Upload Sales
</li>
</ul>
</li>
<li class="AspNet-Menu-WithChildren">
Reports
<ul>
<li class="AspNet-Menu-Leaf">
Prior
</li>
<li class="AspNet-Menu-Leaf">
Summary
</li>
<li class="AspNet-Menu-Leaf">
Monthly
</li>
</ul>
</li>
<li class="AspNet-Menu-WithChildren">
Administration
<ul>
<li class="AspNet-Menu-Leaf">
Shop Tracker
</li>
<li class="AspNet-Menu-Leaf">
Shop Upload
</li>
<li class="AspNet-Menu-Leaf">
Weekly Comp Metrics
</li>
<li class="AspNet-Menu-Leaf">
Weekly Comp Upload
</li>
<li class="AspNet-Menu-Leaf">
Estimate Maintenance
</li>
<li class="AspNet-Menu-Leaf">
User Maintenance
</li>
<li class="AspNet-Menu-Leaf">
Corporate Users
</li>
<li class="AspNet-Menu-Leaf">
Country ISO Code Maint
</li>
<li class="AspNet-Menu-Leaf">
Territory Rollup Maint
</li>
<li class="AspNet-Menu-Leaf">
Content Maintenance
</li>
<li class="AspNet-Menu-Leaf">
Edit System Message
</li>
<li class="AspNet-Menu-Leaf">
Menu Maintenance
</li>
<li class="AspNet-Menu-Leaf">
Change Password
</li>
</ul>
</li>
<li class="AspNet-Menu-WithChildren">
Help
<ul>
<li class="AspNet-Menu-Leaf">
<a href="help.aspx" class="AspNet-Menu-Link">
Help Menu</a>
</li>
</ul>
</li>
</ul>
</div>
And here is my CSS (same for IE and Chrome, but in the Chrome stylesheet I just add a gradient below this):
.AspNet-Menu li {color:#000000;line-height:20px;border:none;font-size:11px;font-weight:bold;}
.AspNet-Menu-WithChildren {width:150px;text-align:center;color:#FFFFFF;background:#940000;}
.AspNet-Menu-Selected {color:#000000;}
.AspNet-Menu-WithChildren a {color:#FFFFFF;}
.AspNet-Menu-Selected a {color:#000000;background:#FFCB0B;}
.AspNet-Menu-Leaf {background:#F0F0F0;width:150px;}
.AspNet-Menu-Leaf a {color:#000000;}
.AspNet-Menu-Leaf :hover, .AspNet-Menu-Leaf a :hover {background:#666666;color:#FFFFFF;}
Maybe try adding:
CSS
ul .AspNet-Menu-WithChildren ul {top:100%; float:none;}
I'm thinking that might force IE to put it where you need it to be. Not 100% sure, and wasn't able to try it on my local machine.