Can we use :not selector on hidden element? - css-selectors

I created list with some elements as display:block and rest with display:none.
Tried to apply search on whole list but it resulted the set from visible list instead of complete list.
So how can I search in whole list in below eg.?
<ul>
<li class="searchable show" data-index="ajay">ajay</li>
<li class="searchable show" data-index="amit">amit</li>
<li class="searchable hide" data-index="ashish">ashish</li>
<li class="searchable hide" data-index="ali">ali</li>
<li class="searchable show" data-index="xyz">xyz</li>
</ul>
When I apply style by:
.searchable:not([data-index*=\"" + val + "\"]) {
display: none;
}
// where val=a; since I am searching by a
It resulted in:
ajay
amit
Instead expected result was:
ajay
amit
ashish
ali

Your .hide rules will still hide the elements that match the criteria of your :not([...]) selector.
Assuming your .show and .hide rules look this ...
.searchable.show {
display: block;
}
.searchable.hide {
display: none;
}
... in cojunction with your rule ...
.searchable:not([data-index*="a"]) {
display: none;
}
... you still need a rule like this to make hidden items, that meet the criteria, visible:
.hide[data-index*="a"] {
display: block;
}
Working fiddle: http://jsfiddle.net/x5py4c5j/

Related

Bootstrap, I created a dropdown menu, how can I highlight choices on hover?

I created a dropdown menu that opens when you click on a text box, and then when you chose a string for that dropdown list, it puts it in the text box.
I would like to make that when you hover your mouse on the strings in the dropdown, they get slightly highlighted! how can I achieve this?
<div class="row">
<div class="col-xs-12 max300" uib-dropdown is-open="vm.descriptionDropdownOpen">
<textarea name="remarks" class="form-control" ng-model="vm.presence.description" ng-click="vm.toggleDescriptionDropdown()" autofocus></textarea>
<ul id="descriptionDropdown" uib-dropdown-menu>
<li ng-repeat="descr in vm.loadedDescriptions" ng-click="vm.presence.description = descr.text; vm.descriptionDropdownOpen = false;">
{{descr.text}}
</li>
</ul>
and the css to keep the dropdown aligned with the textbox:
#descriptionDropdown {
width: 100%;
line-height: 150%;
padding-left: 8px;
position: relative;
}
thank you very much
you can do something like this
#descriptionDropdown li:hover{
background-color:#eaeaea;
}
Change the color code to your desired color code.
And remove the padding from ul to avoid space around background when you hover. Instead, use padding on li
#descriptionDropdown li{
padding-left:8px;
}
You could add this css :
li:hover {
background-color: blue;
}

List items not correctly aligning with an ng-repeat

I have a simple ng-repeat <li>. Each <li> consumes 33.33% of the width so 3 items per row.
However, for some reason the items in the second row do not line up. After a big of digging, if i apply a min-width of say, 400px, then it works. But, i can not do this as the description text length is dynamic.
HTML:
<ul class="grid-wrap">
<li class="grid-col one-third" ng-repeat="job in Jobs" ng-init="descriptionLimit = 20">
<div>{{ job.JobTitle }}</div>
<div>{{ job.Location }}</div>
<div>{{ job.JobDescription | limitTo:descriptionLimit }}
<span ng-click="descriptionLimit = job.JobDescription.length"> >> </span></div>
</li>
</ul>
CSS:
ul, ol {
list-style: none;
padding: 0;
margin: 0;
}
.grid-wrap {
margin-left: -3em; /* the same as your gutter */
overflow: hidden;
clear: both;
}
.grid-col {
float: left;
padding-left: 3em; /* this is your gutter between columns */
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.one-third {
width: 33.33%;
}
plunker: http://plnkr.co/edit/oWXrqoJpaYPDbe4TwT3c?p=preview
If you click on the >> the description will expand and you can see each <li> does not line up:
Might something like this be what you are looking for?
.one-third:nth-of-type(3n+1) {
clear: both;
}
I.e. if you want to have exactly a maximum of 3 lis per row, and you want to always align your rows vertically, you'll need to explicitly do so.
Edit: And of course you could do this also with Angular, for example like this, first define a clearing class:
.clear-li {
clear:both
}
and then apply it with ng-class:
<li class="grid-col one-third" ng-repeat="job in Jobs" ng-init="descriptionLimit = 20" ng-class="{'clear-li': ($index % 3 === 0)}">

Angularjs - Unexpected space after last ng-repeat li

I am having a very strange layout issue with list-items generated using ng-repeat.
Plunker here
If you look at the view, you will see that the li in green (not generated using ng-repeat) goes to the next line because of the unexpected space. Also, if you change the width of li to 33%, you will see that the last li (Add User) is not aligned correctly.
I can work around this with some css tricks, but I want to understand why this is happening and if there is any way to avoid this. Has anyone encountered this before and figured out why this is happening?
Adding code below only because plunker link needs to be accompanied with some code
.users * {
box-sizing: border-box;
}
.users ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.users ul li {
width: 49%;
margin: 5px 1% 0 0;
padding: 0;
display: inline-block;
}
.users ul li.user {
background: yellow;
}
.users ul li.add-user {
background: lightgreen;
}
It's because you have a blank space (created by the carriage return) beetween the closing </li> and the <li class="add-user">
Write your html like this and the last li will be displayed correctly :
...
<li class="user" data-ng-repeat="user in vm.users track by $index">
<div>{{ user.name }}</div>
</li><li class="add-user">
<div>
<a>Add Child</a>
</div>
</li>
...

css display:none on everything inside a div not working

I'm trying to make some image based links show up only when I hover over a link in my header using only CSS. I seem to be able to get this to work with images only, but as soon as I add around the images the code stops working.
Here are the basics of what I have...
HTML:
<ul id="Menu">
<li>
<a href="#">Link1
<div class="hoverLinks">
<img src="/img/pic1.jpg">
<img src="/img/pic2.jpg">
</div>
</a>
</li>
<li>Link2</li>
<li>Link3</li>
</ul>
CSS:
#Menu a div.hoverLinks {
display: none; }
#Menu a:hover div.hoverLinks {
display: block; }
As I mentioned, if I remove the from the images pic1 and pic2, this works perfectly. Working with non-linked images-jsfiddle. But as soon as I try to make the images links, the display:none stops working. Is this a selector issue? I've tried #Menu a div.hoverLinks * { and variations of that to get this working, but no dice. Is there a way to make this to work for everything inside the div? non-working code-jsfiddle
This will hide show images on link hover
http://jsfiddle.net/LE6gf/2/
#Menu .hoverLinks {
display: none; }
#Menu li:hover .hoverLinks {
display: block; }
Please check the following modifications in CSS
#Menu a ~ div.hoverLinks {
display: none;
}
#Menu a:hover ~ div.hoverLinks {
display: block;
}
This allows me to use ~ sibling selector on hover.
Try this:
#Menu .hoverLinks {
display: none; }
http://jsfiddle.net/maysamsh/LE6gf/1/

how to select all the extjs dropdown values in selenium webdriver

I am trying to a select option from extjs combo box.
Here in the below code listElements is giving only the visible options(which are shown in the screen) and not all the options.
Here am restricted to select one of the options which are available in the screen.
I want to select the value which are in the bottom of the list.
I don't find any option to drag down the list to select the desired option.
List<WebElement> listElements = TestUtil.getWebDriver().findElements((By.className("x-boundlist-item")));
for(WebElement ele : listElements){
if(ele.getText().equals(TestUtil.getValue(DateTimeConstants.TIMEZONE_INPUT_VALUE))){
ele.click();
break;
}
}
Please find the html :
This is the combo box html:
<input id="currentTimezone-inputEl" class="x-form-field x-form-text x-form-focus x-field-form-focus x-field-default-form-focus" type="text" style="width: 100%; -moz-user-select: text;" name="dateTimeData.selectedTimezone" value="-- Please Select --" autocomplete="off" aria-invalid="false" data-errorqtip="">
Options are available below like this:
<div id="ext-gen1024" class="x-reset">
<div id="ext-gen1074" class="x-reset">
<div id="ext-gen1076" class="x-css-shadow" role="presentation" style="z-index: 19000; left: -9999px; top: -9995px; width: 355px; height: 296px; box-shadow: 0px 0px 4px rgb(136, 136, 136); display: none;"></div>
<div id="ext-gen1079" class="x-css-shadow" role="presentation" style="z-index: 19000; left: 20px; top: 321px; width: 355px; height: 296px; box-shadow: 0px 0px 4px rgb(136, 136, 136); display: none;"></div>
<div id="boundlist-1022" class="x-boundlist x-boundlist-floating x-layer x-boundlist-default" tabindex="-1" style="left: 20px; top: 317px; width: 355px; z-index: 19001; height: 300px; display: none;">
<div id="boundlist-1022-listEl" class="x-boundlist-list-ct" style="overflow: auto; height: 299px;">
<ul>
<li class="x-boundlist-item" role="option">Africa/Abidjan</li>
<li class="x-boundlist-item" role="option">Africa/Accra</li>
<li class="x-boundlist-item" role="option">Africa/Addis_Ababa</li>
<li class="x-boundlist-item" role="option">Africa/Algiers</li>
<li class="x-boundlist-item" role="option">Africa/Asmara</li>
<li class="x-boundlist-item x-boundlist-selected" role="option">America/St_Lucia</li>
</div>
</div>
</div>
Yes, I can reproduce this issue. The reason is that Selenium won't click on invisible elements, each of the invisible element's text will also be empty.
Here most of the combo list elements are invisible, so ele.getText() won't get you anything for them. As a result, you won't be able to compare the text with the one you want.
However, the workaround is, without using ele.getText() to get the text, you can try use textContent attribute of an element to get the text. Also, Selenium won't click on invisible element, so you need to use Actions click() rather than normal click(). Below is how you can do it.
List<WebElement> listElements = TestUtil.getWebDriver().findElements((By.cssSelector(".x-boundlist:not([style*='display: none'])")));
for(WebElement ele : listElements){
if(ele.getAttribute("textContent").equals(TestUtil.getValue(DateTimeConstants.TIMEZONE_INPUT_VALUE))) {
// print out ele.getAttribute("textContent") if you want
// ele.click(); ElementNotVisible exception may be thrown
new Actions(TestUtil.getWebDriver()).click(ele).perform();
break;
}
}
}
To solve this we can use xpath in the following manner. The reason why a country is not selected is it is not visible and for invisible elements selenium cannot perform the action.
We have to first make the countries list visible by clicking on the input box. Once the list is visible we can select any of the country in the list.
// Code to make the country list visible
WebElement element = driver.findElement(By.xpath("//div[contains(#id, 'boundlist')]"));
element.click();
//To click on some country in the drop down
driver.findElement(By.xpath("//div[contains(#id, 'boundlist')]//ul//li[text() = 'Africa/Abidjan']")).click();
//To make a reusable method
public void selectCountry(String countryName)
{
driver.findElement(By.xpath("//div[contains(#id, 'boundlist')]//ul//li[text() = '" +countryName +"']"));
}

Resources