I develop an angular application. If I build my application with the command ng build --prod, I get the following error
Invalid ICU message. Missing '}'. ("
</div>
<!-- Copyright -->
</footer>
[ERROR ->]"):
I dont know what this error means and where I have to search to fix it.
My code is the following in the app.html
<div class="">
<router-outlet></router-outlet>
</div>
<!-- Footer -->
<footer class="page-footer font-small blue pt-4">
<!-- Footer Links -->
<div class="container-fluid text-center text-md-left">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-6 mt-md-0 mt-3">
<!-- Content -->
<img id="logo" style="max-width:200px; margin: 0 auto" src="../assets/img/logo.png"/>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none pb-3">
<!-- Grid column -->
<div class="col-md-3 mb-md-0 mb-3">
<!-- Links -->
<h5 class="text-uppercase">Kategorie</h5>
<ul class="list-unstyled">
<li>
<a routerLink="/overview" [queryParams]={categorie:'Shopping',subcategorie:'topcategorie'}>
Shopping</a>
</li>
<li>
<a routerLink="/overview" [queryParams]={categorie:'Hotels_Flüge',subcategorie:'topcategorie'}>
Hotels & Flüge</a>
</li>
<li>
<a routerLink="/overview" [queryParams]={categorie:'DSL_Handy',subcategorie:'topcategorie'}>
DSL & Handy</a>
</li>
<li>
<a routerLink="/overview" [queryParams]={categorie:'Versicherungen',subcategorie:'topcategorie'}>
Versicherungen</a>
</li>
<li>
<a routerLink="/overview" [queryParams]={categorie:'Kredite_Konto',subcategorie:'topcategorie'}>
Kredite & Konto</a>
</li>
<li>
<a routerLink="/overview" [queryParams]={categorie:'Gas_Strom',subcategorie:'topcategorie'}>
Gas & Strom</a>
</li>
</ul>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-3 mb-md-0 mb-3">
<!-- Links -->
<h5 class="text-uppercase">Unternehmen</h5>
<ul class="list-unstyled">
<li>
<a routerLink="/impressum">Impressum</a>
</li>
<li>
<a routerLink="/datenschutz">Datenschutz</a>
</li>
<li>
<a routerLink="https://www.facebook.com/">Facebook</a>
</li>
<li>
<a routerLink="https://www.facebook.com/">Instagram</a>
</li>
</ul>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2020 Copyright:
tzu
</div>
<!-- Copyright -->
</footer>
Can someone tell me, what this error means and how to fix it ? I hope someone can help me.
Thank you in advance for your help.
Wrap your queryParams in double quotes:
[queryParams]="{categorie:'Shopping',subcategorie:'topcategorie'}"
Related
I have a simple static HTML site with a header.html file I'd like to reuse on each of the pages. I followed the suggestion from how to load header and footer before the content using jquery.load() which appeared to work but caused the drop-down on hover no longer function (must be clicked). The top is the navbar using jQuery.load, the bottom is identical code placed inline within my index.html. My css and js files are all included in my index.html file, not in the header.html file. Any thoughts on why this is occurring?
In my header, I have the code below:
<script>
$(document).ready(function() {
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
..and to include the header/footer I have:
<div id="header"></div>
Contents of my current header.html file:
<section class="header-uper">
<div class="container clearfix">
<div class="logo">
<figure>
<a href="index.html">
<img src="images/logo.png" alt="" width="250em">
</a>
</figure>
</div>
<div class="right-side header-padding">
<ul class="contact-info">
<li class="item">
<div class="icon-box">
<i class="fa fa-envelope-o spacer"></i>
</div>
<strong>Email</strong>
<br>
<a href="#">
<span>customer email</span>
</a>
</li>
<li class="item">
<div class="icon-box">
<i class="fa fa-phone spacer"></i>
</div>
<strong>Call Now</strong>
<br>
<span>customer #</span>
</li>
</ul>
</div>
</div>
</section>
<header class="navbar navbar-default">
<div class="container">
<div class="HeaderRow">
<div class="col-md-12">
<!-- header-right start -->
<!-- ================ -->
<div class="header-right clearfix">
<!-- main-navigation start -->
<!-- ================ -->
<div class="main-navigation animated">
<!-- navbar start -->
<!-- ================ -->
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar">
<li class="active">Home</li>
<li class="dropdown">
Our Practice <span class="caret"></span>
<ul class="dropdown-menu">
<li>About Dr. Eaton</li>
<li>Staff</li>
<li>Our Office</li>
<li>Services</li>
</ul>
</li>
<li class="dropdown">
Education <span class="caret"></span>
<ul class="dropdown-menu">
<li>Eye Education</li>
<li>Covid 19 Safety Plan</li>
</ul>
</li>
<li>Optical</li>
<li>Insurances</li>
<li>Forms & Contact Us</li>
</ul>
</div>
</div>
</nav>
<!-- navbar end -->
</div>
<!-- main-navigation end -->
</div>
<!-- header-right end -->
</div>
</div>
</div>
</header>
Reposting as an answer for that lucrative reputation...
You state that you are loading content into here:
<div id="header"></div>
It sounds like this is adding a new element into the DOM, which may break your CSS selector specifications if you're not ready for a div#header to appear in the middle of them. I'd look here first.
The other issue is that the DOM is going to be ready and the <header> will not have been loaded yet. You're then using jQuery to load new elements into the DOM, and those elements may still need to be initialized once the DOM has finished loading the new HTML.
I am trying to use the laravel helper method for active the sidebar but it does not working. Can anyone tell us how to apply Laravel helper method to this sidebar.
Here this is my sidebar.blade.php file
<aside class="main-sidebar sidebar-dark-primary">
<!-- Main Sidebar Container -->
<!-- Brand Logo -->
<a href="{{url('dashboard')}}" class="brand-link">
<img src="{{asset('assets/adminlte-boot-4/dist/img/AdminLTELogo.png')}}" alt="Digital CRM" class="brand-image img-circle elevation-3"
style="opacity: .8">
<span class="brand-text font-weight-light">DIgital CRM</span>
</a>
<!-- Sidebar -->
<div class="sidebar-menu">
<!-- Sidebar user panel (optional) -->
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<!-- Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library -->
<li class="nav-item">
<a href="{{url('dashboard')}}" class="nav-link">
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>Dashboard</p>
</a>
</li>
<li class="nav-item">
<a href="{{url('webtolead')}}" class="nav-link">
<i class="nav-icon fas fa-file"></i>
<p>Web to Lead</p>
</a>
</li>
</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>
Solution for this: add these method in your tag:
<li class="nav-item">
<a href="{{url('accounts')}}" class="nav-link {{ request()->is('accounts*') ? 'active' : '' }}">
<i class="nav-icon fas fa-user"></i>
<p>Accounts</p>
</a>
</li>
OR
<li class="nav-item ">
<a href="{{url('admin/updateprofile')}}" class="nav-link {{ Request::is('*admin/updateprofile*')? 'active' : '' }}">
<i class="fas fa-user nav-icon"></i>
<p>ProfileEdit</p>
</a>
</li>
both method are working...
Creating helper.php is good but this method is short in my case.
<aside class="main-sidebar sidebar-dark-primary">
<!-- Main Sidebar Container -->
<!-- Brand Logo -->
<a href="{{url('dashboard')}}" class="brand-link">
<img src="{{asset('assets/adminlte-boot-4/dist/img/AdminLTELogo.png')}}" alt="Digital CRM" class="brand-image img-circle elevation-3"
style="opacity: .8">
<span class="brand-text font-weight-light">DIgital CRM</span>
</a>
<!-- Sidebar -->
<div class="sidebar-menu">
<!-- Sidebar user panel (optional) -->
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<!-- Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library -->
<li class="nav-item">
<a href="{{url('dashboard')}}" class="nav-link {{ request()->is('dashboard') ? 'active' : '' }}">
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>Dashboard</p>
</a>
</li>
<li class="nav-item">
<a href="{{url('webtolead')}}" class="nav-link {{ request()->is('webtolead*') ? 'active' : '' }}">
<i class="nav-icon fas fa-file"></i>
<p>Web to Lead</p>
</a>
</li>
</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>
Im trying to make the top of the webpage so its a grid of ratio 3:6 with the section on the left being a square image. and the section on the right being split horizontally in 2 with the top half being a bar with the title and the bottom half a naviagtion bar. this is my code. unfortuanetly the title is not appearing at all, and the image is appearing on top of the navigation bar and also not filling the width of the screen. Im really not sure what the problem. any help would be great! thanks
<div class="col-sm-6 col-md-3 col-lg-3 col-xl-3">
<img ng-src="img/sky-logo.jpg" width="200px"/>
</div>
<div class="col-sm-6 col-md-9 col-lg-9 col-xl-9 ">
<div id="top">
<div class="container">
<div class="clearfix">
<div class="pull-center"><title> title </title></div>
</div>
</div>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#link1">link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#link2">link 2</a>
</li>
</ul>
</nav>
</div>
<div ng-view></div>
</body>
for title you should use headings instead as <title> tag defines a title in the browser toolbar and should be placed in <head></head>
for layout that you described you can try the following code
<div class="col-sm-12">
<!-- for ratio 3:6 -->
<div class="col-sm-4">
<img ng-src="img/sky-logo.jpg" style="width:200px" />
</div>
<!-- for ratio 3:6 -->
<div class="col-sm-8">
<!-- top half -->
<div class="col-sm-12">
<div id="top">
<div class="container">
<div class="clearfix">
<div class="pull-center">title</div>
</div>
</div>
</div>
</div>
<!-- bottom half -->
<div class="col-sm-12">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#link1">link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#link2">link 2</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
I would like that my navbar is floating right. I tried to set the <ul class="nav navbar-nav float="right", but the navbar is still centered. I am quite sure that the float should be on this tag? I also tried with text-align:right;, which did not work either.
Is there something I am missing here?
HTML
<!-- page wrapper start -->
<!-- ================ -->
<div class="page-wrapper">
<!-- header-container start -->
<div class="header-container">
<!-- header start -->
<!-- classes: -->
<!-- "fixed": enables fixed navigation mode (sticky menu) e.g. class="header fixed clearfix" -->
<!-- "dark": dark version of header e.g. class="header dark clearfix" -->
<!-- "full-width": mandatory class for the full-width menu layout -->
<!-- "centered": mandatory class for the centered logo layout -->
<!-- ================ -->
<header class="header fixed clearfix">
<div class="container">
<div class="row">
<div class="col-md-3 ">
<!-- header-left start -->
<!-- ================ -->
<div class="header-left clearfix">
<!-- header dropdown buttons -->
<div class="header-dropdown-buttons visible-xs">
<div class="btn-group dropdown">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown"><i class="icon-search"></i></button>
<ul class="dropdown-menu dropdown-menu-right dropdown-animation">
<li>
<form role="search" class="search-box margin-clear">
<div class="form-group has-feedback">
<input type="text" class="form-control" placeholder="Search">
<i class="icon-search form-control-feedback"></i>
</div>
</form>
</li>
</ul>
</div>
</div>
<!-- header dropdown buttons end-->
<!-- logo -->
<div id="logo" class="logo">
<img id="logo_img" src="http://<?php echo $_SERVER['HTTP_HOST'] ?>/images/graphics/logo.png" >
</div>
</div>
<!-- header-left end -->
</div>
<div class="col-md-9">
<!-- header-right start -->
<!-- ================ -->
<div class="header-right clearfix">
<!-- main-navigation start -->
<!-- classes: -->
<!-- "onclick": Makes the dropdowns open on click, this the default bootstrap behavior e.g. class="main-navigation onclick" -->
<!-- "animated": Enables animations on dropdowns opening e.g. class="main-navigation animated" -->
<!-- "with-dropdown-buttons": Mandatory class that adds extra space, to the main navigation, for the search and cart dropdowns -->
<!-- ================ -->
<div class="main-navigation animated with-dropdown-buttons">
<!-- navbar start -->
<!-- ================ -->
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<!-- main-menu -->
<ul class="nav navbar-nav" float="right">
<!-- mega-menu start -->
<li class="mega-menu">
Hjem
</li>
<!-- mega-menu end -->
<!-- mega-menu start -->
<li class="dropdown mega-menu">
Kompetencer
<ul class="dropdown-menu">
<li>
<div class="row">
<div class="col-lg-8 col-md-9">
<div class="row">
<div class="col-sm-4">
<h4 class="title">UX/UI</h4>
<div class="divider"></div>
<ul class="menu">
<li ><i class="fa fa-angle-right"></i>UX/UI</li>
<li ><i class="fa fa-angle-right"></i>Prototyping</li>
<li ><i class="fa fa-angle-right"></i>Web Design</li>
<li ><i class="fa fa-angle-right"></i>Grafisk Design</li>
</ul>
</div>
<div class="col-sm-4">
<h4 class="title">Webudvikling</h4>
<div class="divider"></div>
<ul class="menu">
<li ><i class="fa fa-angle-right"></i>Webudvikling</li>
<li ><i class="fa fa-angle-right"></i>PHP & MySQL databaser</li>
<li ><i class="fa fa-angle-right"></i>Wordpress</li>
<li ><i class="fa fa-angle-right"></i>Umbraco</li>
<li ><i class="fa fa-angle-right"></i>Joomla</li>
</ul>
</div>
<div class="col-sm-4">
<h4 class="title">Marketing Automation</h4>
<div class="divider"></div>
<ul class="menu">
<li ><i class="fa fa-angle-right"></i>Mautic</li>
<li ><i class="fa fa-angle-right"></i>Landesider</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-3 hidden-sm">
<h4 class="title">Oversigt over kompetencer</h4>
<p class="mb-10"><u>En oversigt over alle mine kompetencer</u></p>
<img src="http://<?php echo $_SERVER['HTTP_HOST']?>/images/graphics/kompetencer.png" alt="The Project">
</div>
</div>
</li>
</ul>
</li>
<li class="mega-menu">
Portfolio
</li>
<!-- mega-menu end -->
<li class="dropdown ">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Profil</a>
<ul class="dropdown-menu">
<li>Uddannelse</li>
<li >Erhvervserfaring</li>
<li >Personlighed</li>
</ul>
</li>
<li class="mega-menu">
Artikler
</li>
<!-- mega-menu start -->
<!-- mega-menu start -->
<li class="mega-menu">
Kontakt
</li>
</ul>
<!-- main-menu end -->
</div>
</div>
</nav>
<!-- navbar end -->
</div>
<!-- main-navigation end -->
</div>
<!-- header-right end -->
</div>
</div>
</div>
</header>
<!-- header end -->
</div>
<!-- header-container end -->
There are few reasons it is positioned to the left. You need to target the container that the nav is in first. It has a padding to the right. Remove this:
.with-dropdown-buttons .navbar-default .navbar-collapse {
padding-right: 0;
}
Then you can float the navbar to the right, but you'll need to be specific about screen widths.
#media (min-width: 768px) {
.navbar-nav {
float: right;
}
}
This works for me when I make these changes in the developer tools. If it doesn't work you will need to check if it correctly overriding bootstrap CSS, or you can use !important.
EDIT
You might also want to remove the padding on the last menu item, to make it flush with the edge of your container. You can try:
.navbar-default .navbar-nav > li:last-child > a {
padding-right: 0;
}
float is a CSS attribute. You may use it this way:
<ul class="nav navbar-nav" style="float: right;">
...
</ul>
Note that UL is a block tag and covers all the width. So, if you want it to fill less that all of the window's width, you should set the width attribute for it as well.
<ul class="nav navbar-nav" style="float: right; width: 800px;">
...
</ul>
I have 2 html files x and y.html. And I try 2 different ways to solve this problem:How I include html files wihout iframe and javascript?
it is menu file y. html
<!--sidebar start-->
<aside>
<div id="sidebar" class="nav-collapse">
<!-- sidebar menu start-->
<div class="leftside-navigation">
<ul class="sidebar-menu" id="nav-accordion">
<li>
<a class="active" href="index.html">
<i class="fa fa-dashboard"></i>
<span>Home</span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:;">
<i class="fa fa-tasks"></i>
<span>Lists</span>
</a>
<ul class="sub">
<li>Shopping List</li>
<li>To-Do List</li>
</ul>
</li>
<li class="sub-menu">
<a href="profile.html">
<i class="fa fa-glass"></i>
<span>Profil</span>
</a>
</li>
<!-- sidebar menu end-->
</div>
</aside>
<!--sidebar end-->
an it is main index page x.html
<!--sidebar start-->
<aside>
<div id="sidebar" class="nav-collapse">
<!-- sidebar menu start-->
<!-- MENU SHOULD BE HERE-->
<!-- sidebar menu end-->
</div>
</aside>
You can't do that with html.
But you can use PHP
<?php include("menu.html"); ?>
So in your case:
<!--sidebar start-->
<aside>
<div id="sidebar" class="nav-collapse">
<!-- sidebar menu start-->
<?php include("menu.html"); ?>
<!-- sidebar menu end-->
</div>
</aside>
Make sure your server supports PHP.