I have a problem selecting the options in unidentified dropdown menu. Elements of the dropdown appears when i click on dropdown arrow, but I cant click on them, because I don't know their id's or other properties that I can use.
Here is the code. I can't select from select_list with:
on_page(RegistrationPage).id_of_select_list_with_options = "8"
or
#browser.select_list(:name => "field_profile_bday[0][value][day]").select("8")
or
#browser.select_list(:id => "edit-field-profile-bday-0-value-day").select("8")
The error is: Element is not currently visible and so may not be interacted with (Selenium::WebDriver::Error::ElementNotVisibleError)
When I click on combo-button element dropdown list appears, but I can't select elements in it because they appear in combo-selected div after selecting. (Like "Jour" text in combo-selected div, it is there by default)
Here is the html:
<div class="form-item" id="edit-field-profile-bday-0-value-day-wrapper">
<label for="edit-field-profile-bday-0-value-day">Jour : <span class="form-required" title="Ce champ est obligatoire.">*</span></label>
<select name="field_profile_bday[0][value][day]" class="form-select required date-day" id="edit-field-profile-bday-0-value-day" ><option value="" selected="selected">Jour</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select>
</div>
<div class="combo-wrapper" style="display: inline-block; width: 61px; height: 24px; " tabindex="0"><div class="combo-button" style="width: 24px; height: 24px; display: inline-block; ">+</div><div class="combo-selected" style="width: 37px; height: 24px; display: inline-block; ">Jour</div></div>
<div class="combo-button" style="width: 24px; height: 24px; display: inline-block; ">+</div>
<div class="combo-selected" style="width: 37px; height: 24px; display: inline-block; ">Jour</div>
"Jour"
</div>
Instead of .select("8"). Try something like:
#browser.select_list(:name => "field_profile_bday[0][value][day]").option(:value, '8').select
or
#browser.select_list(:name => "field_profile_bday[0][value][day]").options[7].select
I think you needed to point to the option element and then use inherent select method. Hope this works. Good Luck!
Related
I am using Kendo Multiselect control. I wish to change the Z-index of the control. Here is the rendered html markup from the firebug window.
<div class="k-animation-container" style="width: 383px; height: 124px; margin-left: -10px; padding-left: 10px; padding-right: 10px; padding-bottom: 15px; overflow: hidden; display: none; position: absolute; top: 237.4px; z-index: 10002; left: 275.4px; box-sizing: content-box;">
<div class="k-list-container k-popup k-group k-reset" id="selInvestors-list" data-role="popup" style="height: auto; display: none; font-size: 12px; font-family: Arial,Helvetica,sans-serif; font-stretch: normal; font-style: normal; font-weight: 400; line-height: 15.2px; width: 377.2px; transform: translateY(-123px); position: absolute;">
<ul class="k-list k-reset" unselectable="on" style="overflow: auto; height: auto;" tabindex="-1" role="listbox" aria-hidden="true" id="selInvestors_listbox" aria-live="polite">
<li class="k-item" unselectable="on" data-idx="2" role="option" tabindex="-1">Client</li>
<li class="k-item" unselectable="on" data-idx="3" role="option" tabindex="-1">Employees</li>
<li class="k-item" unselectable="on" data-idx="4" role="option" tabindex="-1">Other</li>
</ul>
</div>
The jquery code under the Dom ready event is :-
$("#selInvestors").kendoMultiSelect({
dataTextField: "text",
dataValueField: "bitwiseval",
dataSource: invJsonObj
});
var selinvCtl = $("#selInvestors").data("kendoMultiSelect");
selinvCtl.bind("open", function (e) {
//console.log("open event handler");
e.sender.list.closest(".k-animation-container").css('z-index', '90');
});
The problem is every time the dropdown opens it goes back to the z-index value of "10002". I want to set the z-index to "90" every time the dropdown opens or when the dropdown remained open.
Please suggest the soln.
The problem is that the first time you open the list, the k-animation-container does not yet exist, so you cannot set the z-index. On consequent opens, the KendoUI framework always resets the z-index to 1002.
I guess one workaround is for you set set the z-index after a small delay so you are sure the container is there and that KendoUI is done messing with the z-index:
var selinvCtl = $("#select").data("kendoMultiSelect");
selinvCtl.bind("open", function (e) {
setTimeout(setZIndex90, 200, e);
});
function setZIndex90(event) {
event.sender.list.closest(".k-animation-container").css('z-index', '90');
}
In this example I have introduced a 200 millisecond delay.
DEMO
I'm wondering if it is possible to specify a div (example div2) or another sourrounding element of an image to fit the height and width to its child.
Besides, the image should resize (keep aspect ratio) to the full available space (div1) of the div2's parent.
As the image and therefore the aspect ratio, image orientation, hieght and width can change dynamically, no fixed sizing is possible
Here is an example fiddle:
http://jsfiddle.net/rp7u3u2r/1/
<div style="width:200px; height: 200px;">
<div style="max-height: 100%;max-width:100%;">
<img style="max-height: 100%;max-width: 100%;" src="..."/>
</div>
</div>
Expected behavior:
I already tried 'object-fit', 'fit-content', 'display: table-cell', 'display: inline-block', but nothing seems to work as expected.
updated fiddle http://jsfiddle.net/rp7u3u2r/3/
<div style="background-color:red; width:200px; height: 200px; font-size:0; line-height: 0;">
<div style="background-color: green; display: inline-block;">
<img style="width: auto; height: auto; max-height: 200px;max-width: 200px;"
src="http://upload.wikimedia.org/wikipedia/commons/a/af/Bonsai_IMG_6426.jpg" />
</div>
</div>
Use these styles:
#div1 {
width: 200px;
height: 200px;
}
#div2 {
box-sizing: border-box;
height: 100%;
float: left;
}
img {
height: 100%;
}
Both div2 and img will be constrained to the height of div1.
box-sizing allows you to add border and padding to div2 without overflowing div1.
Fiddle
I have a three column layout where the logo at browser view is to the left, one word is in the middle, and the nav menu is to the right. This is fine at full browser.
When it is resized to mid or mobile view the columns are not clearing and stacking correctly.
Here is what I am getting right now at full view: http://postimg.org/image/wvfl1hkut/
Here is what needs fixed at mobile and mid view: http://postimg.org/image/sa1nvyw8j/
Here is my code:
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="row">
<div class="header">
<div class="col-xs-6 col-sm-4">
<a href="{{ URL::route('home') }}">
<div class="header_group">
<img src="../../images/logo.png">
</div><!--header group -->
</a>
</div>
<div class="col-xs-6 col-sm-3"></div>
<div class="col-xs-6 col-sm-4">
<p> </p>
</div>
<div class="col-xs-6 col-sm-4">
#include('layout.navigation')
</div>
</div><!-- main header -->
</div><!-- row -->
</div>
</div>
External CSS sheet
.header {
width: 100%;
height: auto;
margin: 0 auto;
background: red;
}
.header_group {
background-color: none;
width: 100%;
height: auto;
display: inline-table;
font-size: 1.5em;
font-weight: 400;
font-family: 'Roboto', sans-serif;
color: #f0fff0;
clear: none;
margin-top: 5%;
}
.header_text {
vertical-align: middle;
display: inline;
text-align: center;
color: #f05152;
}
.nav {
width: auto;
height: auto;
margin-top: 12%;
}
.nav a {
color: #000;
padding-left: 10%;
margin-left: 4%;
}
.navbar {
width: 100%;
height: 20%;
padding-top: 0;
}
.wrapper {
width: 100%;
height: 500px;
background: url(../../../images/yellow.png) repeat,
}
Bootstrap has a 12 column grid. Each set of 12 columns should be contained in a .row.
Your code has 4 .col-xs-6 columns, which total 24 columns. It also has 3 .col-sm-4 and 1 .col-sm-3 columns, which total 15 columns.
If you place the columns in their correct rows of 12 then they will clearfix correctly.
FYI: From the documentation...
Content should be placed within columns, and only columns may be immediate children of rows.
Move .header.
I am displaying some list of ids as follows
<li>
<label> Nest</label>
<select id="NestId" class="Select input-validation-error" name="NestId" data-val-required="Please select nest name." data-val-number="The field Nest ipId must be a number." data-val="true">
<span data-valmsg-for="NestId"></span>
<div class="formError NestshipId" style="top: -69px; left: 202px; opacity: 0.8;">
</li>
The arrow of the ddl is working fine before showing the requirefield erorr msg.Once its shown, some part of it is shadowig over the ddl arrow.
so the arrow is not clickable through the erorr message
When I inspect the code through firebug, I could see the element like this
<li>
<label> Relation</label>
<select id="NestId" class="Select input-validation-error" name="NestId" data-val-required="Please select relation." data-val- number="The field NestId must be a number." data-val="true">
<span data-valmsg-for="NestId"></span>
<div class="formError NestId" style="top: -69px; left: 202px; opacity: 0.8;">
.input-validation-error
{
border: 1px solid #ff0000;
background-color: #ffeeee;
}
<div class="formError NestId" style="top: -69px; left: 202px; opacity: 0.8;">
<div class="formErrorContent">Please select relation.</div>
</div>
I think the arrow is not clickable because of the presence of field message over it.
Can anybody please help me to find a solution for this.
The message should be visible as well as the ddl arrow should work
You can also try setting the position of the error message to the left, in this case it will not be overlapping on the dropdown arrow.
.input-validation-error
{
border: 1px solid #ff0000;
background-color: #ffeeee;
position:relative;
left:20px;
}
I have an awkward visual glitch. I want a nice transition when changing pages on an app.
Unfortunately, the first time I change to another page, instead of sliding the current page out and the new page in, the current page is immediately replaced by the new page and then slides out. When the first page is out of view, the new page is shown. However, the second time around, it works like a charm!
This is running on iphone with jQuery Mobile + PhoneGap
I made a video to help clarify the issue: http://www.youtube.com/watch?v=Ybvzh_wTnSE
<body style="background-color: #000;">
<div id="container" style="display:none;">
<div id="side-menu" style="display:none;">
<div id="header_top"></div>
<div id="header_dives" class="selected"></div>
<div id="header_spacer1"></div>
<div id="header_explore"></div>
<div id="header_spacer2"></div>
<div id="header_search"></div>
<div id="header_spacer3"></div>
<div id="header_settings"></div>
<div id="header_bottom"></div>
</div>
<div id="slide_mask">
<!-- START of LOGIN page -->
<div data-role="page" id="login">
<div id="home_frame">
<div id="home_logo"></div>
<div id="home_fblogin" onclick="login()"></div>
<div class="home_login">
<p>Email: <input type="text" name="user[email]" size="30"/></p>
<p>Password: <input type="password" name="user[password]" size="30"/></p>
<button onclick="show_page_home();">LOGIN</button>
</div>
</div>
</div>
<!-- END of LOGIN page -->
<!-- START of LOGIN page -->
<div data-role="page" id="dives" class="right_pane">
<p>My dives !</p>
</div><!-- /content -->
<div data-role="page" id="explore" class="hidden right_pane">
<p>My explore !</p>
</div><!-- /content -->
<div data-role="page" id="search" class="hidden right_pane">
<p>My search !</p>
</div><!-- /content -->
<div data-role="page" id="settings" class="hidden right_pane">
<p>My settings !</p>
<button onclick="logout_db();">logout</button>
</div><!-- /content -->
<!-- END of LOGIN page -->
</div>
</div>
<div id="log"></div>
<div id="data"></div>
</body>
And the relevant CSS:
body {margin: 0; font: 18px Helvetica; text-align: center; background-color: #000; background: url(../img/bg_big.png) repeat;
-webkit-user-select: none; /* prevent copy paste for all elements */
}
#container { width:320px; height:460px; overflow: hidden;}
input{ -webkit-user-select: text; /* enable copy paste for elements with this class */}
a {-webkit-user-select: none; /* prevent copy paste for all elements */}
span {-webkit-user-select: none; /* prevent copy paste for all elements */}
#side-menu {z-index: 1000 !important; position: fixed; height: 460px; width: 56.5px; background: url(../img/bg_big.png) no-repeat; display: inline-block;
overflow: hidden; top: 0px; left: 0px; }
#header_top {background: url(../img/header/header_top.png) no-repeat; background-size: 56.5px 48.96px; width: 56.5px; height: 48.96px; display: block;}
#header_dives {background: url(../img/header/dives.png) no-repeat; background-size: 56.5px 51.75px; width: 56.5px; height: 51.75px; display: block;}
#header_dives.selected{background: url(../img/header/dives_selected.png) no-repeat;}
#header_spacer1{background: url(../img/header/header_space1.png) no-repeat; background-size: 56.5px 13.9px; width: 56.5px; height: 13.9px; display: block;}
#header_explore{background: url(../img/header/explore.png) no-repeat; background-size: 56.5px 51.75px; width: 56.5px; height: 51.75px; display: block;}
#header_explore.selected{background: url(../img/header/explore_selected.png) no-repeat;}
#header_spacer2{background: url(../img/header/header_space2.png) no-repeat; background-size: 56.5px 15.33px; width: 56.5px; height: 15.33px; display: block;}
#header_search{background: url(../img/header/search.png) no-repeat; background-size: 56.5px 51.75px; width: 56.5px; height: 51.75px; display: block;}
#header_search.selected{background: url(../img/header/search_selected.png) no-repeat;}
#header_spacer3{background: url(../img/header/header_space3.png) no-repeat; background-size: 56.5px 17.73px; width: 56.5px; height: 17.73px; display: block;}
#header_settings{background: url(../img/header/settings.png) no-repeat; background-size: 56.5px 51.75px; width: 56.5px; height: 51.75px; display: block;}
#header_settings.selected{background: url(../img/header/settings_selected.png) no-repeat;}
#header_bottom{background: url(../img/header/header_bottom.png) no-repeat; background-size: 56.5px 160px; width: 56.5px; height: 160px; display: block;}
.hidden {display: none;}
.right_pane{width: 263.5px !important; background: url(../img/right_bg.png) no-repeat; background-size:263.5px 460px; width: 263.5px; height: 460px; left: 56.5px !important;}
#slide_mask{ display: inline-block; overflow: hidden; padding-left: 56.5px; width: 263.5px; height: 460px; top: 0;}
and the bit of JS:
///////////////////////////////////
//MENU MECHANICS
///////////////////////////////////
function showdives(){
$("#side-menu .selected").removeClass("selected");
$("#header_dives").addClass("selected");
}
function showexplore(){
$("#side-menu .selected").removeClass("selected");
$("#header_explore").addClass("selected");
}
function showsearch(){
$("#side-menu .selected").removeClass("selected");
$("#header_search").addClass("selected");
}
function showsettings(){
$("#side-menu .selected").removeClass("selected");
$("#header_settings").addClass("selected");
}
The onclick methods only add/remove the "selected" class to/from the menu items.
I believe people refer to this as "flickering", so you'll have better results when you search for that. After looking around, it looks like your problem is common on android and can be solved by adding the following CSS:
.ui-page {
-webkit-backface-visibility: hidden;
}
Here are a few references:
http://blogs.bytecode.com.au/glen/2011/07/14/eliminating-annoying-flicker-transitions-with.html
Flickering when navigating between pages
https://forum.jquery.com/topic/performance-of-jquery-mobile-on-android-2-2-and-2-3-flickering
I and my friends are using JQuery 1.2.
The way to solve this issue was to put data-transition="none". Maybe this cannot appear mobile
style that much, but works and delete the flickering problem.
Hope this help.
I had the same problem, but even worse, when wrapping a Jquery mobile app in Phonegap. Not only were the page transitions flickering, but the UI was completely broken. I used Jquery 1.8 and Jquery mobile 1.2 in this app.
I have tried most of the solutions suggested here on SO, but nothing worked. Then I found this solution by Piotr Walczyszyn, and everything worked like a dream! Highly recommended for anyone using Jquery mobile and Phonegap together.