Develop Reference

How to Override JS applied CSS

I am using 3rd party multi select dropdown. If you heard of select2 you get idea. Multi Select dropdown is creating through JQuery called select2.min.js and dropdown width is auto calculating. How to apply static with on it because js applied css are the highest prior as per my knowledge.
Following the JQuery generated code
<span class="select2 select2-container select2-container--default select2-container--focus" dir="ltr" data-select2-id="1" style="width: 323px;"><span class="selection"><span class="select2-selection select2-selection--multiple" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="-1" aria-disabled="false">
<ul class="select2-selection__rendered">
<li class="select2-search select2-search--inline"><input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false" role="searchbox" aria-autocomplete="list" placeholder="" style="width: 0.75em;"></li>
</ul>
</span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>

Use the !important attribute to your CSS.

there are several ways how to delcare CSS and each of them has its own priority. In your case simple adding !important into css class could fix it. However if you wish to change the value in future you may struggle.
You can try to change the css value with Jquery .css() function, see if it helps.
If not you can try to write more specific selecotr in css, which has higher tier of priority than the default one from the library.

How to handle Angularjs / Javascript dropdown using Python / Selenium webdriver?

i want to automate some browser tasks using Python and Selenium webdriver on Chromium browser. My python script is already able to login, navigate to a subpage / do some clicks, and insert something into a form.
My problem is a mandatory dropdown list where i have to choose something before i can go on. I think the webpage contains angularjs / javascript at that point (third line in the code below) to create the dropdown, and i don't know how to handle that.
Problem seem to be 1) to locate the element (xpath seems to change sometimes), and 2) i'm unable to click or send keys to what i've found. Also i've tried some kinds of "WebDriverWait" and sleep commands and "wait.until(expected_conditions.visibility_of_element_located((By.XPATH, ...))"... no luck so far.
Is it at all possible to solve that problem with just Python and Selenium?
Or do i need something like Protractor (and does Protractor just works with Javascript commands)? Also i've seen Pytractor...
I'm quite a Newbie concerning that stuff, could someone please explain what could be a good way to solve this problem? Thanks in advance... :)
Webpage code looks like this (grabbed using Firebug/Firepath):
<div class="ng-scope ng-isolate-scope" model-contains-key="true" ref="salutations" cat-input-select="editDetail.salutation">
<div id="s2id_autogen1" class="select2-container form-control ng-untouched ng-valid ng-dirty ng-valid-parse">
<a class="select2-choice select2-default" tabindex="-1" href="javascript:void(0)">
<span id="select2-chosen-2" class="select2-chosen"/>
<abbr class="select2-search-choice-close"/>
<span class="select2-arrow" role="presentation">
<b role="presentation"/>
</span>
</a>
<label class="select2-offscreen" for="s2id_autogen2"/>
<input id="s2id_autogen2" class="select2-focusser select2-offscreen" type="text" role="button" aria-haspopup="true" aria-labelledby="select2-chosen-2"/>
<div class="select2-drop select2-display-none select2-with-searchbox">
<div class="select2-search">
<label class="select2-offscreen" for="s2id_autogen2_search"/>
<input id="s2id_autogen2_search" class="select2-input" type="text" aria-autocomplete="list" aria-expanded="true" role="combobox" spellcheck="false" autocapitalize="off" autocorrect="off" autocomplete="off" aria-owns="select2-results-2" placeholder=""/>
</div>
<ul id="select2-results-2" class="select2-results" role="listbox"/>
</div>
</div>
<select class="form-control ng-untouched ng-valid ng-dirty ng-valid-parse" ng-change="modelChanged(); changeCallback({value: selectValue.value})" ng-readonly="readonly" ng-disabled="disabled" ng-model="selectValue.value" ui-select2="{dropdownAutoWidth: 'true', allowClear: 'false'}" tabindex="-1" title="" style="display: none;">
<option value=""/>
<!-- ngRepeat: option in options -->
<option class="ng-binding ng-scope ng-isolate-scope" cat-i18n="xxxxxxx.salutation.Mr" value="Mr" ng-repeat="option in options">Mr</option>
<!-- end ngRepeat: option in options -->
<option class="ng-binding ng-scope ng-isolate-scope" cat-i18n="xxxxxxx.salutation.Ms" value="Ms" ng-repeat="option in options">Ms</option>
<!-- end ngRepeat: option in options -->
</select>
<!-- ngIf: infoText -->
</div>

In order to automate any webpage developed in Angular JS, we have to use an opensource tool "Protractor". Selenium itself won't be supporting the Angular JS web applications automation. For more information on Protractor, please refer to the below article
Testing Angular JS application using Protractor
The protractor also uses the same commands which selenium uses.
Hope this helps.

Put a box outside the scrollable-menu

I have a dropdown menu scrollable with options. I also have on top of that a search-box (example "CAR"). Now the search-box makes part of the scrollable menu, so when you scroll down the search box goes away. I need the search box to stay fixed on top of the scrollable menu. So basically I have to move the search box "out" of the scrollable-menu section. The problem is in my javascript code (my html is fine, thats for sure) but I cannot find it, is it possible to achieve my goal?
My BOOTPLY... [BOOTPLY][1]

Simply change your HTML like this:
<div class="dropdown-menu brand">
<div style="position: relative;">
<input class="Car" placeholder="Car" type="text">
<div class=" scrollable-menu" style="margin-bottom: 70px;">
<div class="checkbox">
<label><input value="" type="checkbox"> Alpha</label>
</div>
I moved <input class="Car" placeholder="Car" type="text"> above your scrollable-menu div, it was your HTML after all.
You should also change the variable targetinput like this:
var targetinput = currentgroup.find('.Car > input[type="text"]');
It should select your textbox propperly now, this is because you tried to find a textbox within the class scrolllable menu, however we moved the textbox outside of it.

Kendo UI DatePicker, removing input styles

I am using a Kendo UI DatePicker control in our application, I would like to remove the styles applied to the input that triggers the datepicker to show.
When I initialize my datepicker like this:
$('.datepicker').kendoDatePicker();
The .datepicker element which is an input type='text' is wrapped by some elements so that the small calendar icon will appear.
<span class="k-widget k-datepicker k-header form__field box__filterlight__field datepicker">
<span class="k-picker-wrap k-state-default">
<input placeholder="from" class="form__field box__filterlight__field datepicker k-input" data-role="datepicker" type="text" role="combobox" aria-expanded="false" aria-disabled="false" aria-readonly="false" style="width: 100%;" aria-activedescendant="8beab73f-332b-45a7-8f0b-4a6c3faafcd6_cell_selected">
<span unselectable="on" class="k-select" role="button">
<span unselectable="on" class="k-icon k-i-calendar">select</span>
</span>
</span>
</span>
But I would like to have full control on it and just have the styles for the calendar. Ideally disable the wrapping Kendo UI does so the markup would stay like:
<input placeholder="from" class="form__field box__filterlight__field datepicker k-input" data-role="datepicker" type="text" role="combobox" aria-expanded="false" aria-disabled="false" aria-readonly="false" style="width: 100%;" aria-activedescendant="8beab73f-332b-45a7-8f0b-4a6c3faafcd6_cell_selected">
Is there a way to do that? I looked at the documentation and it does not seem to have a way to disable the wrapping.

What you could do us use jQuery, Javascript or other library to target the inner elements and just hide them from the DOM or remove them from the DOM on document ready or window load.
I would wrap your date picker control in a DIV, give that and ID and then using jQuery, target all the sub items and remove them from the DOM.
You can do 2 things, you can remove the icon elements and you can use the jQuery .unwrap() method to unwrap or remove the parent element.
I made a JSFiddle that might get you started. You can look at the output frame's elements in the browser element inspector to see the elements being removed.
https://jsfiddle.net/Ls6xv9yw/
$(function(){
$('#myCalendar').find('.k-select').remove(); //Will remove the k-select element containing the icon.
$('#myCalendar').find('.datepicker').unwrap();//Unwrap .datepicker input from it's immediate parent if you want this.
});
There might be unintended circumstances by removing these because of the way the datepicker works, but this should work, or at least get you a path to work with.

Sliding panel in the middle of the page. Z-index given not working

I am implementing sliding panel element but problem is when i slide out other div element is floating down.
I guess and tried to give z-index to element which i am sliding but it doesn't seems to work.
Let me put code for both div.
<div class="vrcontrol">
<div class="slide-out-div">
<a class="handle" href="http://link-for-non-js-users.html">Content</a>
<h3>Contact me</h3>
<p>Thanks for checking out my jQuery plugin, I hope you find this useful.
</p>
<p>This can be a form to submit feedback, or contact info</p>
</div>
This is div which i am sliding in and out and beneath is code of effective div.
<div class="askform">
<p class="titletext">Ask an Expert Trade Forum</p>
<p class="detailtext">WD-40’s leading source for DIY tips and tricks.</p>
<span>
<form id="askform" name="askform" action="" method="post">
<span class="left"><input name="input" type="text" class="askinputbox"/></span><span class="marginleft"><input type="image" src="images/search_icon.gif" /></span>
</form>
</span>
<div class="followus">
<span class="followtext">Follow us on</span><span class="right"><img src="images/bookmark.jpg" width="121" height="45" alt="Bookmark" /></span>
</div>
</div>
Sliding div is in left portion of the page and effective div is in right portion of the page.
I guess something with z-index, positioning element and overflow properties will do something.

For starters, this block of HTML is malformed:
<div class="vrcontrol">
<div class="slide-out-div">
<a class="handle" href="http://link-for-non-js-users.html">Content</a>
<h3>Contact me</h3>
<p>Thanks for checking out my jQuery plugin, I hope you find this useful.
</p>
<p>This can be a form to submit feedback, or contact info</p>
</div>
Where' the closing </div> for this div?
<div class="slide-out-div">
Also, without the accompanying CSS, it's hard to determine whether that is the problem as well.