When I change the path to the correct routes in the url bar I get where I need to go and everything displays correctly. The actual router links are not taking me anywhere.
I have NgModule, Routes and RouterModule all imported properly in my only module. I have my components imported properly. router-outlet is properly placed. I have base href="/" in the head of my index.html.
Here is part of my html:
<section class="vertical-sidebar collapse navbar-collapse justify-content-end" id="navbarSidebarContent-main"
[ngClass]="{'show':displaySideNav}">
<nav class="nav">
<ul class="sidebar-links">
<li>
<a routerLink="/home">Home</a>
</li>
<li>
<a routerLink="/manage-sessions">Manage Sessions</a>
</li>
<li>
<a routerLink="/export-scancodes">Export ScanCodes</a>
</li>
<li>
<a routerLink="/imu-data">IMU Data</a>
</li>
<li>
<a routerLink="/global-order-days">Global Order Days</a>
</li>
<li>
<a routerLink="/order-exception-report">Order Exception Report</a>
</li>
</ul>
</nav>
</section>
I expect to be directed to the correct path when I click on the link. Nothing happens when I do so.
Try as mentioned in docs
<ul class="sidebar-links">
<li>
<a routerLink="/home">Home</a>
</li>
....
</ul>
After a lot of trail and error yesterday I realized the issue came because a lot of the code had been given to me as boilerplate code that had been manually upgraded from Angular6 to 8. I created a new project in the cli from scratch and copied over my components and had no issues.
Related
I want to create a form in angular, I have one problem. I would like this form to have a tab menu that does not move to subpages, so as not to lose data. I used to have a similar form not in Angular and used this method. But I don't know what's best in angular, not to make subpages, just everything on one page, so that the data when switching to tabs don't disappear. Please help.
<li>
<a data-toggle="tab" href="#User-details">User details</a>
</li>
<li>
<a data-toggle="tab" href="#Account-details">Account details</a>
</li>
<li>
<a data-toggle="tab" href="#validateSubmit">ValidateSubmit</a>
</li>
<li>
<a data-toggle="tab" href="#submitFlag">submitFlag</a>
</li>
<li>
I have a problem with Thymeleaf: I want to show a list with a linkable sublist.
Without th:if condition no problem, but when I put It, It doesn't render the link to the controller
<ul th:each="f : ${folders}">
<li>
<span th:text="${f.name}"></span>
<ul th:each="s : ${f.getSub}">
<li th:if="${s.status}">
<span class="disabled" th:text="${s.nome}"></span>
</li>
<li th:unless="${s.status}">
<a th:text="${s.name}" th:ref="#{/GoToController(s_id=${s.id},d_id=${documentid} ) }">
</a>
</li>
</ul>
</li>
</ul>
It shows me the folder and subfolder list: when the if condition is true it makes the subfolder not selectable and if it's false, it shows the linkable name of the subfolder.
Using the Chrome inspector I find out that the #Gotocontroller doesn't exist
I'm just learning html to build a team site at work. I'm getting the hang of it pretty easily, but I'm having an issue with subfolders not showing in a dropdown. The html is linked to css for a design, but I know the problem isn't with the css.
I'm not exactly sure what to try as I mentioned I am just learning how to code the html.
<li class="top"><span class="down">Folders</span>
<ul class="hsolinks">
<li><span class="down">HIPAA Security Office</span></li>
<ul class="hsolinks">
<li>Access</li>
<li>Audit</li>
<li>LAN File Access</li>
<li>Training</li>
</ul>
The expected result is that the folders "ACCESS", "AUDIT", "LAN FILE ACCESS", and "TRAINING" would show under the HIPAA Security Office in a css dropdown. However, when I place the code into SharePoint it only shows an arrow, but no folders in the dropdown under HIPAA Security Office.
Also, there is additional code under this which is why I have only closed one ul tag. I hope I'm clear with what I'm trying to do!
The <li> element always needs to be surrounded by a <ul> element. But you can have a <ul> inside an <li> if needed. Something like so will work
<ul>
<li class="top">
<a href="#nogo4" id="hsolinks" class="top_link">
<span class="down">Folders</span>
</a>
<ul class="hsolinks">
<li>
<a href="#" target="_parent" class="hsolinksfly">
<span class="down">HIPAA Security Office</span>
</a>
<ul class="hsolinks">
<li>
Access
</li>
<li>
Audit
</li>
<li>
LAN File Access
</li>
<li>
Training
</li>
</ul>
</li>
</ul>
</li>
</ul>
For more information and examples about the <ul> <li> elements read: ul: The Unordered List element
I am working on a bespoke WordPress build and for some reason, I just cannot get some anchor links to work. It's driving me potty and I just don't know what the problem is.
I have discovered, static anchor links are working fine (the back to top button works). However, I am using Advanced Custom Fields to generate ID's for the anchor tags. The IDs are generating correctly, but won't work as anchor tags.
Anyone have any ideas? The bit I am referring to is the service boxes near the bottom of the page. The idea being you click on these and that they will take you to the services page, and down to the relevant section.
The markup I am using is:
<ul class="cf">
<li>
<div>
<a href="/services/#dimensional-surveys">
<div class="filter"></div>
<img width="500" height="600" src="pexels-photo-175771-500x600.jpeg" class="attachment-feature size-feature" alt="" />
<h3>3D Dimensional Surveys</h3>
</a>
</div>
</li>
</ul>
<ul class="service-list cf">
<li id="#dimensional-surveys">
<div class="feature" style="background-image:url(pexels-photo-175771.jpeg);">
</div>
</li>
</ul>
Just remove the # from id and it will work.
<ul>
<li id="example"></li>
</ul>
I have looked at your page
The point where an ancor should jump to should have no #
You do: <li id="#dimensional-surveys">
But do just <li id="dimensional-surveys">
Fix that first and test again.
You don't want the '#' on the anchor: <li id="#example"></li> should be <li id="example"></li>
Ok so i've been searching for an answer to this for a while and althought there are lots of queries along the same lines, none of them are solving my problem.
Using the following code, I am trying to link a button to a section further down the page..
<img src="assets/images/seetheapp.png" alt="Download the App" width="300" height="48" style="margin-bottom: 100px;">
calling it using..
<a id="tour"></a>
works fine on desktop but not at all on iPhone (even pop up options not working) and only works on iPad in landscape mode... i'm completely stumped!
It is currently live (pulsatedate.com) so need to get it sorted asap.
Linking to the existing section/div id rather than an anchor has been a suitable work around in this instance.
<img src="assets/images/seetheapp.png" alt="Download the App" width="300" height="48" style="margin-bottom: 100px;">
Look carefully at the <head> tag and find maybe some file override and disable anchoring I had this case:
forgot about disabling jquery.mobile-1.4.2.js because I had used before replacing to other framework and forgot to delete or comment
With some jquery, when clicking on the anchor element hide or remove your active class
here is sample code,
<header class="header-section">
<ul class="main-menu">
<li>
<a href="#home" class="js-hide-header">
Home
</a>
</li>
<li>
<a href="#about" class="js-hide-header">
About
</a>
</li>
<li>
<a href="#service" class="js-hide-header">
Services
</a>
</li>
<li>
<a href="#contact" class="js-hide-header">
Contact
</a>
</li>
</ul>
</header>
inside .js file
$(".js-hide-header").on('click', function(e) {
$('.header-section').removeClass('active');
});