Example of problem is here:
http://liveweave.com/fRs3PL
Basically, I have a modal being triggered from a dropdown, and for some reason the modal hides behind the grey shadow and then disappears altogether a moment later.
What is going on here?!
You need to take the revel modal (<div class="reveal">) and all of its contents and place it so that it is a child of only the <body> element. You don't want it to be contained inside of other elements.
<body>
<div class="row">
<div class="small-12 medium-3 columns">
<ul class="dropdown menu" data-dropdown-menu="" role="menubar" data-dropdownmenu="3z4e20-dropdownmenu" aria-selected="false" aria-expanded="false" data-is-click="false">
<li role="menuitem" class="has-submenu is-dropdown-submenu-parent is-down-arrow" aria-haspopup="true" aria-selected="false" aria-expanded="false" aria-label="Actions" data-is-click="false">
Actions
<ul class="menu submenu is-dropdown-submenu first-sub vertical" data-submenu="" aria-hidden="true" role="menu">
<li role="menuitem" class="is-submenu-item is-dropdown-submenu-item"><a data-open="change-password-modal-0" aria-controls="change-password-modal-0" id="8p079l-reveal" aria-haspopup="true" tabindex="0">Change Password</a>
</li>
<li role="menuitem" class="is-submenu-item is-dropdown-submenu-item">Disable</li>
<li role="menuitem" class="is-submenu-item is-dropdown-submenu-item">Delete</li>
<li role="menuitem" class="is-submenu-item is-dropdown-submenu-item">Transfer</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="reveal" id="change-password-modal-0" data-reveal="rcsjob-reveal" data-reset-on-close="true" aria-labelledby="8p079l-reveal" role="dialog" aria-hidden="true" data-yeti-box="change-password-modal-0" data-resize="change-password-modal-0">
<h1>Change Password</h1>
<p class="lead">You are changing the password for:</p>
<label>Password: <input type="text"></label>
<button class="close-button" data-close="" aria-label="Close reveal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
</body>
Related
I want to display names of every child pages of the parent of the current page except the current page in the component in aem. But my output is coming including the current page name.
<section id="touractivities">
<div class="container">
<div class="row">
<div class="col-sm-12">
<ul class="row buttontab">
<li class="col-md col-sm-4 col-6" data-sly-repeat="${CurrentPage.parent.listChildren}">
<div class="btnbggradient">
<a href="${item.path}.html" class="shadow">
<i class="icon-${item.name}"></i>
<h5 >${item.title}</h5>
</a>
</div>
</li>
</ul>
</div>
</div>
</div></section>
my aem structure:
required output:
output im getting:
The code is correct except that the bird watching li should not come while i am in bird watching page.
You can switch from data-sly-repeat to data-sly-list (so you can move it to the ul element). You can then use data-sly-test on the li element and check each item path against the current resource/page path:
<li data-sly-test=“${item.path != resource.path}” ...
<section id="touractivities">
<div class="container">
<div class="row">
<div class="col-sm-12">
<ul class="row buttontab" data-sly-list="${CurrentPage.parent.listChildren}">
<li class="col-md col-sm-4 col-6" data-sly-test="${item.path != currentPage.path}" >
<div class="btnbggradient">
<a href="${item.path}.html" class="shadow">
<i class="icon-${item.name}"></i>
<h5 >${item.title}</h5>
</a>
</div>
</li>
</ul>
</div>
</div>
</div></section>
My navbar on the phone opens, but it does not close.
<div class="carousel-inner">
<nav class="navbar navbar-expand-lg navbar-light bg-primary nawigacja">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar10">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbar10">
<ul class="navbar-nav nav-fill w-100">
<li class="nav-item">
<a class="nav-link" href="#">First tab</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#button1">2nd Tab</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#button2">3rd Tab</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#button3">4th tab</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#button4">5th Tab</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">6th Tab</a>
</li>
</ul>
</div>
</div>
in the elements I see that before clicking the code looks like this:
<div class="navbar-collapse collapse" id="navbar10">
and literally for a few seconds the code changes into:
navbar-collapse collapsing
next in 1 sec:
navbar-collapse collapse show
after another click it changes to
navbar-collapse collapsing
and after 1 sec again:
navbar-collapse collapse show
Navbar does not close at all after opening.
//edit:
I will add that on codeply it works.
I managed to fix it.
For others who are struggling with the same problem, I will tell you that I had to remove the following from the section:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
I am trying to create a popup in my ionic view.
<div class="item tabs tabs-secondary tabs-icon-left">
<a class="tab-item" href="#">
<i class="icon ion-thumbsup"></i> Like
</a>
<a class="tab-item" href="#">
<i class="icon ion-chatbox"></i> Comment
</a>
<a class="tab-item">
<i class="icon ion-share"></i> Share
</a>
</div>
When i click on Share button , I should get the below template as popup.. not as separate view.
<div class="popover-mask"></div>
<div class="popover popover--down" style="top: 20px; left: 165px;">
<div class="popover__top-arrow"></div>
<div class="popover__content">
<ul class="list">
<li class="item">Facebook
</li>
<li class="item">Twitter
</li>
</ul>
</div>
</div>
How to do it?
Thanks,
Sabarisri
create a share button:
<div class="buttons">
<button class="button button-icon ion-more" ng-click="popover.show($event)"></button>
</div>
put your popover template like this:
<script id="templates/popover.html" type="text/ng-template">
<ion-popover-view>
<ion-content>
<div class="popover-mask"></div>
<div class="popover popover--down" style="top: 20px; left: 165px;">
<div class="popover__top-arrow"></div>
<div class="popover__content">
<ul class="list">
<li class="item">Facebook
</li>
<li class="item">Twitter
</li>
</ul>
</div>
</div>
</ion-content>
</ion-popover-view>
</script>
in your controller call the popover like this:
$ionicPopover.fromTemplateUrl('templates/popover.html', {
scope: $scope,
}).then(function(popover) {
$scope.popover = popover;
});
In bootstrap-4, the first time I click a dropdown in a tab menu it works fine, but after that it stops working.
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#home" role="tab" data-toggle="tab">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#profile" role="tab" data-toggle="tab">Profile</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#action" data-toggle="tab">action</a>
<a class="dropdown-item" href="#action_2" data-toggle="tab">Another action</a>
</div>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
HOME
</div>
<div role="tabpanel" class="tab-pane" id="profile">
PROFILE
</div>
<div role="tabpanel" class="tab-pane" id="action">
ACTION 1
</div>
<div role="tabpanel" class="tab-pane" id="action_2">
ACTION 2
</div>
</div>
Here's a Demo in Bootply
The issue appears to be caused by not clearing the .active class from the dropdown item when another tab is opened, therefore leaving it highlighted and preventing the same dropdown item from being clicked again.
According to the workaround in Issue #17371 - navs dropdown tab bug, you can add the following js until the issue is resolved:
$('.nav-tabs').on('shown.bs.tab', 'a', function (e) {
if (e.relatedTarget) {
$(e.relatedTarget).removeClass('active');
}
})
Demo in Stack Snippets
$('.nav-tabs').on('shown.bs.tab', 'a', function (e) {
if (e.relatedTarget) {
$(e.relatedTarget).removeClass('active');
}
})
<!-- 4.0.0-alpha.2 Libraries -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#home" role="tab" data-toggle="tab">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#profile" role="tab" data-toggle="tab">Profile</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#action" data-toggle="tab">action</a>
<a class="dropdown-item" href="#action_2" data-toggle="tab">Another action</a>
</div>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
HOME
</div>
<div role="tabpanel" class="tab-pane" id="profile">
PROFILE
</div>
<div role="tabpanel" class="tab-pane" id="action">
ACTION 1
</div>
<div role="tabpanel" class="tab-pane" id="action_2">
ACTION 2
</div>
</div>
I am using angular-strap to create a navbar. It collapses down to the hamburger icon just like it should, but when it is collapsed (hamburger icon) it will not expand to click on a link. Here is my code:
<nav class="navbar navbar-default" role="navigation" bs-navbar>
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
</ul>
</div>
</div>
</nav>
The navbar is responsive like expected. Also, the directive is being instantiated, because the breakpoint in the link function gets hit. As explained above when the navbar is in it's hamburger state, it won't expand to make it able to click on any of the links. What else do I need to look at to make this work with angular-strap? How do I make the hamburger icon expand?
You can make use of the collapse directive in ng-strap 2.1.3.
This was added very recently.
An example:
<nav class="navbar navbar-default" bs-collapse>
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" bs-collapse-toggle>
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" ng-bind="config.options.page.pageName" ui-sref="root">Doks</a>
</div>
<div bs-collapse-target>
<ul class="nav navbar-nav">
<li ng-repeat="category in categories" class="item" ng-class="{active: urlParams.category === category}">
<a ui-sref="hasCategory({category: category})">{{category}}</a>
</li>
</ul>
</div>
</div>
</nav>