I have added a simple MDL drawer element to the 'Test Template' example (from getmdl.io) and set href='#overview' to link to the 'overview' content page. When clicking the relevant link in the drawer element, nothing happens! I was expecting the content section to render the 'overview' page similar to clicking the tab in the header section. Clearly, I must be doing something wrong. Here is a snippet showing the drawer element and the opening div element of the 'overview' page.
...</header>
<div class="mdl-layout__drawer">
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#overview">Overview</a>
<a class="mdl-navigation__link" href="#features">Features</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="mdl-layout__tab-panel is-active" id="overview">...
Any help would be much appreciated! Thanks.
which template is this in getmdl.io please?
I have done this:
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">Material Design Grid</span>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Material Design Tutorial</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#home">Home</a>
<a class="mdl-navigation__link" href="#about">About</a>
</nav>
</div>
<main class="mdl-layout__content">
...
</main>
</body>
and it's diplaying #href on the url and the page remains still.
cross-check your structure with that and if possible, give some more code I check on my end?
Related
I am following this tutorial
The Index page is in directory: Pages/Contacts
and it has anchor tag as shown below
Create New
This anchor does not render as href. it is rendered exactly as
<a asp-page="/Contacts/Create">Create New</a>
However if I write the url address Contacts/Create it takes me to the page. Also if write the tag as regular html tag it also works.
You need to make sure you put
<a class="navbar-brand" asp-area="" asp-page="/Contacts/Index">ContactManager</a>
into Pages/Shared/_Layout.cshtml file.
Here is a demo:
Pages structure:
_Layout.cshtml:
...
<div class="container">
<main role="main" class="pb-3">
<a class="navbar-brand" asp-area="" asp-page="/Contacts/Index">ContactManager</a>
#RenderBody()
</main>
</div>
...
Contacts/Index.cshtml:
#page
#model RazorPageDemo.Pages.Contacts.IndexModel
#{
}
<h1>Contacts/Index page</h1>
result:
When I click the burger menu on a small screen nothing happens. Of course, it works fine on a large screen. I have tried several "navbar" configurations. The included code at least compiles. I had a target defined : class="navbar-burger is active" data-target="navbar-menu" and an id for class="navbar-menu" id = "navbar-menu"
What am I missing?
<!-- logo -->
<div class="navbar-brand is-large">
<a class="navbar-item" href="#">
<img src="assets/img/Grayscale_cloud.png">
</a>
<div class="navbar-burger is active" data-target="navbar-menu">
<span></span>
<span></span>
<span></span>
</div>
</div>
<!-- menu -->
<div class="navbar-menu" id = "navbar-menu">
<div class="navbar-start">
<a class="navbar-item" routerLink="">Home</a>
<a class="navbar-item" routerLink="contact">Contact</a>
<a class="navbar-item" routerLink="networksupport">Network</a>
<a class="navbar-item" routerLink="managemnentreports">Management Reports</a>
</div>
</div>
</nav>
`,
I tried the code here to no avail. https://medium.com/#edigleyssonsilva/bulma-css-framework-with-angular-6-responsive-menu-and-navbar-burger-dff747ed2dc1
Several good examples here but I could not make them work with Bulma and Angular: I'm trying to use hamburger menu on bulma css, but it doesn't work. What is wrong?
Routing works as expected on a large browser. Burger menu appears on small screen but no appears when you press it.
there are a few things which might cause this for you - since you didn't paste a MCV example, i'll list them all
you didn't paste your toggle function for showing main-nav or burger nav... this is the toggle function (in app.component.ts) from the medium article link which you pasted
toggleNavbar() { this.navBurger.nativeElement.classList.toggle('is-active'); this.navMenu.nativeElement.classList.toggle('is-active'); }
to get this toggle function to work, you'd have to assign the names in app.component.html
you had <div class="navbar-menu" id = "navbar-menu"> ... which should have <div class="navbar-menu" id = "navbar-menu" #navMen>
and <a class="navbar-item" href="#"> .... </a> ...which should have
<a (click)="toggleNavbar()" role="button" #navBurger data-target="navbar-menu"> ... </a>
Also, we had to do npm install bulma
add the css in our angular.json:
"styles": ["node_modules/bulma/css/bulma.min.css" ],
you can check a working sample here
I am trying to get a sidemenu to work on Materialize when should be very simple:
First I add the sidenav content to the page:
<ul id="slide-out" class="sidenav">
<li><div class="user-view">
<div class="background">
<img src="images/office.jpg">
</div>
<img class="circle" src="images/yuna.jpg">
<span class="white-text name">John Doe</span>
<span class="white-text email">jdandturk#gmail.com</span>
</div></li>
<li><i class="material-icons">cloud</i>First Link With Icon</li>
<li>Second Link</li>
<li><div class="divider"></div></li>
<li><a class="subheader">Subheader</a></li>
<li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
</ul>
Then I add the jquery code:
$( document ).ready(function() {
$('.sidenav').sidenav();
});
And finally the part where to problem is:
I have a nav which goes at the top of the page:
<nav>
<div class="nav-wrapper">
<img src="icon.png" alt="" />
<ul class="left hide-on-med-and-down" style="position: relative; left: 100px;">
<li>Trigger SideNav</li><!-- This is just not showing -->
</ul>
</div>
</nav>
For some reason this menu is not showing:
<li>Trigger SideNav</li>
unless I take this off it ... data-target="slide-out" class="sidenav-trigger"
How can I fix this?
In addition to what Moein said (the sidenav-trigger menu only appears when the page width is less than 993px), you can make it appear all the same adding the show-on-large class to your menu button.
Something like:
<nav>
<div class="nav-wrapper">
<i class="material-icons">menu</i>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Menu</li>
<li>Info</li>
</ul>
</div>
</nav>
as I know this is not a problem and the element that has sidenav-trigger class will be shown when the width of the browser is less than 993px. just resize your browser window width to reach less than 993px and see the result.
If it does not work:
I think the problem can be with the content of your link. replace the image with a text and try again.
For reputation reasons, I'm not allowed to comment. It'll work with the javascript code
document.addEventListener('DOMContentLoaded', function(){
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems, {});
});
Instead of the code which is given in the official documentation you've to change this piece of code
M.Sidenav.init(elems, options);
with this
M.Sidenav.init(elems, {});
With the official javascript code you'll notice that there's an error in the console when you load the page.
I'm trying to give a different background-color to my button when it is active. The HTML code is as below.
<div class="tabs">
<div class="tab-content">
<div id="tab1" class="tab active">
<!-- some content -->
</div>
<div id="tab2" class="tab">
<!-- some content -->
</div>
<div id="tab3" class="tab">
<!-- some content -->
</div>
<ul class="tab-links">
<li class="active">
<a href="#tab1"><span class="numer_viti">bla bla</span>
<p class="arrow-up"><p class="cmimet_ne_vite">BUTTON ACTIVE</p></p></a>
</li>
<li>
<a href="#tab2"><span class="numer_viti">bla bla</span>
<p class="arrow-up"><p class="cmimet_ne_vite">BUTTON</p></p></a>
</li>
<li>
<a href="#tab3"><span class="numer_viti">bla bla</span>
<p class="arrow-up"><p class="cmimet_ne_vite">BUTTON</p></p></a>
</li>
</ul>
</div>
</div>
I used both this codes in my CSS files and i didn't sow nothing happened:
This is the CSS code for my project:
.cmimet_ne_vite:active
{
background:#787878;
}
.cmimet_ne_vite.active
{
background:#787878;
}
So who knows were is the problem to help me resolve it?
You have no element with both classes "cmimet_ne_vite" and "active". Instead you have a .cmimet_ne_vite element which is a descendant of your .active element, so instead of .cmimet_ne_vite.active you'll need to use:
.active .cmimet_ne_vite {
background:#787878;
}
Furthermore, you cannot wrap two <p> elements within each other. The browser will render this as two separate elements. Change:
<p class="arrow-up">
<p class="cmimet_ne_vite">BUTTON</p>
</p>
To:
<p class="arrow-up">
<span class="cmimet_ne_vite">BUTTON</span>
</p>
Or something similar.
Finally, if this element is intended to be used as a button you'll need to give it a role attribute set to "button":
<span class="cmimet_ne_vite" role="button">BUTTON</span>
![I want to achieve the following red circle through css. I am using jquery mobile with angular js.My code is as below.
<div data-role="page" id="p2">
<div class="ui-bar ui-bar-d "data-role="header" >
Chat
<h1> contacts </h1>
Photos
</div >
<div data-role="content" data-position="center">
<div ng-controller="TalkCtl">
<ul >
Search:
<input type="search" ng-model="searchText">
<li ng-repeat="talk in talks | filter:searchText">
{{talk.name}} </br> {{talk.text}}
</li>
</ul>
</div>
</div>
IMAGE SNAPSHOT
This can be easily done using css background-image property, coupled with positioning and z-indexing.