i'm using nebular, and i create custom menu like this
but when i collase the menu it looks like this.
i'm looking for how to make the menu on tablet view like on mobile, the menu is hidden. How can i achieve that?
here's my menu code
<nb-list style="padding: 0px;">
<nb-list-item *ngFor="let topik of let topik of topikData" style="padding: 0px;">
<nb-accordion class="topikAccordion" style="width: 100%;background: #3366ff !important;">
<nb-accordion-item [expanded]="true">
<nb-accordion-item-header [ngClass]="{'topicActive': topik.slug == topicSlug}">
{{ topik.name }}
</nb-accordion-item-header>
<nb-accordion-item-body *ngFor="let lesson of topik.lessons">
<nb-list-item style="padding-left: 30px;cursor: pointer;font-weight: 600;font-size:0.8rem;transition:.3s all ease;"
[ngClass]="{'active': lesson.code == lessonCode}"
(click)="onClick(topik.slug, lesson.code, lesson.type)">
<nb-icon *ngIf="lesson.type == 'text'" style="margin-right: 10px;" icon="video-outline">
</nb-icon>
<nb-icon *ngIf="lesson.type == 'pdf'" style="margin-right: 10px;" icon="file-outline">
</nb-icon>
<nb-icon *ngIf="lesson.type == 'quiz'" style="margin-right: 10px;"
icon="message-square-outline"></nb-icon>
{{lesson.name}}
</nb-list-item>
</nb-accordion-item-body>
</nb-accordion-item>
</nb-accordion>
</nb-list-item>
</nb-list>
If you are using sidebar you can set state='collapsed' and responsive='false'
you can also set breakpoints for the menu
collapsedBreakpoints="'xs', 'is','sm', 'md'" compactedBreakpoints="'lg','xl','xxl','xxxl'"
I am using the following to show/hide a menu...
<nb-sidebar tag="right" right state='collapsed' class="right-sidebar" fixed end>
you can find these details on the api page of the nebular component.
https://akveo.github.io/nebular/docs/components/sidebar/api#nbsidebarcomponent
Related
I am using ng-repeat to list all the "zones". It works just fine on the first rendering and even when additional data from the server is added to the existing data it works without any issues or flickers. But when the "$rootScope.zones" is assigned a new value (the user can change the sort order from Alphabetical to Proximity, which sets a new value for the $rootScope.zones in that sorting order) the whole ng-repeat list goes blank for a few seconds and then works fine again.
This is not a very big issue except in the zones I have some text with CSS bubbles around. The text disappears but the bubbles remain.
How can I set the $rootScope.zones such that it doesn't create that flicker? Alternatively, how can I make sure that the "bubbles" only appear when the text is there.
This is my ng-repeat:
<ion-list class="card" ng-if="$root.currentMode.zoneBroadcast == true" can-swipe="true">
<div class="button-bar no-padding">
<button class="button bold" ng-class="{'button-calm': sortMethod === 'Alphabetically'}" ng-click="changeSortMethod('Alphabetically')">Alphabetically</button>
<button class="button bold" ng-class="{'button-calm': sortMethod === 'By Proximity'}" ng-click="changeSortMethod('By Proximity')">By Proximity</button>
</div>
<ion-item class="item no-border no-padding dark-bg" ng-repeat="zone in $root.zones track by zone.zoneName"
ng-if="checkVisibility(zone.zoneName)">
<div class="item-divider text-center">
<span>
Zone ID : <span>{{zone.zoneName}}</span>
</span>
</div>
<div class="item-body" ng-class="checkIfZoneMatches(zone.zoneName) ? 'zone-broadcast-green' : parseStringToInteger(zone.Trips.length) > 0 ? 'zone-broadcast-red' : checkIfZoneCanBookIn(zone.zoneName) ? 'zone-broadcast-yellow' : zone.Lineup.FreeList.length > 0 ? 'zone-broadcast-blue' : 'zone-broadcast-normal'">
<div class="row">
<div class="col">
<span ng-class="{'lineup free' : zone.Lineup.FreeList.length != 0}">{{zone.Lineup.FreeList.toString()}}</span>
<span ng-class="{'lineup loaded' : zone.Lineup.LoadedList.length != 0}">{{zone.Lineup.LoadedList.toString()}}</span>
<span ng-class="{'lineup accepted' : zone.Lineup.AcceptedList.length != 0}">{{zone.Lineup.AcceptedList.toString()}}</span>
<span ng-class="{'lineup offered' : zone.Lineup.OfferedList.length != 0}">{{zone.Lineup.OfferedList.toString()}}</span>
<span ng-class="{'lineup break' : zone.Lineup.BreakList.length != 0}">{{zone.Lineup.BreakList.toString()}}</span>
<span ng-class="{'lineup stc' : zone.Lineup.STCList.length != 0}">{{zone.Lineup.STCList.toString()}}</span>
</div>
</div> ...
I have tried ng-if, ng-hide, track by, etc. but nothing seems to work.
Here's the CSS I am using to create the bubbles.
.lineup{
background: white;
border-radius: 2em;
font-weight: bold;
font-size: 100%;
padding: 1%;
}
.free {
color: #00b140;
}
.loaded{
color: #6b46e5;
}
.accepted{
color: #0a9dc7;
}
.offered{
color: deeppink;
}
.break{
color: orangered;
}
.STC{
color: saddlebrown;
}
I expect the bubbles to appear only when the text is there. Moreover, when the sort order is changed by the user it should not go blank for over 2 seconds then render the template.
I would really appreciate your help.
Instead of using ng-if with ng-repeat, pipe to a filter:
SLOW
<ion-item class="item no-border no-padding dark-bg"
ng-repeat="zone in $root.zones track by zone.zoneName"
ng-if="checkVisibility(zone.zoneName)">
Faster
<ion-item class="item no-border no-padding dark-bg"
ng-repeat="zone in zones | filter : zoneFilter track by zone.zoneName">
$scope.zoneFilter = function(item) {
return $scope.checkVisibility(item);
};
For more information, see
AngularJS filter API Reference
Changing
zone.Lineup.FreeList.length != 0 to zone.Lineup.FreeList.length > 0 solved the bubble problem.
On a tablet (iPad Pro shown), if I double tap the screen to zoom in on the page, and then click to open the Menu, the menu opens under the search box but should open below the header but aligned with the logged in user.
The expected behavior is that it will always open below the logged in user offset vertically below the header.
The html pretty much looks like below. I am using flex to position the items in the header (e.g., logo, search, user) but that shouldn't impact the menu. According to the material docs (v1.1.8) By default, md-menu will attempt to align the md-menu-content by aligning designated child elements in both the trigger and the menu content. Which implies that the menu will line up as desired to the div which wraps the button,icons, and name even if I didn't already have the md-menu-origin attribute.
What would cause a zoomed tablet to cause the menu to open in the wrong location?
<md-menu-bar>
<md-menu hide show-sm show-md md-offset="0 9">
<div
class="md-icon-button"
ng-click="vm.openMenu($mdMenu, $event)"
aria-label="Open portal menu"
md-menu-origin
md-menu-align-target
role="button"
aria-label="Portal menu"
>
<span class="fa fa-user-o"></span>
<span class="user-name" ng-bind="vm.userName"></span>
<span class="fa fa-caret-down" ng-if="!$mdMenuIsOpen"></span>
<span class="fa fa-caret-up" ng-if="$mdMenuIsOpen"></span>
</div>
<md-menu-content layout="column" layout-align="start stretch" width="3">
<span>Portal Menu</span>
<md-menu-item>...</md-menu-item>
<md-menu-item>...</md-menu-item>
<md-menu-item>...</md-menu-item>
</md-menu-content>
</md-menu>
</md-menu-bar>
Check with css property set for the same.
Use position to two elements and set z-index to the two elements on which opened dropdown is getting overlapped.
Example:
(parent element)
.class1 {
position: relative;
z-index: -1;
}
(child element)
.class2 {
position: absolute;
z-index: 16;
}
Once, check with this. This answer is from CSS point of view.
I am trying to create custom pager for ion-slide-box. This is codepen sample
This is my js:
$scope.currentSlide = 0;
$scope.pagerClick = function (index) {
$ionicSlideBoxDelegate.slide(index);
}
$scope.slideChanged = function (index) {
$scope.currentSlide = index;
}
This is html file:
<ion-slide-box does-continue=true show-pager=false on-slide-changed="slideChanged($index)">
<ion-slide class="item-image" ng-repeat="i in getNumber(number) track by $index">
<img src='{{images[$index]}}' />
</ion-slide>
</ion-slide-box>
<div class="page-indicator" ng-repeat="i in getNumber(number) track by $index">
<a class="button" href ng-class="{activated: $index == currentSlide}" ng-click="pagerClick($index)">{{$index+1}}</a>
</div>
Almost all works fine, except one thing. When I click on my pager buttons it doesn't change active button in pager. When I swype slides all buttons change style correctly. I think it may be because of $index - I have two such variables. But I can't understand or fix it.
I finally solved this problem which was because activated is inline class of button.
When I push button this class was applying, but when I unpress button Angular delete this class.
I create my class active-button and all is now working.
<div class="page-indicator" ng-repeat="i in getNumber(number) track by $index">
<a class="button" href ng-class="{'active-button': $index == currentSlide}" ng-click="pagerClick($index)">{{$index+1}}</a>
and css
.active-button{
background-color: #b2b2b2 !important;
box-shadow: none !important;
color: #fff !important;
}
<md-grid-list
md-cols-sm="2" md-cols-md="2" md-cols-gt-md="6"
md-row-height-gt-md="1:1" md-row-height="2:2"
md-gutter="4px" md-gutter-gt-sm="4px">
<md-grid-tile ng-repeat="candidate in records"
md-rowspan="1"
md-colspan="1"
md-colspan-sm="1">
<md-grid-tile-header>
<md-checkbox class="md-primary"><h3>{{candidate.name}}</h3></md-checkbox>
</md-grid-tile-header>
<figure>
<img ng-src="/templates/img/{{candidate.image}}" width="100%" height="100%">
</figure>
<md-grid-tile-footer>
<h3 ng-if="candidate.title == -1">{{candidate.date}}</h3>
<h3 ng-if="candidate.title == 0" style="color: #e42012;"><i class="icon ion-close"></i></h3>
<h3 ng-if="candidate.title == 1" style="color: #28a54c;"><i class="icon ion-checkmark"></i></h3>
</md-grid-tile-footer>
</md-grid-tile>
</md-grid-list>
Above code shows a implementation I used show a image grid list with ionicframework and angular materials. The problem is when I run it in mobile no image is dispalyed, but in desktop chrome it shows images. Can anyone show me problem I'm having this code or am I using these tags wrongly.
Thank you.
I was running into a similar issue with desktop chrome displaying the images inconsistently - sometimes appearing sometimes not - but all other browsers were displaying the image everytime.
The cause is specifying the image dimensions within the image tag seems to conflict with material design.
<figure>
<img ng-src="/templates/img/{{candidate.image}}" width="100%" height="100%">
</figure>
Example of material designs' dynamic calculation of styles
style="left: calc(((33.3333333333333% - 0.666666666666667em) + 1em) * 1); width: calc(((33.3333333333333% - 0.666666666666667em) * 1) + 0em); padding-top: calc(((25% - 0.666666666666667em) * 1) + 0em); margin-top: calc(((25% - 0.666666666666667em) + 1em) * 0);"
Specifying the image dimensions in the css should allow the image display to work correctly.
figure img {
height: 100%;
width: 100%;
}
I want to hide only clear button from datepicker directive in angular js.
Currently there are three buttons at the bottom of the angular js datePicker directive(Today, clear and Close), Is there any way to make visibility of these buttons configurable, such that i can hide one of the buttons out of it.
The Date picker which i am using is using ui-bootstrap library.
Currently there is now way to hide individual buttons in the datepicker button bar via options on the directive. You can override the template and remove the clear button, but that is a global patch and doesn't offer hiding/showing based on a condition. You could create a class that targets the button you want to hide as this plunk
.datepicker-noclear [ng-click="select(null)"] {
display: none;
}
demonstrates although that is a fragile workaround.
I would suggest submitting a feature request to add the option of which buttons are available in the button bar.
Easy, replace the template:
<script type="text/ng-template" id="template/datepicker/popup.html">
<ul class="dropdown-menu" ng-if="isOpen" style="display: block" ng-style="{top: position.top+'px', left: position.left+'px'}" ng-keydown="keydown($event)" ng-click="$event.stopPropagation()">
<li ng-transclude></li>
<li ng-if="showButtonBar" style="padding:10px 9px 2px">
<span class="btn-group pull-left">
<button type="button" class="btn btn-sm btn-info" ng-click="select('today')" ng-disabled="isDisabled('today')">{{ getText('current') }}</button>
</span>
<button type="button" class="btn btn-sm btn-success pull-right" ng-click="close()">{{ getText('close') }}</button>
</li>
</ul>
</script>
You hack with css. It worked for me.
.ui-datepicker .btn-group .btn-danger.btn{
display: none;
}
Further to Rob J's solution, if we add a ng-class={"require": "vm.required"} to the parent div of the datepicker input, or simply add a class called require to the div. Then use the magic css to hide or show the clear button depending on the value of vm.required:
.require button[ng-click^="select(null)"] {
display: none;
}
if you want to remove the clear button, it means that the field is required, and as I do not agree with forcing things (like creating a div parent and typing classes), then just set the element for which you active the datepicker as required
[uib-datepicker-popup][required] + [uib-datepicker-popup-wrap] button[ng-click*="select(null"] {
display: none;
}
<input type="text" ng-model="datePicker.date" uib-datepicker-popup="dd MMM yyyy" readonly is-open="datePicker.opened" ng-click="datePicker.opened = true" required />
You can do this css trick to hide the clear button :
.uib-button-bar > .btn-group > .btn-danger {
display: none !important;
}
You can hide it by adding to style.css this :
.uib-clear {
display: none;
}