I have a table that the last column is a div where I have three options (View, Edit and delete). This sub menu is always hidden, but when I click in the options button that is the last column of my table, the array that I use to control what is showing is updated to true (it should be showing), but nothing happened in my page.
Here is my HTML code
<td class="kt-datatable__cell">
<span style="overflow: visible; position: relative; width: 197px;">
<center>
<div class="dropdown">
<a data-toggle="dropdown" class="btn btn-sm btn-clean btn-icon btn-icon-md" #click="toggleHover(index)"
v-bind:class="{'show': hover[index]}">
<i class="flaticon2-shield"></i>
</a>
<div v-bind:class="{'show': hover[index]}" class="dropdown-menu">
And here is my method that I call using #click
methods: {
toggleHover(index) {
this.hover[index] = !this.hover[index];
}
If I set true for a random position right after I get the data from the server, it shows, but when I try to change this by clicking, nothing happens.
It's a reactivity caveat, so you should do :
methods: {
toggleHover(index) {
this.$set(this.hover,index , !this.hover[index]);
}
Related
I have three drop-down menus on my site that I created via Bootstrap.
Ideally, when a user clicks on a drop-down menu and selects one of the inner menu items, the drop-down menu should update its text content to the text content of the selected menu item.
However, for any drop-down menu, if a user clicks on a menu item, all three drop-down menus' text content update instead of only that individual drop-down menu as seen below
My current approach is that the aria-expanded attribute for each drop-down button changes to true if a drop-down is open on a button. If the aria-expanded value of a specific drop-down menu is true, then that button's text content changes to the text content of the selected menu item.
JS
function addPlanesToDropDowns() {
let dropdowns = document.querySelector('.dropdown-menu');
let dropDownButtonOne = document.querySelector('#dropdownMenuButtonOne');
let dropDownButtonTwo = document.querySelector("#dropdownMenuButtonTwo");
let dropDownButtonThree = document.querySelector("#dropdownMenuButtonThree");
dropDownDisabledCheck();
for (let i = 0; i < state.airplaneData.length; i++) {
let dropDownMenuItem = document.createElement('a');
dropDownMenuItem.classList.add('dropdown-item');
dropDownMenuItem.href = '#';
dropDownMenuItem.textContent = state.airplaneData[i].make + " " + state.airplaneData[i].model;
dropDownMenuItem.addEventListener('click', function (event) {
event.preventDefault();
if (dropDownButtonOne.getAttribute('aria-expanded')) {
dropDownButtonOne.textContent = dropDownMenuItem.textContent;
dropDownButtonOne.setAttribute('aria-expanded', false);
}
if (dropDownButtonTwo.getAttribute('aria-expanded')) {
dropDownButtonTwo.textContent = dropDownMenuItem.textContent;
dropDownButtonTwo.setAttribute('aria-expanded', false);
}
if (dropDownButtonThree.getAttribute('aria-expanded')) {
dropDownButtonThree.textContent = dropDownMenuItem.textContent;
dropDownButtonThree.setAttribute('aria-expanded', false);
}
dropDownDisabledCheck();
});
dropdowns.appendChild(dropDownMenuItem);
}
}
HTML
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonOne" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Plane 1</button>
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonTwo" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Plane 2</button>
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonThree" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Plane 3</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<!-- <a class="dropdown-item" href="#">Planes go here</a> -->
</div>
</div>
Despite this, all three drop-down menus update with the same selected menu item text content even though I am only setting the text content on the button element with the specific ID attribute.
This fragment of code dropDownButtonOne.getAttribute('aria-expanded') returns a string, not a boolean value, so either "true" or "false".
As it is a non-empty string, it always evaluates to TRUE. You need to change your condition.
You could check if(dropDownButtonOne.getAttribute('aria-expanded') === "true") for example.
I created a "more" button at the bottom left of my site to display a menu.
When you click on the button, the + becomes x
I want that when you click + the click and scroll will be disabled on the page.
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdown-menu-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="fa-4x">
<span class="fa-layers fa-fw">
<i class="fas fa-circle"></i>
<i class="fa-inverse fas fa-plus" data-fa-transform="shrink-6"></i>
</span>
</div>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdown-menu-action">
<li><i class="fas fa-id-card fa-lg"></i> Créer mon profil</li>
</ul>
</div>
Here is my style sheet
.overlay-is-navbar-collapse {
overflow: hidden;
pointer-events: none;
}
Here is my JS file :
(function ($) {
$('#dropdown-menu-action').on('show.bs.dropdown', function () {
$('body').addClass('overlay-is-navbar-collapse');
});
$('#dropdown-menu-action').on('hide.bs.dropdown', function () {
$('body').removeClass('overlay-is-navbar-collapse');
});
})(window.jQuery);
UPDATE
The following code does not work. If I click outside, the menu closes but the class remains on body.
$('#dropdown-menu-action').on('click', () => {
$('body').toggleClass('overlay-is-navbar-collapse');
});
I have tried the following code, but it does not work :
$('#dropdown-menu-action').on('shown.bs.dropdown', function () {
$('body').addClass('overlay-is-navbar-collapse');
});
$('#dropdown-menu-action').on('hidden.bs.dropdown', function () {
$('body').removeClass('overlay-is-navbar-collapse');
});
In your JavaScript file, Add a click handler to toggle the body class name overlay-is-navbar-collapse
(function ($) {
$('#dropdown-menu-action').on('click', () => {
$('body').toggleClass('overlay-is-navbar-collapse');
});
})(window.jQuery);
And remove pointer-events: none from your CSS file, or you won't be able to click on the button again, once you have added the class name overlay-is-navbar-collapse.
.overlay-is-navbar-collapse {
overflow: hidden;
}
You could add a class to the body to disable scroll or edit the style directly on whatever axis you want, or all axis. body.class { overflow-y: hidden; }
this is my html file.this is my dropdown having two listitems password reset and send activation email i want to disable reset password
<div class="active-send-select" pull-left btn-group title="{{::'title.active.filter' | translate}}">
<button class="btn btn-large dropdown-toggle" data-toggle="dropdown" ng-disabled="!actionButtonStatus.SENT">
<i class="fa fa-envelope fa-lg"></i>
<span class="action-button-text">{{::'label.button.send' | translate}}</span>
<i class="icon-chevron-down pull-right" style="margin-top:-20px;"></i>
</button>
<ul class="dropdown-menu filter-state">
<li ng-class="abc"><span ng-class="{resettest: userstatus == 'Complete'}">{{::'label.dropdown.sendActivation' | translate}}</span></li>
<li class="test-dropdown">
<span ng-class="{resettest: userstatus == 'Notified' || 'Added'}">{{::'label.dropdown.resetPassword' | translate}}</span>
</li>
</ul>
</div> i did this wid ng-class a su told now its showing gray color and but still m able to click on the password reset list item and it is redirecting to password reset page.
CSS code
.resettest{
color: darkgray;
cursor: not-allowed;
}
In your controller:
isSelectDisabled() {
if (this.currentState === 'not ready') {
return true;
}
return false;
}
Then in your template:
<li ng-disabled="vm.isSelectDisabled()"></li>
This assume you use vm ofc.
You can do this without a custom $scope function:
<li ng-disabled="currentState === 'Not ready'"></li>
If that condition evaluates to true then disabled will be true. However seeing as you're putting this on a li element I don't think anything will happen. You'd be better off putting this condition on a button element.
EDIT:
The problem here is that disabled attributes have no effect on li elements. If you want to show that that list item is disabled you will need to apply either a class or a style, using ng-class or ng-style respectively.
I've got an application requiring a series of dropdowns. The functionality requires me to be able to switch between normal dropdown behavior and multi-select behavior.
I have made slight modifications to the ui.boostrap.dropdown from the Angular Directives for Bootstrap (see Dropdown). Everything works well, except for a gray bar after clicking (looks like the :hover css stays active after clicking) when in Multiselect mode.
When I toggle off then back on, the highlight goes away, as if the hover event has somehow completed.
Process:
Open the dropdown
Click Multiselect
Move the mouse and Multiselect stays highlighted, as if the ":focus" tag is not removed.
Visually:
The mouse is over 345 in this image, Multiselect should not be highlighted.
Angular HTML for dropdown:
<div ng-controller="DropdownCompanyController as vm">
<div class="btn-group u-front_dropdown-wide" dropdown is-open="vm.isopen">
<button type="button" class="btn btn-default dropdown-toggle" dropdown-toggle>
{{ vm.selected }} <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" ng-click="vm.checkMultiSelect($event)">
<li ng-repeat="company in vm.companies"
ng-class="{ selected : company.selected }">
{{ company.name }}
</li>
<li class="divider"></li>
<li class="ng-scope" ng-class="{selected : vm.multi.select }">
<a href="#"
ng-click="vm.event.multiselect()"
ng-class="{ multi: vm.multi.select }">Multiselect</a>
<button
ng-hide="!vm.multi.select"
ng-class="{ multi_button: vm.multi.select }"
ng-click="vm.event.close_dropdown($event)">Close</button>
</li>
</ul>
</div>
</div>
Here's the event where the click on an element is handled:
vm.event = {};
vm.event.select = function(company) {
if (!vm.multi.select) {
clearCompanies(false);
company.selected = true;
vm.selected = company.name;
vm.isopen = false;
} else {
if (company.name !== vm.defaultCompany) {
company.selected = !company.selected;
vm.selected = vm.multi.title + countCompanies();
}
}
};
Link to Plunker.
I have had no luck tracking this down and my instinct is that the issue is in the CSS, but it's standard bootstrap CSS. Any assistance would be appreciated.
If you just dont want any item to have the highlight then in your own custom app.css file override the focus state with white:
.dropdown-menu > li > a:focus {
background-color: white;
}
Without doing a custom bootstrap build just add the hover following the focus to to keep the grey highlight:
.dropdown-menu > li > a:hover {
background-color: lightgray;
}
I'm starting to think that this may not even be possible, but I'm trying to automate a backend management task for myself here by allowing multiple emails to be initiated at once.
I have a table with users. The last column of the table has a drop-down button with mailto links that initiate various emails to the user for that row. The column also has a checkbox next to the button. Here's a simplified snippet:
<table>
<tr>
<td>
User
</td>
<td>
<div class="btn-group individual-btn">
<a class="btn btn-default dropdown-toggle" href="#" data-toggle="dropdown">
Email User
<ul class="dropdown-menu">
<li>
<a class="no-open" href="mailto:user?subject=why&body=etc">
Why didn't you open?
</a>
<a class="no-open" href="mailto:user?subject=why&body=etc">
Why didn't you click?
</a>
<a class="no-open" href="mailto:user?subject=why&body=etc">
Why didn't you pay?
</a>
</ul>
</div>
<input type="checkbox" class="selected-row">
</td>
</tr>
<tr>
rinse and repeat...
At the end of the table I have a button with the same set of actions but the idea for this button is that clicking it will open an email for every selected user (as indicated by the checkbox).
<div class="btn-group master-btn">
<a class="btn btn-default dropdown-toggle" href="#" data-toggle="dropdown">
Email All Checked Users
<ul class="dropdown-menu">
<li class="email-items">
<a class="no-open" href="#">
Why didn't you open?
</a>
<a class="no-open" href="#">
Why didn't you click?
</a>
<a class="no-open" href="#">
Why didn't you pay?
</a>
</ul>
</div>
I thought the js might be this easy:
$(".master-btn .email-items a").click(function(e){
linkClass = "a." + $(this).attr("class").trim()
$(".selected-row:checked").prev(".individual-btn").find(linkClass)[0].click();
e.preventDefault();
});
But that only opened an email for the first selected row. So, I thought, well maybe the dom needs space between these clicks, so I'll iterate over each and put a delay in to simulate clicks; but same result: only the first selected row is emailed:
$(".master-btn .email-items a").click(function(e){
linkClass = "a." + $(this).attr("class").trim()
$(".selected-row:checked").each(function(i){
var self = this
setTimeout(function(){
$(self).prev(".individual-btn").find(linkClass)[0].click();
}, 2000*i);
});
e.preventDefault();
});
Any thoughts? Will the browser even allow this?
Working example: https://jsfiddle.net/gaboom/h81qov5g/
$("#send").on("click", function(event) {
event.preventDefault();
$("#iframes").empty();
$("#links a").each(function() {
setTimeout($.proxy(function() {
var popup = window.open($(this).attr("href"))
setTimeout($.proxy(function() {
this.close();
}, popup), 100);
}, this), 100)
})
})
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="send" href="#">CLICK TO SEND</a>
<div id="links" class="hidden">
John
Sarah
John
Sarah
John
Sarah
</div>
I think this is the fix:
$(".selected-row:checked").prev(".individual-btn").find(linkClass).each(function() {
$(this)[0].click();
});
When you use [0] on a jQuery object, it only returns the first DOM element in the collection, equivalent to .get(0). If you want an array of all DOM elements, you would have to use .get() (with no arguments it returns all the elements).