Link to JS Fiddle:
http://jsfiddle.net/TomHagen/smnpg7ua/1/
<td class="lastCol">
View Detail
<div id="div2">
<input type="button" class="lightGrayButton btn btn-mini btn-primary pull-right cartButton atc" value="Select Plan">
</div>
</td>
The above code in jsfiddle works fine in Firefox and Chrome, but in IE browsers, the View detail is aligned to the right and Select Plan is in the left.
I tried removing pull-right, having pull-right along with the div tag, having a new div for pull-right but nothing seem to be working.
I think its working fine in IE9 but not in IE8. The problem with your that pull-right and other col* in bootstrap 3 is that they make extensive use of media queries to make floats and columns responsive.
Its suggested that you do not use bootstrap if you want to support IE8 but if you must, you can add link
<script src="assets/js/css3-mediaqueries.js"></script>
and it will fix your issues.
Related
In my testcase i have the next locater:
Double Click Element //input[#value='user1']
The locater is for the next snippet:
<tr onselectstart="listview_onselectstart(this, event)" tabindex="1" class="row altrow selected"><input class="text" type="text" tabindex="-1" readonly="readonly" style="width:;" value="user1">
This works perfect with Chrome and Firefox. When i try this with ie i see the page refresing and nothing happends.
Doesnt ie works with javascript ? Or what can be the problem ?
IE has a long-standing history of extremely poor performance when it comes to XPath selectors.
Please consider using CSS selectors if you intend to work with IE.
In your case, Double Click Element css=input[value=user1] should do the trick.
I tried utilizing bootstrap's hidden-sm to hide some class but it seems working only for portrait mode.
<div class="col-md-2 hidden-sm" >
<div class="topFilterCtrl filterBarCommon" title="Filter By"
ng-click="searchReservationVm.closeAllFilterDiv()">
<span id="filterByLabel">Filter By</span>
</div>
</div>
I want it to work for landscape mode too. How do I fix it?
Try using visible instead of hidden.
It all depends on how many pixels wide your tablet is on Landscape mode. You should be able to google it and figure it out...
Extra small devices- xs(<768px)
Small devices - sm (≥768px)
Medium devices - md (≥992px)
Large devices - lg (≥1200px)
You could to use a combination of .hidden-xs and .hidden-sm to hide on anything less than 992px which usually means tablets.
Check out the documentation on Responsive Utilities Classes
<div class="col-md-2 hidden-xs hidden-sm" >
<div class="topFilterCtrl filterBarCommon" title="Filter By" ng-click="searchReservationVm.closeAllFilterDiv()">
<span id="filterByLabel">Filter By</span>
</div>
</div>
Or you could use a combination of .visible-md-block and .visible-lg-block as well.
I am new to working with worklight enviroment and started working it on recently.
I am using dojo version 1.9 (the IBM supllied one) , worklight 6.1, OS windows 7, eclipse juno sr2 64bit, IE 10 (For RPE), Google chrome latest (As default browser).
I have tried many widgets in dojo mobile and all of them work fine, i have been through other questions too like "Worklight 6.1 Android Applicaiton renders all views with no widgets" and followed all steps given in the solution and successfully created and viewed the pages on both MBS and android emulator.
The only problem is when i am working with views. I add a tabBar from dojo and TabBarButtons for view transitions . Also add a few views in the pages and link them with the buttons. I also check and see that my main.js file is updated with all included elements.
Although the toolbar along with default view is visible it does not switch view when i click on other buttons in tabBar.
also onclicking the TabBarButtons an error popsup in chrome console -
Uncaught TypeError: undefined is not a function
This error pops up on each click .
here is the structure of my source code of in the body tag of index.html file :-
<body style="display: none;">
<div data-dojo-type="dojox.mobile.View" id="view2"
data-dojo-props="selected:true">
<div data-dojo-type="dojox.mobile.View" id="view0" data-dojo-props="selected:true" >
<div data-dojo-type="dojox.mobile.Heading"
data-dojo-props="label:'Hello world'"></div>
<button data-dojo-type="dojox.mobile.Button">Hello</button>
<input data-dojo-type="dojox.mobile.TextBox"><input type="range"
data-dojo-type="dojox.mobile.Slider"
data-dojo-props="orientation:'H'">
</div>
<div data-dojo-type="dojox.mobile.View" id="view1"
data-dojo-props="selected:false">
<div data-dojo-type="dojox.mobile.Heading"
data-dojo-props="label:'About',moveTo:'view0'">
</div>
<div data-dojo-type="dojox.mobile.RoundRect">
Hello, we are a leading company in innovations
</div>
</div>
<ul data-dojo-type="dojox.mobile.TabBar" fixed="bottom" id="Tab1">
<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:view0,transition:'slide'" id="tabB1">Home</li>
<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:view1,transition:'slide'" id="tabB2">About</li>
</ul>
</div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
</body>
// Rest all is default code, no changes in jquery version or anything else
I have also tried the following things and none of them seem to work:-
-Copied and replaced files in www folder from dojoLib/dojo/dojo/nls/core-web-layer.js and mobile-web-layer.js files.
-Kept the Tabbar out of any view directly into body tag and linked views to it.
-Added id attribute to tabBar and tab button elements, and view elements.
-turned off provide missing library resources and included missing files (if any) ,rebuilt the project and ran again.
The main issue (causing the exception) is the missing quotes around the view ids of the moveto attributes. It should be:
data-dojo-props="moveTo:'view0',
Once fixed, your sample will work.
But there are another issue, this time a design one: the TabBar fixed property is only meaningful when used with a ScrollableView (this property ensures the tabbar is not scrolled and keeps its bottom position). So your outer view should be a ScrollableView instead.
Also, note that nesting views come with some limitations. In particular, using the 'moveto' attribute you cannot transition from a view to another view if the latter is contained in another parent.
Do not hesitate to look at the various tests in dojox/mobile/tests and to the documentation
I am using a dijit/layout/TabContainer with two tabs. I create them like this:
<div dojoType="dijit.layout.TabContainer" doLayout="false">
<div dojoType="dijit.layout.ContentPane" title="First tab" style="background-color:rgb(237,240,246)" doLayout="false"> Some dynamic content here </div>
<div dojoType="dijit.layout.ContentPane" title="Second tab" style="background- color:rgb(237,240,246)" doLayout="false"> Some dynamic content here </div>
</div>
This works fine for Firefox, Chrome and IE9, but doesn't render properly on ipad with Safari. The first time the first tab displays correctly, but then it takes the width of the second tab, which is larger. I believe that this should not happen as I have added the doLayout flag. I don't know if it matters, but I am using dojo with xpages framework.
Thanks a lot in advance!
I added
controllerWidget="dijit.layout.TabController"
to the div of TabContainer along with a width in percent and and now it displays correctly in Safari too.
The problem was that Safari needed a width to be defined. But as my content is dynamic, I couldn't define a fixed width in pixels. So in order to use width in percent I had to also add the above flag. I don't know if this is the appropriate way to achieve this, but it fixes my problem.
I have to click on the button which has id. But this id is generated dynamically. And find By.className() is not doing anything.
The HTML code for the button:
<td class="x-btn-mc">
<em class="" unselectable="on">
<button id="cq-gen372" class=" x-btn-text" type="button">OK</button>
</em>
</td>
How to select the button and click on it in Java?
By.className() really was bugged in IE and some older Selenium versions. I didn't know it is still the case. Anyway! You can search by a lot of things, not just id:
You can try By.xpath("//button[text()='OK']"); if it is the only (or the first) OK button on page.
For more xpaths, see XPath v1.0 on w3.org and XPath v2.0 on w3.org - only for some new browsers!.
Or you can go with css selectors - The w3 again or wikipedia.
You can go with below options
//button[text()='OK']
xpath=//button[contains(., 'OK')]
//button[contains(#class, 'x-btn-text')]