How to prevent menu from opening anywhere except under button - angularjs

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.

Related

How can I invert the colors of an ons-list-item when it's tapped on?

Is there a way to invert the colors of an ons-list-item when tapped on, e.g. when the tap starts (i.e. when user starts touching the screen) and revert back to normal colours when the tap ends (i.e. user lifts their finger from the screen)?
Code is pretty standard:
<ons-list-item tappable>
<div class="left">
<img class="list-item__thumbnail" src="img/MyIcon.png">
</div>
<div class="center">
Some text
</div>
<div class="right">
<i class="fa-solid fa-circle" style="color: blue"></i>
</div>
</ons-list-item>
I’ve tried using the touchstart and touchend events then changing the one-list-item CSS color and background properties with partial success but find the ends of the list item don’t change color due to padding and offsets etc. Wondering if there is a better way?
Thanks

Hide nebular menu when close on tablet view

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

Angular Material md-grid-tile width and height become 0 after background-image url change

I encounter a very strange problem of Angular Material Gird List (1.0.0-rc2 - the latest Angular Material). I have a Grid List with 3 elements with background images. Everything load correctly after the initial page load. I have a delete button in each element. When click, it empty out the background image url value. After I click the delete button and empty the background image url value, the associated grid tile lost its width and height. The inside element just float to the top left and the layout is all broken. Here is codepen to illustrate the problem:
http://codepen.io/hughred22/pen/GpXZgy
As you see after clicking the delete button, the red text will lost its position and float to the top left. If you exam the tile, it has 0 width and height.
Here is the HTML code of the md-grid-list:
<md-grid-list md-cols="6" md-cols-sm="6" md-row-height="1:1" md-gutter="0px" md-gutter-gt-sm="0px" style="background: black;">
<md-grid-tile md-rowspan="3" md-colspan="2" md-colspan-sm="2" style="background-image: url({{vm.picturesObj[0].photo}}); background-size: cover;" class="top-tile-edit">
<p style="color: red; font-weight: bold;">The Text which is representing the inside elements. It align center when loaded.</p>
<md-grid-tile-footer>
<md-button type="button" class="md-raised md-warn" ng-click="vm.deleteAddedPhoto(vm.picturesObj[0].photo)">
Delete
</md-button>
</md-grid-tile-footer>
</md-grid-tile>
<md-grid-tile md-rowspan="3" md-colspan="2" md-colspan-sm="2" style="background-image: url({{vm.picturesObj[1].photo}}); background-size: cover;" class="top-tile-edit">
</md-grid-tile>
<md-grid-tile md-rowspan="3" md-colspan="2" md-colspan-sm="2" style="background-image: url({{vm.picturesObj[2].photo}}); background-size: cover;" class="top-tile-edit">
</md-grid-tile>
</md-grid-list>

Make $ionicPopup behave like a modal (catch click events of backdrop)

I'm using $ionicPopup.confirm() in a list to ask whether to delete the row or not.
Unfortunately a second popup opens if the user ignores the popup and taps on another Delete-icon. Then only a reload of the app helps, since the first popup stays open and isn't closable.
Is there a way to lock the backdrop so no clicks come through to the underlying page while popup is open?
(Using ionic v1.0.1)
Code
controller:
this.deleteModule = function (index, item) {
return $ionicPopup.confirm({
title: $translate.instant('moduleplan.deleteModuleTitle'),
template: $translate.instant('moduleplan.deleteModuleText'),
cancelText: $translate.instant('moduleplan.deleteModuleCancel'),
okText: $translate.instant('moduleplan.deleteModuleOk')
}).then(function (response) {
if (response) {
return deleteModule(item.id);
}
});
};
view (shortened):
<ion-content scroll="true">
<ion-list type="list-inset"
show-delete="monthCtrl.isEditing"
show-reorder="monthCtrl.isEditing">
<ion-item class="item-timeline"
ng-repeat="module in monthCtrl.modules track by $index"
option-sort
option-sort-disabled="monthCtrl.optionSortDisabled(module)">
<!-- some content -->
<ion-delete-button
class="ion-minus-circled"
ng-click="monthCtrl.deleteModule($index, module)"
ng-hide="monthCtrl.optionDeleteDisabled(module)">
</ion-delete-button>
</ion-item>
</ion-list>
</ion-content>
Edit
While popup is opened, when I click on other buttons, they don't react (and in browser the cursor does not change to hand).
Analyzing one of the delete-buttons in the DOM:
<div class="item-left-edit item-delete enable-pointer-events visible active">
<ion-delete-button class="ion-minus-circled button icon button-icon" ng-click="monthCtrl.deleteModule($index, module)" ng-hide="monthCtrl.optionDeleteDisabled(module)">
</ion-delete-button>
</div>
When I remove enable-pointer-events class from div.item-delete, then hovering the element doesn't show hand and the delete-buttons are not clickable => no second popup is opened.
enable-pointer-events is defined by { pointer-events: auto; }.
div.popup-container has z-index: 12
div.item-delete has z-index: 0
ion-item has computed z-index: 2
found a few other z-index, but the sibling near backdrop (z-index: 11) and popup-container (z-index: 12) containing my list has only z-index: 2.

Make UI Bootstrap accordion heading fully clickable area

I have a UI Bootstrap accordion whose heading I want to be fully clickable, not just the title like the default behavior.
<accordion class="fda-accordion panel-group panel-group-square" close-others="oneAtATime">
<accordion-group is-open="fdaClass1Open" ng-show="fdaRecallsClass1Count">
<accordion-heading>
<div class="panel-heading-blue">
<i class="fa fa-plus fa-fw" ng-class="{'fa-minus': fdaClass1Open, 'fa-plus': !fdaClass1Open}" style="margin-right:10px"></i>
FDA Class 1 Recalls ({{fdaRecallsClass1Count}})
</div>
</accordion-heading>
{{fdaRecallsClass1Content}}
</accordion-group>
</accordion>
Is there some workaround for this?
The issue is that the anchor that's handling the toggle is wrapped around the header text rather than the div. I would style the content of the heading with negative margins and matching positive paddings corresponding to the padding values of the heading panel in order to expand the clickable area beyond the div.
So say for instance the padding on your panel-heading is 9px 15px, you'd have the following css in your panel-heading-blue class
.panel-heading-blue{
margin: -9px -15px;
padding: 9px 15px;
}

Resources