I hit a peculiar problem today which I haven't encountered or noticed before. While setting up a map in Here Maps 3.0, I noticed that if the browser window is "small", less than a full-screen one, during loading the map, also the map will stay small even if the browser window will be resized to a full-screen one.
How could I update the Here Maps map size to occupy as much space as allotted?
My arrangement is as follows and I wonder if the reason for this could be the relative divs. The reason I have them is that I'm experimenting with designs that have headers, footers, other text with and without scrolls bars (and it looks like scrolling the map gets a bit jittery if there's a scrollbar present on the page).
<style type="text/css">
#mapContainer {
width: 100%;
height: 100%;
left: 0;
top: 0;
position: absolute;
background: grey;
}
#main {
position: relative;
width: 100%;
height: 100%;
}
html, body {
overflow-y: hidden;
}
</style>
<div id="main">
<div id="mapContainer"></div>
</div>
try this after the map object initialization:
window.addEventListener('resize', function () {
map.getViewPort().resize();
});
That should solve the problem.
The window resize event mentioned by support seems to be the main approach. However, in a templated page the window resize event sometimes occurs too soon and the resize() call then doesn't have the correct sizing yet - at that point you may need to find an 'AfterRender' event for the template library, or failing that set a timeout from the resize event to give the element resizing a chance to finish.
Related
CSS is acting up. I have a modal that looks like the below when stripped down:
<div id="modal">
<div class="dialog">
<!-- modal content goes here -->
</div>
<div class="backdrop"></div>
</div>
With the following (also stripped down CSS):
.dialog {
/* full width & height (assuming mobile-only) */
width: 100%;
height: 100%;
position: absolute;
background: linear-gradient(to bottom, blue, darkblue);
}
.backdrop {
position: fixed;
background: rgba(0,0,0,.5);
}
It all looks great...
until I focus on an input and then this happens:
The dialog background is getting clipped, and I start seeing the backdrop background at the bottom.
How do I fix this (without having to change the backdrop background to match the dialog)?
EDIT: After some testing, I found that setting a fixed-height to the dialog equivalent to window.innerHeight before the input gets focus resolves the blank space issue. It's messy, but I hope someone has a better solution!
your dialog parent has no height that is why dialogs height: 100%; doesn't work properly. try height: -webkit-fill-available; or give your background color to modal which works as a wrapper. and remove position: absolute; from dialog there is no need to use absolute here so try to make it center without it. hope it was helpful
I was able to solve the issue by specifying the height in px, as opposed to using height: 100%. I did this via Javascript, but waiting for DOM load and then replacing height: 100%.
Here's what that looked like:
window.addEventListener("DOMContentLoaded", () =>
window.setTimeout(() => {
// Wait 1 sec; height isn't always correct on load for some reason
const dialog = document.getElementsByClassName("dialog")[0]
dialog.style.height = dialog.getBoundingClientRect().height + "px"
}, 1000);
})
I want to check the position of loader (circle loading) to fix it at the middle of the screen.
But whenever I run the project in development mode, I can't see the loader for a long time as the page loads, content appears and the loader disappears.
Is there any method to see the loader for a longer time?
1st you need to provide code to be able to fix it
2nd did you try inspect element?
3rd you may wan to use jquery for that (its very easy)
Javascript file:
$(window).on("load", function() {
$(".loader .inner").fadeOut(500, function() {
$(".loader").fadeOut(750);
});
});
HTML file Make sure to put it under the body opening tag like this
<body>
<div class="loader">
<div class="inner"></div>
</div>
<!-- rest of the code .. -->
CSS file:
.loader {
width: 100%;
height: 100%;
background-color: #ffffff;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
.loader .inner {
width: 100%;
height: 100%;
background: url(../images/loader.gif) center center no-repeat;
}
this is 1 of the simplest ways to do it (there is tons of ways)
hope it helps
Develop your loader as individual component which has no relation to your project flow, update it as per new requirements and then embed in your project.
As each component has different logic behind holding its state inside project, developing those component as standalone is better than looking for how to hold that specific state inside project.
You can use chrome to simulate internet speed directly.
See this: https://developers.google.com/web/tools/chrome-devtools/network-performance/network-conditions
Codepen
Hello,
I'm desperately looking for a simple solution to my problem, my code is available on codepen.
// line 84
.panel-group .panel-heading + .panel-collapse > .panel-body {
border: none;
max-height: 300px;
overflow-y: scroll;
}
The objective is to keep the pink footer always visible (pasted at the bottom of the screen), even if the content is too large (like the panel 3 when it is open).
I tried putting a vertical scroll when the content is too large, but I'm not sure how to use max-height in the best way (currently at 300px, line 84).
This solution does not really work, it is not suitable for those with large screens (because max-height: 300px ...).
Would it be possible to do what I want directly in CSS? If so, can you guide me?
Or Javascript is mandatory according to you? The background-gray of the panel must cover the whole area, down to the bottom, with any resolution.
Thanks !
In my opinion, you should break the footer out of the modal and display it separately because the modal is already a fixed element. You could hook into js modal events and display this standalone footer only when modal is opened.
.modal-footer.outer{
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 2000;
background: #fff;
}
http://codepen.io/anon/pen/XpbYeE
Your modal footer was being fixed, it actually was behaving properly, the problem is that it's still a child of another fixed item - the modal itself and thus gets detached when the viewport gets too small for the parent.
http://g.recordit.co/pyMEfO94wE.gif
.modal-body
{
overflow-y:scroll;
height:400px;
}
Your modal body can be made scroll-able to keep footer always visible.You can use any height you want.
I am trying to adapt my Blockly workspace inside a div. I want that if the page makes smaller, the div and the Blockly workspace inside of it would be smaller also.
I know that there is a way that Google provides in its documentation but I think it is a bit "dirty" and you have to use a lot of code to resize it.
Looking at the debugger of Google Chrome I saw that I can set a max-height to the svg object but I do not know how to change that height when you inject the workspace:
var workspace = Blockly.inject('blocklyDiv',
{toolbox: document.getElementById('toolbox')});
Anyway, it will not solve my problem at all (just avoid that the workspace would be bigger than the div before resizing the page).
I also tried changing my blocklyDiv in which I inject the Blockly workspace to display: flex; but it does not change anything.
Is there a better approach than Google's example to resize the Blockly workspace?
Thanks in advance!
I used CSS Only to get the same behavior...
Just create a container for the blockly editor with any size you want and position relative, then put a blockly editor inside with position absolute.
HTML Code:
<section id="blocklyContainer">
<div id="blocklyDiv"></div>
</section>
CSS code:
#blocklyContainer {
position: relative;
width: 100%;
height: 100vh;
}
#blocklyDiv {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
Here you have a CodePen to see: blockly resize
As I said in above comment, I allow width resize while fixing the height in the blockly div.
<div id="blocklyDiv" style="height: 800px; width: 100%;"></div>
Here you have the JSFiddle to play with:
blockly workspace resizing.
I solved this problem by using Blockly.svgResize api, note that if the size changes with transition, you have to set a timeout function and call the api in the callback in timeout, the delay is the transition time.
I want a footer in Jquery Mobile, that is not fixed, but is always at the bottom of the page.
Like this: http://ryanfait.com/sticky-footer/ (but in JQuery Mobile), not like like the standard JQuery Mobile Fixed footers.
So the footer should appear at the end of the content, or the bottom of the screen, whichever is lower.
Any ideas on how to approach this?
Edit:
The basic problem, is that I seem unable to get the div with data-role=content to actually take up the full height of the screen.
I solved this using mostly CSS. The advantages of this over the accepted answer is it will handle cases where the page size changes after the page is shown (such as browser resize, orientation change, or even more simple cases like collapsible/accordian sections). It also has much less Javascript code, and no layout math.
CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
[data-role=page] {
min-height: 100%;
position: relative;
}
[data-role=content] {
padding-bottom: 40px; /* based on how tall your footer is and how much gap you want */
}
[data-role=footer] {
position: absolute;
bottom: 0;
width: 100%;
height: 40px /* this can be configurable, or omitted, as long as the above padding-bottom is at least as much as the height of the footer is */
}
The absolute footer caused jQuery Mobile page transitions to show a flickering footer (particularly the "slide" transitions), so I added this small amount of Javascript:
$(document).live( 'pagebeforechange', function() {
// hide footer
$('[data-role=footer]').hide();
});
$(document).live( 'pagechange', function() {
// show footer
$('[data-role=footer]').show();
});
Basically you just need to check the height of each data-role="content" elements to make sure that with the header/footer/content-area that the vertical space in the view-port is used.
For example:
$(document).on("pageshow", ".ui-page", function () {
var $page = $(this),
vSpace = $page.children('.ui-header').outerHeight() + $page.children('.ui-footer').outerHeight() + $page.children('.ui-content').height();
if (vSpace < $(window).height()) {
var vDiff = $(window).height() - $page.children('.ui-header').outerHeight() - $page.children('.ui-footer').outerHeight() - 30;//minus thirty for margin
$page.children('.ui-content').height(vDiff);
}
});
This code will run each time a page is navigated-to.
Here is a demo: http://jsfiddle.net/aBVtJ/1/
Check out this SO:
jQuery Mobile has a native footer that supports a fixed, or 'sticky', position. An example and documentation can be found at http://view.jquerymobile.com/1.3.1/dist/demos/widgets/fixed-toolbars/