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>
Related
I am working on a legacy application that is being rewritten using Aurelia, the application has a bunch of static html in a tblHelp that needs to be displayed. I am using innerhtml.bind on a div in my view to databind the stored static HTML into the view. Each record is essentially a document complete with a full table of contents that links to other divs within the document (Bookmarks).
Something like:
<div id="toc">
<h1>Table of Contents</h1>
<ul>
<li>Section 1<li>
<li>Section 2<li>
</ul>
</div>
<div id="section1">
<h2>Section 1</h2>
<p>Paragraph Text...</p>
<p>Back to Table of Contents</p>
</div>
<div id="section2">
<h2>Section 2</h2>
<p>Paragraph Text...</p>
<p>Back to Table of Contents</p>
</div>
When I display the resulting page in my Aurelia view and click on the links, rather than moving to the proper Div on the current page, it seems to be attempting to route to an unknown route and ends up returning to the home page (that is my unknown route behavior). How do I make the Aurelia Router know that I am just moving around the same page and do not require it to route to another page?
I think you need to change your <div id= to <a id= which is the correct syntax for anchors. Hopefully Aurelia will recognize them as legitimate anchors when formatted correctly.
Also, since an anchor tag shouldn't wrap the whole content, you'll just open and close it at the top of the div. You can even leave the divs there but should not duplicate the id.
Update:
That being said, I created a GistRun that actually demonstrates that Aurelia should be able to handle the <div id= anchor targets. So, I'm not exactly sure why you're having problems.
Maybe this GistRun or the more standard <a id= approach will help you.
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.
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 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.