I'm trying to keep my Twitter Bootstrap layout from jumbling around when the browser size changes. I essentially want to keep a minimum width.
I've followed the directions on the bootstrap page to not have the fluid container or fluid rows, and I also tried adding a minimum width tag in the body, but for some reason have failed to get it to work correctly - I'm thinking there's got to be an easy solution here that I'm missing.
Thanks in advance
This is Bootstrap's responsive feature.
If you don't want it, don't reference responsive.less.
As SLaks said, the layout resizing is in Bootstrap's responsive code. If you're compiling the LESS files, don't include responsive.less (which in turn includes the other responsive less files in v2.0.3). Incidentally, responsive.less is not included by default.
If you're adding the supplied .css files (i.e., not compiling from LESS), just include bootstrap.css/bootstrap.min.css and not bootstrap-responsive.css/bootstrap-responsive.min.css on your page and it should work.
Related
I have a requirement to support push-style and overlay panels with variable widths in my desktop webapp and jQuery mobile comes so close, except for the lack of variable panel widths.
I have seen various answers on StackOverflow explaining how to override all the CSS properties to change the width globally for all panels, but I need to specify a different width for individual panels.
Is this possible in jQuery Mobile? If not, I would be interested to know if this is an issue with JQM itself or a technical limitation in general related to the way CSS transitions work maybe?
At this point it is not possible, at least not easily, you will need to heavily modify CSS to make it work. But to ask your question you can have panels with a varying width. If you need an example leave me a comment and I will make you one.
Or if you want to wait a bit, next jQuery Mobile version 1.4 will have this by default. Unfortunately alpha 1.4 will come out in next few days, so stable version will come in 1-1-5 months. If you are not ready to wait I will create you a working example with jQuery Mobile 1.3.2.
EDIT :
My bad, 1.4 alpha is out: http://jquerymobile.com/blog/2013/07/25/announcing-jquery-mobile-1-4-0-alpha/
I'm reading through the epub3 spec and trying to get a handle on what media queries can be used for in combination with fixed layout documents.
I'd like to be able to create fixed layout pages with <meta name="viewport" specified for specific devices and select which device-specific pages are actually included in the reading order and ToC based on the device's screen dimensions.
The best route towards this seems to be to use the 'hidden' attribute on the <li>element in the nav xhtml, but this can't be altered by css as far as I can see.
I've also tried css visibility and display attributes, but these are clearly designed to change current rendering, not add or remove actual rendering-independant content - whereas the epub3 spec (as well as the html spec) suggests that hidden is intended for exactly the kind of thing I want to do.
Otherwise, any ideas on showing a different fixed layout page based on device screen dimensions would be gratefully received!
What you're looking for is the concept of "rendition mapping", rather than media query. It's the ability to select entirely different renditions (layouts, including reading order) based on device characteristics (among other criteria) within the same publication.
It's not in the current EPUB 3.0 specification, but it's chartered to be a future addition. See the rendition mapping charter, specifically the section on Rendition Selection and Mapping.
It seems like what you are trying to do somehow violates the notion of fixed layout, which assumes a specific screen geography. As far as I can see, you are going to need to create different books for different device sizes.
You could do media queries for screen dimensions, but there is no way to use these to control what is present in the spine to my knowledge. As you've correctly intuited, the CSS visibility property is about hiding HTML elements on a page, not spine elements. The hidden attribute in the TOC cannot be controlled via CSS.
You could try
#media (max-device-width: 640px) {
body.omit-if-narrow { display: none; }
}
but I'm pretty sure that would give you a blank page.
I'd like to use this upgraded jQuery Mobile dual range slider.
jQuery Mobile dual range slider working but buggy
I need to use it with twitter bootstrap. However, jQuery Mobile doesn't play nice with Twitter bootstrap and is killing the dropdown menu when the javaScript files are placed at the bottom of the page (as per yslow). Here are 3 jsbin examples to illustrate the problem:
with jQuery Mobile added, twitter bootstrap menu fails:
http://jsbin.com/ibecox/1
without jQuery Mobile .js file, twitter bootstrap the menu works fine:
http://jsbin.com/ibecox/2
with all javaScript in the header (bad practice) the menu also works, but I'd need to avoid putting all the javaScript in the header:
http://jsbin.com/ibecox/3
I can see there's a broken link to the twitter bootstrap js, I've fixed it and your sample works fine for me, both the dropdown menu and the progress bar
If all you're trying to do is get jquerymobile's Range Slider to work with Bootstrap, you can use the Custom Download tool to download just the slice that (sort of) makes the Range Slider work.
What you get is unfortunately incomplete, and above all it doesn't self-initialize, so you'll need to do that manually:
$('div[data-role=rangeslider]').rangeslider();
And you'll need to apply some styles of your own to make up for a bit too much being left out in the custom download. But you will get Range Sliders without breaking Bootstrap.
The cause of the Bootstrap break when you use all of jquery mobile is more complex. The Init module applies a ton of classes all over your code, in particular .ui-btn to buttons. That's the main thing that blows up Bootstrap - the nav menu uses a button tag, and that tag gets that problematic class applied, and then in come all the problem styles from jquerymobile.
The hackier way to solve that in the large is to just use jquerymobile without the Init module then Init only what you need - hopefully their buttons aren't one of those things. The best way to solve it is pretty intense: Improve jquerymobile so that there's either no conflict with Bootstrap ever, or, some sort of special noBSconflict() method or something you can run that avoids applying classes that will break Bootstrap but otherwise proceeds as normal.
Throughout the jQuery Mobile docs, they use a left-side menu for navigation that changes to a more mobile friendly version when the browser width is smaller. You can see an example on this page.
They use this layout throughout the docs, and I can see in the source that they use two divs with the IDs "content-primary" and "content-secondary." My question relates to the fact that I can't find anything about this structure actually discussed in the documentation. It seems very strange that they would not include such a useful widget in the Framework. Did they use custom code to make this, or did I miss it in the documentation somehow?
I'm frankly quite surprised to see how challenging it's been to find a left nav example that works consistently and as expected in JQM.
I wound up copying code directly from the JQM docs, including grabbing their custom .js and .css scripts (which defines the .content-primary and .content-secondary classes, as well as the various #media queries which make the menu responsive).
The JQM docs do not use the "multi-page" format. Instead, each nav menu item links to a wholly separate URL (presumably prefetched into the DOM by adding data-prefetch="true" to the link), so each new page/URL must redefine the same nav menu over again.
This immediately makes my developer brain think "let's abstract the menu and include it on each page automatically". But how to 'include' the menu on each page without PHP (or other server-side language)? This is the problem I have yet to solve.
You may be able to call the $(document).bind('pageinit', function to manually inject your menu into the loading page by using javascript/jquery, but I have yet to figure out how to do this properly.
I'll keep you posted if/when I have a workable solution.
Actually this is not specific to jquery mobile, this is CSS3. You can check documentation here: http://www.css3.info/preview/media-queries/. Essentially what they do is specify style rules for different screen width using media query as shown in this example:
#media all and (min-width: 650px) { // you can define your width here
// style rules here
}
Are you talking about something like the left menu at http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/panels/panel-nav-form.html# ? Haven't played with it but it looks like these days it just takes
<div data-role="panel" data-position="left" data-position-fixed="false" data-display="reveal">
I just recently upgraded to 436 from 419, and have found that fitExactly will no longer have any effect.
You can see an example here:
(With 419)
(With 436)
The javascript config is in the page head.
I checked the versions in between, and the latest it works with is 419.
I could adjust the width in the Javascript configuration, but then there would be a gap left on the side of the dropcap I'm using it on, and the fact that I'm integrating it with a Wordpress theme that automatically applies sifr (other than the one in the example), meaning that each can't be adjusted by changing the width or font size.
I would much prefer to use 436, especially due to there being less page shifting, so, is there a remedy?
Thanks for your time.
If you compare the width and height of the Flash movie on both pages, you'll see that it's the same. In other words, it looks like fitExactly works fine. I wouldn't know though why Flash is clipping the rendered text.
Just to test, could you open the r436 JavaScript file, search for '419' and replace by '436', and then use the r419 Flash movie? Perhaps that provides further clues.