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>
Related
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 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>
I am trying to use a simple mustache template with a list of items and display them in rows of 3 columns. The problem I am facing is how to get the "row" logic into the template (every 3 columns, start a new row).
Here is my template:
<div class="row">
{{#listings}}
<div class="col-md-4">
Item {{number}}
</div>
{{/listings}}
</div>
Bootstrap doesn't seem to like the fact that I shove way too many columns into the row. I did exactly this with foundation by zurb and it worked without a hitch.
Can anyone out there point me in the right direction?
Add all you col-md-4's in the same row. 3x col-md-4 makes 100% and the next one jump to next row. This could give you troubles when your col-md-4's differs in height, see also: How can I create multiple rows using semantic markup in Bootstrap 3? and Change overflow mode in small devices on Twitter Bootstrap 3.0
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.
A rich snippet example from Schema.org http://schema.org/AggregateRating:
<html>
<div itemscope itemtype="http://schema.org/Product">
<img itemprop="image" src="dell-30in-lcd.jpg" />
<span itemprop="name">Dell UltraSharp 30" LCD Monitor</span>
<div itemprop="aggregateRating"
itemscope itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue">87</span>
out of <span itemprop="bestRating">100</span>
based on <span itemprop="ratingCount">24</span> user ratings
</div>
</div>
</html>
But http://www.google.com/webmasters/tools/richsnippets won't show a preview.
So, the following words from http://support.google.com/webmasters/bin/answer.py?hl=en&answer=146645 are just lies?
New! schema.org lets you mark up a much wider range of item types on
your pages, using a vocabulary that Google, Microsoft, and Yahoo! can
all understand. Find out more. (Google still supports your existing
rich snippets markup, though.)
It is working absolutely fine.
Google is not obliged to show you preview every time, and here it shows an error when I inserted your give example from schema.org:
The following errors were found during preview generation:
This page does not contain authorship or rich snippet markup.
I have done it in my website's news pieces and it shows fine.