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;
}
Related
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]);
}
<td *ngFor="let tbh of tblH; let i=index" on-mouseover="hoveredI=i" on-
mouseleave="hoveredI=-1">{{data[tbh]}}
<div class="onHoverDiv" *ngIf="i==hoveredI">
<ul>
<li (click)="editCell(data,tbh);">
<span class="fa fa-pencil"></span>
</li>
</ul>
</div>
</td>
this my HTML code to show edit icon on hover on specific table cell but the problem is its working but its show icon in all the particular column of table cell i want show edit icon on hover in specific table cell how this to be done
Try with the following css:
li.fa-pencil {
display: none;
}
li:hover.fa-pencil {
display: inline-block;
}
you need to set one extra key is_hover into your array.set is_hover by default false.and just set below code.
you need to set like first in the component.
tblH.foreach((tbh,i)=>{tblh[i].is_hover = false})
html
<td *ngFor="let tbh of tblH; let i=index" (mouseleave)="tbh.is_hover =!tbh.is_hover" (mouseenter)="tbh.is_hover =!tbh.is_hover">{{data[tbh]}}
<div class="onHoverDiv" *ngIf="tbh.is_hover">
<ul>
<li (click)="editCell(data,tbh);">
<span class="fa fa-pencil"></span>
</li>
</ul>
</div>
</td>
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 have a bootstrap dropdown menu that is populated with time zone information. The dropdown is correctly populated but when i click on the dropdown and press a key on the keyboard (for example "P") it does not select an appropriate item on the list. The code for the dropdown is bellow.
HTML
<select class="form-control" name="timeZone" ng-model="engagement.timeZone" ng-init="engagement.timeZone=timezones[37].code" ng-options="timeZone.code as timeZone.name for timeZone in timezones" required></select>
The output is something like this.
What i want is if i press A on the keyboard first item matching the letter should be selected. (not to be confused with a filtering like behaviour)
UPDATE
This does not seem to relate to bootstrap at all. I removed all the bootstrap classes and it still is the same. May be something to do with Angular?
As you know using Boostrap drop-down components you are not able to select an element by pressing the Keyboard Letter. So you can utilize the following code which uses a directive;
myApp.directive('keypressEvents',
function ($document, $rootScope) {
return {
restrict: 'A',
link: function (scope, element, attr) {
console.log('linked');
$document.bind('keypress', function (e) {
$rootScope.$broadcast('keypress', e, String.fromCharCode(e.which));
var letter = String.fromCharCode(e.which);
var target = e.target;
var charat = element[0].textContent.charAt(0);
if(charat === letter){
element.addClass("red");
}
});
}
}
});
Up there, you get to see the directive used, it simply is bounding on the keypressed and in the end set the class for the element found with the very same first letter. Nevertheless, you just need to set the focus on this;
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li keypress-events>action</li>
<li keypress-events>something else here</li>
</ul>
</div>
As you can see, the directive has been bounded on the li elements.
I have a problem with e2e testing a web application in Internet Explorer 9 with protractor (1.0.0-rc4). The top bar has a dropdown menu that is implemented
with a bootstrap popover and looks like this:
<div ng-class="{ in: isOpen(), fade: animation() }" class="popover bottom popover--default in" is-open="tt_isOpen" animation="tt_animation" placement="bottom" content="r6-operator-toolbar-popover" title="" r6-directive-popover-popup="" style="display: block; top: 29px; left: 1395.7px;">
<div class="arrow-cover"><div class="arrow"></div></div>
<h3 ng-show="title" ng-bind="title" class="popover-title ng-binding ng-hide"></h3>
<div r6-popover-content="" class="popover-content"><ul class="r6nav r6nav--popover" r6-operator-toolbar-popover="">
<li>
<ul r6-localization-languageselector="">
<!-- ngRepeat: language in languages --><li ng-class="language.key == languages[selected].key ? 'is-selected' : null" ng-repeat="language in languages" class="ng-scope">
<a ng-click="language.key == languages[selected].key ? null : loadLanguage(language.key)" href="" class="ng-binding">DE</a>
</li><!-- end ngRepeat: language in languages --><li ng-class="language.key == languages[selected].key ? 'is-selected' : null" ng-repeat="language in languages" class="ng-scope is-selected">
<a ng-click="language.key == languages[selected].key ? null : loadLanguage(language.key)" href="" class="ng-binding">EN</a>
</li><!-- end ngRepeat: language in languages -->
</ul>
</li>
<li>
<a ng-click="changePassword()" href=""><span class="r6icon-size1color3 r6icon-configure"></span>Change password</a>
</li>
<li>
<a ng-click="logout()" href=""><span class="r6icon-size1color3 r6icon-logout"></span>Logout</a>
</li>
</ul></div>
</div>
The code is the template that is loaded once the popover is shown. The idea is to click on the logout-link in order to log out the user. The way I have it in my test is as follows:
it('should logout user', function() {
userToolBarPage.btnToolbar.click();
var elementToFind = '//a[contains(text(), "Logout")]';
browser.wait(function() {
var isThere = ptor.isElementPresent(elementToFind);
expect(ptor.isElementPresent(elementToFind)).toBeTruthy();
ptor.findElement(protractor.By.xpath(elementToFind)).click();
return isThere;
}, 15000);
});
The userToolBarPage.btnToolbar just clicks on the menu to open the popover and display the HTML above. Afterwards it looks for the link and clicks it. This works in Firefox and Chrome, but I can not
get IE9 to click on the button. It opens the popover, but it never seems to find the button, no matter what I try.
I know the code is not very clean right now, but this is still a trial and error process for me and I can't get any results, no matter what I try. If anyone has a suggestion how I could do this, please feel free to share it.