Google Maps infowindow callout is a few pixels out - maps

it's my first time post at stackoverflow. (A bit nervous)
I'm having an issue around the infowindow callout box for Google Maps as shown on the image here: Infowindow callout
There's about 2-3 pixels of the callout pointer sticking out from the bottom of the infobox.
I did have a problem with the rendering before and that was already solved by applying "max-width:none" to the map div. Haven't changed anything else.
It would be awesome if I could get some help solving this issue... Many thanks in advance!

This is kind of old, but I was running into the same issue and since there isn't an answer I will post my fix.
In my CSS I am resetting the box-sizing property on all elements
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
In order to fix this I applied a class to the div that wrapped the Google Map and set the box-sizing property back to the initial state.
.google-maps * { -moz-box-sizing: initial; -webkit-box-sizing: initial; box-sizing: initial; }

Related

Coding a responsive site that centers itself on any browser

I apologize if this question is super simple. I have been trying to use a third party website builder for a client for ease of access/editing later on but he really wants a responsive site that resizes and centers itself no matter what browser/resolution it's displayed on. I am pretty sure I will need to just start from scratch and build him something completely customized. I'm struggling to even know where to start with this as coding responsive sites is still new to me. Any help or guides that someone could point me to would be greatly appreciated.
#page {
margin-left:auto;
margin-right:auto;
width:960px;
}
#stage {
margin: 1em auto;
width: 360px;
height: 540px;
}
#stage a {
position: absolute;
}
#stage a img {
padding: 0px;
border: 0px solid #ccc;
background: #fff;
}
Do you want the body to be always centered so it doesn't have layout problems on different devices or do you want every element to be center aligned?
I think it's the first one.
You could use width:95vw; on the body element and margin:auto;.
You could work with media queries.
It's also important to add the viewport meta tag in the head.
Let me know if I understood the question

Gatsby - page refresh corruption

I have a problem with one page on my gatsby site.
If I go to that page from any other then it renders fine. But if I follow a link directly to it, or refresh the page once loaded then it does not render correctly. All of the other pages render fine. The one thing different about this is the use of flex display layout.
Looking at the page structure, it's rendered differently. HTML looks pretty much the same, but the classes and class attributes set by gatsy are different.
This is the page in question: https://www.hazardousfrog.com/contact-us/
If someone could take a quick look and let me know if this is a gatsby issue or something I have done wrong, I'd very much appreciate it.
After looking at it I believe it may be an error on your end. I look at both pages in separate tabs, one rendered correctly and one not. With the developer tools I inspected the form components and saw that they were loading completely different styles. I wouldn't be able to tell you exactly what is causing this, but if I had to guess it could be that you have styles or classes that are overriding one another.
//the form style when it is NOT rendered correctly
.jss9 {
margin: 0;
border: 0;
display: inline-flex;
padding: 0;
position: relative;
min-width: 0;
flex-direction: column;
vertical-align: top;
}
//form styles when it IS rendered correctly
.jss357 {
display: flex;
flex-wrap: wrap;
}

Show value from database in array

I want to display entire content of my database table on html page.I am trying to fetch record from database first and store in ArrayList. What is the best way to do it in java using PostgreSql database ??????
You are using iframes to embed those “previews”, I assume?
In that case, you could achieve this by making the iframe element itself larger, and then use transform: scale() to scale it down again to the target size.
Check the following example – I used example.com for the iframe content, that site is not responsive, as you can see in the first 200px*200px iframe.
The second iframe is 500px*500px – and scaled down by a factor of .4, which is effectively 200px again. Since scaling an element down this way still leaves the space it would have taken originally reserved, it is placed inside a div element that cuts of that overflow.
iframe, #i2 { width: 200px; height: 200px; }
#i2 { overflow: hidden; display: inline-block; }
#i2 iframe { width: 500px; height: 500px; transform:scale(.4); transform-origin: top left; }
<iframe src="https://example.com/">
</iframe>
<div id="i2">
<iframe src="https://example.com/">
</iframe>
</div>
https://jsfiddle.net/5hk9m446/
One thing you should be aware of, is that this will not work for just any website. Via the X-Frame-Options header websites can tell the browser, that they don’t want to be displayed in (i)frames on a different domain. In that case, you can’t do it client-side with iframes; you probably have to render a preview as an image server-side or something like that.
CSS Transforms can help you to downscale iframes.
See this example
http://jsbin.com/wiperebifa/edit?html,css,output
Please also notice with iframes your mouse events are targeted to those pages.
You can use glass pane(s) over the iframes to capture these events or alternatively you can hide iframes and display their content with canvas.

What's with this padding on the left side of my page?

I'm making a site from scratch, and haven't gotten far before getting stuck-
It's very simple code, and nowhere do I specify margins or padding, yet when I view the page in Chrome and Firefox, there's this margin on the left side keeping anything from existing for the first 25 or so pixels. Something tells me this is normal/default, but is there any way I can completely center the page, surely it cannot be truly centered with this left:10px looking thing...
Here's the CSS:
.header {
height:100px;
width:100%;
top:100px;
z-index: 1;
position:fixed;
background-color:#767676;
top:0px;
}
html {
background-color:transparent;
color:#555555;
font-family: 'Roboto', 'Univers';
line-height: 1.0em;
width:100%;
height:100%;
background-color:#f8f8f8;
}
...And a screenshot showing exactly what I'm talking about:
http://i.stack.imgur.com/vFDID.png
You probably need a CSS reset of some sort to erase browser defaults. On my projects, I include * { padding: 0; margin: 0; } at the top of my CSS. This takes care of almost everything.

Avoiding page break in pdf generation with salesforce

I must remove page break while generating pdf by visual force pdf, but whatever I try with css page-break-inside: avoid;, page-break-before: avoid; etc. is not working.
I want to remove all page breaks making it a continuous pdf page, but I cannot figure it out.
Instead of using CSS styling for the APEX component, try a div tag around the APEX components you want to not be broken apart with style="page-break-inside:avoid;"
//div style="width:100%;page-break-inside:avoid;"> APEX ///div>
This css page-break-inside: avoid;, page-break-before: avoid; works only when you need to iterate on components. If you are using inline pre-built css into page then you have to check following css related to body tag. like this:
body { box-sizing: border-box; height: 11in; margin: 0 auto; overflow: hidden; padding: 0.5in; width: 8.5in; }
Here I am using width and height with auto value.

Resources