How to size a content div to cover the entire content area in jQuery Mobile
Tags: android,css,google-chrome,openlayers,jquery-mobile
Problem :
I started a simple jQuery Mobile Page with a header and a content div. The content div should serve as a map container for openlayers. The map should fill up the entire screen, except for the header bar.
Sizing the content div with a width/height of 100% didn't work (nothing was displayed), so I'm looking for a CSS approach to pixel-size the div or a relative-size workaround.
Especially I like to know:
- How can I account for screen orientation changes (landscape/portrait)?
- How can I make my layout "height-elastic", i.e. resistant to the toggling of the browser's address bar?
Here is my markup so far:
<body>
<div data-role="page">
<div data-role="header">
<h1>My Map</h1>
</div>
<div id="mapcontainer" data-role="content">
<!-- OpenLayers Map goes here -->
</div>
</div>
</body>
Solution :
OpenLayers listens for the window 'resize' event and automatically calls map.updateSize(). Nothing to do here.
In my case, without header, the following code works:
<div data-role="page" id="map">
<div id="olmap"></div>
</div>
#olmap, #map {
height: 100%;
width: 100%;
}
CSS Howto..
For front-end some theme is used. From admin menu go to "Appearance" to find out what theme is used. Then that theme should be located at "sites/all/themes/theme_name" Inside that folder...
Assuming they do not have to be in IMG tags... HTML: <div class="thumb1"> </div> CSS: .thumb1 { background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */...
Try this: table.show-my-request-table tr > td:first-child { background-color: #ff0000; } ...
OK, after your comments I figured out your issue: give a position:relative and z-index:-1 to your button plus a few tweaks and here you go: button { border: none; height:...
Finally I myself came up with a solution. By Using position:fixed the header logo will overlap with the content which is underneath it.The best way is to tweak the existing...
TL;DR: (Solution) The simplest way to invert that pentagon would be to invert the borders that are used in creating it like in the below snippet: #pentagon { margin: 0px...
The Flexible box way Vertical alignment is now very simple by the use of Flexible box layout. Nowadays, this method is supported in a wide range of web browsers except...
Modernizr works by creating an element, applying a css property and then checking the return value of the css property. For example, if you wanted to test for text shadow...
when you specify margin-right:40%; , it means 40% of parent element. In you case it is body element. By default, width of body is 100% of your screen size. To...
You can do it like this: $(function() { $("li").each(function(i) { $(this).prepend("(" + String.fromCharCode(i + 97) + ") "); }); }); Note: 26 character limit :) In case anyone needs to...
The key is in the css animation parameter: animation-delay ... and by simply staggering those everything will work (be sure to see my working plunker) ... However, a lot of...
Code function makeRGBStr(obj) { if (obj.a == null) return "rgb(" + obj.r + "," + obj.g + "," + obj.b + ")"; else return "rgba(" + obj.r + "," +...
LESS is just a CSS preprocessor, it's your selector that could do with the improvement, we can combine that with LESS namespacing to have something like: .A, .D { h4,...
I think what you might be looking for is using something like leaflet to allow you zoom in to an image. This link here explains the process of breaking up...
<div id="wrapper"> <div id="middle"> <div id="top">top</div> <div id="bottom">bottom</div> </div> </div> #wrapper { height: 200px; position: relative; } #middle { height: 100%; } #bottom { position: absolute; bottom: 0; } It...
You can do like this $('.lblViewStatus').hover(function() { $('.flyout').toggle("slide", {direction:'left'}); }); ...
The best thing to do is go through every problem one-by-one and fix it. The Chrome developer tools (Control+Shift+J) are very good at pointing out various errors and problems. Check...
If you are happy to use JQuery and want to minimise the mark-up that you need to add then you could use the following: CSS .fraction, .top, .bottom { padding:...
Personally I would go with the maths based solution if you have to work with the full sized image server side. Rescaling in the browser directly or through CSS is...
You can use jQuery's .content() function to access it. $('yourIframe').contents().find('#yourItemYouWantToChange').css({ opacity: 0, color: 'purple' }); Example Here's an example showing me applying css to the jQuery logo typically found in...
[whether] The float of the parent container (in this case div) effects the child element'a float property it will not. Whether the child float property affects elements outside of...
The input tag needs to have a value attribute to tell the browser what text to display – Cody Guldner Mar 22 at 20:34
I think you don't even need JavaScript or jQuery to achieve what you want. It's important that you give your flexed navigation a width of 100% and a height. To...
Don't use !important unless you really, really have to. You can change the font size in this case by either adding the new css after the old like so: .nav-tabs...
tr are vertically aligned middle by default add this tr { vertical-align:top } DEMO...
<span class="glyphicon glyphicon-home" style="position: relative; top:2px"></span> CSS positioning properties (top/right/bottom/left) works only when used with relative, absolute or fixed position. Detailed Reference...
The usual approach is something like this: bind to handler to the window's scroll event; check scrollTop in the handler and, when it reaches a certain limit, switch the statically...
A css file for each .aspx page seems to defeat its purpose, namely reusability, etc. I suppose if each page is really that unique from a style perspective, maybe it's...
Div's don't allow vertical aligns typically. The only option would be to make it act like a table cell or do something like margin/padding that will look like your table...
Block-level elements that are not floated (like your #boxContainer div) will default to 100% width. You can change it to display: inline-block to only take up the space that it...