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.
Related
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.
I have a sidebar on the right and content on the left:
<div class="col-md-9">
<p>Main. At large zoom -- currently it goes to top. I want it to go to the bottom.</p>
</div>
<div class="col-md-3">
<p>Sidebar. At large zoom -- currently it goes to bottom. I want it to go to the top.</p>
</div>
I want the sidebar to go up at large zoom (e.g. on a phone). But bootstrap sends it to the bottom: http://www.bootply.com/nqOuCvbXZR
Bootstrap 3 docs use the same layout and suffer from the same issue: for example see http://getbootstrap.com/css
Is it possible to modify bootstrap default arrangement rules?
Think mobile first. Put the column that on mobile will go up first. And use pull and push for larger screens.
<div class="col-xs-12 col-md-push-9 col-md-3">
<p>Sidebar. At large zoom -- currently it goes to bottom. I want it to go to the top.</p>
</div>
<div class="col-xs-12 col-md-pull-3 col-md-9">
<p>Main. At large zoom -- currently it goes to top. I want it to go to the bottom.</p>
</div>
Bootstrap's Horizontal description is the element I need, but I don't want it to stack on small devices. Is it that possible? Thanks
This is taken straight from the official documentation. You can replace the text .col-xs-6 given in the example below to your horizontal description.
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
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.