Was trying to get material sidebar to open over two hours, and discovered, that if there is no height set on sidenav-content, then sidebar is not opening at all.
My goal is to have sidebar full height always on the left side, not same height what content has. Current situation with 40vh: SideNav not full height
Does somebody know why it is so, or should my sidenav-content be something different than at the moment?
<app-header (toggleSidenav)="navigationSidenav.toggle()"></app-header>
<mat-sidenav-container autosize="true">
<mat-sidenav #navigationSidenav [fixedInViewport]="false">
<mat-nav-list>
<a mat-list-item [routerLink]="'/accounts'"> Accounts </a>
<a mat-list-item [routerLink]="'/create-account'"> Create Account </a>
<a mat-list-item [routerLink]="'/contacts'"> Contacts </a>
<a mat-list-item [routerLink]="'/create-contact'"> Create Contact </a>
<a mat-list-item [routerLink]="'/activities'"> Activities </a>
<a mat-list-item [routerLink]="'/create-activity'"> Create Activity </a>
<a mat-list-item (click)="navigationSidenav.toggle()">Close</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<div style="height: 40vh;">
<router-outlet></router-outlet>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
App header looks like so
<mat-toolbar color="primary">
<mat-toolbar-row>
<button mat-icon-button (click)="toggleSidenav.emit()">
<mat-icon>menu</mat-icon>
</button>
</mat-toolbar-row>
</mat-toolbar>
Official docs:
The <mat-sidenav> will, by default, fit the size of its content.
Therefore, you should tell the component explicitly what is the desired height.
Related
I am using beercss and alpinejs I need did dropdown menu, but it's width is smaller than it's context.
<nav class="wrap">
<div class="tabs right-align">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
<a x-data="{ active: false }">
<button #click="active = !active">
<span>Login</span>
<div x-show="active" class="dropdown">
<a>
<label>Complementary text</label>
</a>
</div>
</button>
</a>
</div>
</nav>
How to fix it?
https://codepen.io/bubnenkoff/pen/VwMmEgb
Because your button is on the right, the dropdown disappears outside of the visible area. According to the docs you can use the class list "dropdown left no-wrap" to position the dropdown ("left") and have the width based on the content ("no-wrap").
I'm building a static site with Fomantic-UI (Semantic-UI). When I created my menus, but before I wired them up to links, I noticed that the text of the dropdown link item changed when one of the submenu items was selected. Neat! But since I'm not using anything that preserves state, that change is not sustained, now that the links take you to a new page. I'm fine with that, but I don't like how the text changes briefly before the browser loads the new page. I would like to eliminate that change altogether.
Or, if there's a way to maintain that change on the new page, I'd be fine with that too.
Thanks!
Edit: Here's my code, but the fix will have to reference the framework's JS.
<div class="ui dropdown link item">
<span class="text" role="group">Group 1</span>
<i class="dropdown icon"></i>
<div class="menu submenu">
<div class="header">Services</div>
<a class="item" href="#">Item 1</a>
<a class="item" href="#">Item 2</a>
<a class="item" href="#">Item 3</a>
</div>
</div>
JSFiddle
#gwyndall If you don't want to update the current text when you click the menu item. You can use action property with select in dropdown settings.
$('.ui.dropdown').dropdown({ action: 'select' });
Source: https://github.com/fomantic/Fomantic-UI/issues/1676#issuecomment-693587926
I am trying to make a dropdown menu with the user image. however either the image is misplaced when I use (1st case), or it is in the right place using only but not rounded as I want (2nd case).
https://imgur.com/a/bJPprXH
I started using the image component as the bulma documentation says. I was going through some classes, I removed the external to . without I can't get the image to be round
1st case:
2nd case:
<div class="navbar-link">
<img src="image">
</div>
i wan this dropdown to be like the second case image but image with rounded shape
Maybe like this?
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
<img
src="https://www.stickpng.com/assets/images/58e91a21eb97430e81906500.png"
style= "border-radius: 9001px;"
alt="Placeholder image"
>
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
Jobs
</a>
</div>
</div>
https://codepen.io/bluebrown/pen/OJJggMM?editors=1000
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 have an ionic slide box with 4 slides. You can switch between slides by clicking buttons on the bottom of the screen or you can simply scroll with your finger. Class 'active' needs to be added to the button when it's corresponding slide is active.
For example, if the second slide is active I want second button to have class 'active'. When you move to third slide (either by clicking third button or by sliding the screen), class 'active' is removed from second button and added to third button.
Classes now change when you click on a button but not when you scroll between slides. How do I fix this using AngularJS?
Link to Codepen: http://codepen.io/lu-kanemon/pen/doBNGz
Here is my code:
menu.html
<ion-view view-title="Menu">
<ion-content class="padding">
<ion-slide-box show-pager="false" on-slide-changed="slideHasChanged($index)">
<ion-slide>
<h1 class="slide-title"> Matches </h1>
</ion-slide>
<ion-slide>
<h1 class="slide-title"> Fitting jobs </h1>
</ion-slide>
<ion-slide>
<h1 class="slide-title"> Interesting events </h1>
</ion-slide>
<ion-slide>
<h1 class="slide-title"> Group conversations with open positions </h1>
</ion-slide>
</ion-slide-box>
</ion-content>
<div class="contacts-filters felix-filters button-bar">
<a class="button button-stable" ng-class="{active: selected=='m'}" ng-click="slide(0); selected='m'"><i class="fa fa-users"></i></a>
<a class="button button-stable" ng-class="{active: selected=='j'}" ng-click="slide(1); selected='j'"><i class="fa fa-suitcase"></i></a>
<a class="button button-stable" ng-class="{active: selected=='e'}" ng-click="slide(2); selected='e'"><i class="fa fa-map"></i></a>
<a class="button button-stable" ng-class="{active: selected=='c'}" ng-click="slide(3); selected='c'"><i class="fa fa-comments"></i></a>
</div>
</ion-view>
MenuCtrl.js
myApp
.controller('MenuCtrl', function($scope, $stateParams, $ionicSlideBoxDelegate){
//switch slides
$scope.slide = function(to) {
$scope.current = to;
$ionicSlideBoxDelegate.slide(to);
}
});
Just use addClass(className) and removeClass(className) functions
currentElement.removeClass('active');
nextActiveElement.addClass('active');
You can initialize a variable (current) with the first one (if there is at least one), then once the next active element is fired remove the class from current, then set the newest element to current. This repeats over and over!