This is a cached map from the software: ogmaps
Please look carefully at the tiny shades below the address bar in the main window here.
On once clicking the minimize/maximize button, it gets showed up fully. Tested on firefox, and google chrome.
Can't say that this is the browser problem, since when I loaded this cached map on the Qt widget, I still had to click the minimize/maximize button, to get it gets showed up fully.
The html for the map is too long to be posted here. If there is any relevant section that you know of, then please tell me and I'll post it here.
EDIT 2
Finally I have managed to upload that html code here: http://code.google.com/p/earthhtml/source/browse/trunk/ogmap.html
Please have a look about the div tags.
Although this may seem like something trivial, it worked out for me. I had the exact same problem (among other GM problems) using GMv3 and couldn't figure it out.
I added a min-height to the div containing the map (with !important)
I removed ALL max-height & max-widths from the CSS
This fixed the 'small map' problem plus an additional problem I had with the GM pins and infowindows.
On top of that, make sure that there are NO divs with a high z-index on your page, as GM will resize the containing div not to interrupt with the top div. Another div with a higher z-index will also mess up the map and make the height and the width go crazy.
div#map{
min-height:600px !important; /* or any value that suits you */
position:relative;
margin-left:0;
margin-right:0;
left:0;
border:1px solid #979797;
}
I hope this works as good for you as it worked for me. If not, good luck!
Related
I'm having a hard time figuring out how to make my footer stick to the bottom of the screen, even when the page is smaller than the screen.
www.test-domain.sk
I'm guessing it's something to do with the container length, but I'm honestly completely unsure.
Any help would be appreciated. :)
This concept is something known as a sticky footer. The Mozilla Developer Network has a page here illustrating a few ways to accomplish it. In the example of your www.test-domain.sk page, I believe you can add the following css to make your footer stick to the bottom of the viewport (screen).
html {min-height:100%)
body {100vh}
div#page {min-height:100vh; display:grid; grid-template-rows: auto 1fr auto}
Assuming you are looking for something like this, but if not, be more specific. As in post the code you already have.
footer {
position: fixed;
bottom: 0;
}
When the slide transitions, the background image displaces below the carousel before going back to the correct position. This happens on every slide every transition (when clicking or waiting). Here is a GIF showing what happens. http://gyazo.com/350334669db0e76f6d2b6e80fce0aed3
I have looked through some similar questions (all resolved). Only one seems it's the same issue, but the solution isn't applicable in my situation.
Here is the code. It is done mostly in jade with some html here and there. https://github.com/CastawayLabs/MCFreelancer/blob/master/views/index.jade
Your div was position:relative. Bootstrap uses position:absolute to perform the transition.
div.item(style='background: url(http://p1.pichost.me/640/25/1477731.jpg) no-repeat; background-size:cover; width: 900; height:400; position: relative;')
See patched commit
I am using a drop shadow filter inside an SVG file that is embedded using an img tag. On my MacBook, it looks fine in Safari. However, in mobile Safari, the graphic gets really pixelated and loses all it's sharpness. When the filter is not applied, the SVG renders fine. Is there any way to fix that besides to pass on the filter?
This problem is still relevant in 2018, and I've found a solution. You can duplicate the element you give the filter to, place it below the actual element, and keep filter only on it, without any filter on the element. This way, Safari and other browsers will only rasterise the element with the shadow when resizing, however it will be hidden by the sharp-looking vector element. You can see examples and read more here.
Unfortunately I tried all the suggested workarounds for this, none of them worked, the only thing that worked for me was putting the svg inline, not as an img tag.
Surprised this issue appears to have been around for so long!
You should try explicitly setting the "filterRes" attribute of the filter to a value that matches retina displays.
It's 2021 and it's still relevant. I found a workaround that worked for me: You can enlarge the svg and then use a css-transform to scale it back:
.section_logo img {
height: 500%;
transform-origin: top left;
transform: scale(0.2);
}
I'm trying to wrap my head around CSS positioning guidelines. I'm trying to figure out how to make a sticky footer but have it stop being sticky when the main content area can no longer be condensed. An example of what I'm talking about can be found here http://ryanfait.com/sticky-footer/. Can someone explain to me why the footer stops being sticky and particularly what CSS properties cause this to occur? For me, as I look at the CSS it looks like the footer should just stay sticky to the bottom of the browser window always, but this isn't the case here. Why?
Thanks for the help.
Give this one a try.
http://www.cssstickyfooter.com/ (link no longer valid)
It is similar to Ryan's one but, from memory, I think I've had better luck with this (although both are very similar).
You have to declare the footer outside of the wrapper and give some height for footer and margin-top should -(footer-height)px
<div id="wrapper">
---
------
</div>
<div id="footer">
</div>
# wrapper {
width:100%;
height:100%;
}
#footer {
width:100%;
height:25px;
margin:-25px 0px 0px 0px;
background:#ccc;
}
Here's a brief summary of a layout I use fairly consistently as a basis for projects that require a sticky footer. Not sure where I initially got all the code from but it was pieced together over quite a while.
http://jsfiddle.net/biznuge/thbuf/8/
You should be able to see from the fiddle that you require a '#container' element which will wrap the whole of the page. this gives you 100% height (note the hacks for ie present in the css), and allows and child elements of this 'container' element to derive a height, or position relative to it.
Pitfalls of this method are:
You need to provide some padding/margin at the bottom of the '#main'
element so that the footer is displaced further than it naturally
would, so need to know at least a broad range of what your footer
height should be.
IE doesn't seem (<=IE8 not tested 9) to recognize browser resize
events if you only resize the bottom edge of the browser, so in
that particular case the stickiness would fail, until a horizontal
resize was also presented as an event.
if you want a fixed width to the layout you should place this
constraint not on the '#container' element, but on the '#page'
element, and perhaps introduce extra elements beneath '#footer' to
provide any width constraints there.
Good Luck!
I have a jqGrid that has add/edit dialogs with a form that's longer than the dialog height but the dialog won't scroll. I've tried to add an overflow: auto style to the dialog but no effect:
$("div.ui-jqdialog-content").css("overflow", "auto");
Although, if I change auto to scroll, I at least see a scrollbar but still no scrolling:
$("div.ui-jqdialog-content").css("overflow", "scroll");
This at least gives me a small glimmer of hope that I'm on the right track.
There doesn't seem to be any direction from the API documentation to support scrolling:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing
Does anyone know how to add a working scrollbar to the jqModal dialog window used by jqGrid?
UPDATE
This is a total hack job but I got a scrollbar to appear and function doing the following:
setTimeout(function() {$("#FrmGrid_list").html('<div style="height: 300px; overflow: auto;">' + $("#FrmGrid_list").html() + '</div>');}, 1000);
I attached this to the afterShowForm event. However, this really doesn't solve the problem because it causes other issues with other fields.
I thought I'd share my solution for others to reference.
The form element has a default height: auto; style property which causes the overflow: auto; not to function as desired. To make the overflow scroll, the height needs to be set to a fixed number to constrain the form container and therefore make the overflow necessary.
I attached a css update to the afterShowForm Form Editing event, using the following code:
afterShowForm: function(form) { form.css("height", "300px"); }
Mind you, 300px is an arbitrary number that I selected for testing. That number will be tweaked to fit my needs. It may even be dynamically adjusted on resizing. Who knows.
Also, using Firebug I found that my form id is FrmGrid_list. My grid id is list (e.g. <table id="list"></table> and jQuery("#list").jqGrid({...});). If your grid is named something other than list, the form id (above) should reflect that.
Reference link:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing
Your problem sounds strange. Every edit/add dialog has already a scrollable form with the name "FormPost" inside. This form has following style:
position: relative; width: 100%; height: auto; overflow: auto;
I just tested one jqGrid with a lot of controls and can scroll there without any problem.
The reason of the strange behavior which you have is probably that you either forget to include optional jqModal.js and jqDnR.js (see the same http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing page at the beginning) or use the wrong path to the files, so they will be not loaded.
This question is VERY old, but I'll add an answer anyway.
I don't know if this was possible before, but now you can simply use the dataheight property of the dialog (add or edit), to precisely set the height (in pixels) of the inner form. The default is 'auto', and thus it doesn't overflow. Setting the desired height shows the scroll-bar if necessary.
reference: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing