I am attaching the screenshot of the infowindow below.It appears distorted and the left side bar is also not coming properly.
Here is my gmaps4rails.css
.map_container {
padding: 6px;
border-width: 1px;
border-style: solid;
border-color: #ccc #ccc #999 #ccc;
-webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
-moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
width: 623px;
}
.gmaps4rails_map {
width: 623px;
height: 300px;
}
what could be the issue ?
It seems the problem occurs because of re-sizing of the images. Here is the link which helped
https://github.com/apneadiving/Google-Maps-for-Rails/wiki/Google-Maps-with-Twitter-Bootstrap-or-Zurb-Foundation
Had a similar issue and added the following to my css file and it fixed the concern perfectly
img { max-width: none; }
Related
I have created a sort of 'window' that slides across to reveal more of the image, please see - http://sysmarketing2014.squaresystem.co.uk/
It seems to work across all browsers (apart from IE8 downwards - which I could also do with fixing) and even works on Windows phones and androids. It works in the Safari iPhone User Agent also.
It does not seem to be working on my iPad or iPhone however... they are both running iOS8
Any ideas?
I've solved the issue, it was to do with the box-shadow on iOS.
The iOS devices would not render the box-shadow with a spread size of 2000px. I found that the largest number I could input was around 850px.
Seems to be a problem specific to iOS
.ls-slide .peep {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
padding: 0 1000px;
z-index: 100;
}
.ls-slide .peep:after {
content: ' ';
position: absolute;
top: 10%;
border-radius: 100%;
width: 300px;
height: 300px;
box-shadow: 0 0 0 2000px #72B626, inset 6px 6px 30px -4px #000;
-webkit-box-shadow: 0 0 0 2000px #72B626, inset 6px 6px 30px -4px #000;
-moz-box-shadow: 0 0 0 2000px #72B626, inset 6px 6px 30px -4px #000;
margin: 0 auto;
left: 0;
right: 0;
z-index: 200;
}
.is-ios-device .ls-slide .peep:after {
-webkit-box-shadow: 0 0 0 850px #72B626, inset 6px 6px 30px -4px #000;
}
I changed the spread value and problem solved.
I want scrollbars to be always visible in IOS. The quick solution is the "::-webkit-scrollbar" fix. However when using "webkit-overflow-scrolling: touch" for the "slide feeling", the scrollbars are not visible anymore.
How can I get them both working?
See the example http://jsfiddle.net/gatb4ct6/5/:
.frame {
overflow-y: auto;
border: 1px solid black;
height: 13em;
width: 10em;
line-height: 1em;
/*-webkit-overflow-scrolling: touch;*/
/* uncomment above and scrollbars are not visible on IOS */
}
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
width: 11px;
}
::-webkit-scrollbar:horizontal {
height: 11px;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid white; /* should match background, can't be transparent */
background-color: rgba(0, 0, 0, .5);
}
I was searching for the same problem. It appears that you can use just one of the two options. Scroll auto but with styled scrollbar or fluid scroll but with invisible and not styled scrollbar.
.frame {
overflow-y: auto;
border: 1px solid black;
height: 13em;
width: 10em;
line-height: 1em;
-webkit-overflow-scrolling: touch;
}
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
width: 11px;
}
::-webkit-scrollbar:horizontal {
height: 11px;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid white; /* should match background, can't be transparent */
background-color: rgba(0, 0, 0, .5);
}
Or use the -webkit-overflow-scrolling: touch; and none of the pseudo classes after.
I have a number input box which is running on iOS. I am using jquery and kendo mobile for this as well as HTML5.
The number input on the Icenium simulator has the up and down arrows but the IPad doesnt. I need a way for these to show up on the IPad. I have looked around but need a straight answer.
Is it possible to have these arrows for a number input on the IPad (eg. quantity)?
If not, is there any way I can implement something similar maybe using kendo mobile, HTML or CSS? Any suggestions would be much appreciated.
This is what i need
<input type="number" value="numberText"/>
<style>
input[type=number]
{
padding:10px;
}
</style>
Thank you
try:
<!DOCTYPE html>
<html lang="en">
<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>
<style>
.number-wrapper {
margin: 10px 5px;
position: relative;
}
.number {
font-size: 30px;
color: #eee;
display: inline-block;
*display: inline;
*zoom: 1;
background: #000;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
padding: 0 12px;
height: 80px;
line-height: 80px;
text-align: center;
border: 1px solid #555;
-moz-box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.2);
-webkit-box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.2);
box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.2);
-moz-text-shadow: 0 3px 3px #000000;
-webkit-text-shadow: 0 3px 3px #000000;
text-shadow: 0 3px 3px #000000;
}
.inc {
position: absolute;
display: block;
top: -35px;
left: 0;
font-weight: bold;
font-size: 18px;
color: #777;
width: 100%;
height: 90%;
text-align: center;
padding-top: 6px;
}
.dec {
position: absolute;
display: block;
bottom: -18px;
left: 0;
padding-top: 14px;
font-weight: bold;
font-size: 18px;
color: #777;
width: 100%;
height: 90%;
text-align: center;
}
.line {
position: absolute;
width: 100%;
height: 1px;
top: 52%;
left: 0;
background: #000;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}
</style>
<body>
<div id="SETtime">
<span class="number-wrapper"><div class="line"></div><span class="inc">+</span><span id="mx" class="number m">00</span><span class="dec">-</span></span>
</div>
</body>
<script>
function twodigits(num) {
return ('0' + num).slice(-2);
}
$('.inc').click(function() {
var target = $(this).siblings('.number').first();
var value = parseInt(target.text());
value++;
target.text(twodigits(value));
});
$('.dec').click(function() {
var target = $(this).siblings('.number').first();
var value = parseInt(target.text());
value--;
target.text(twodigits(value));
});
</script>
</html>
Happy days!
The Design
The contact form on a responsive design has input fields with both an inset shadow and regular outside shadow. See image below.
The Code
input {
background:#fff;
height:auto;
padding:8px 8px 7px;
width:100%;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:#fff solid 3px;
border-radius:4px;
box-shadow:0px 0px 5px rgba(0, 0, 0, .25), inset 2px 2px 3px rgba(0, 0, 0, .2);
}
The Issue
iOS v4+ does not display the box-shadow properly. See image below.
Tested
I have attempted using -webkit-box-shadow.
-webkit-box-shadow:0px 0px 5px rgba(0, 0, 0, .25),
inset 2px 2px 3px rgba(0, 0, 0, .2);
I have applied display:block; to the input element.
Current Workaround
I would prefer not having to do this, but this is the only way I can get my desired effect.
HTML
<p><input /></p>
CSS
p {
width:50%;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-shadow:0px 0px 5px rgba(0, 0, 0, .35);
border-radius:4px;
}
input {
background:#fff;
height:auto;
padding:8px 8px 7px;
width:100%;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:#fff solid 3px;
border-radius:4px;
box-shadow:inset 2px 2px 3px rgba(0, 0, 0, .2);
}
Even with this workaround, the inset shadow on iOS is not rendered properly; but it's close enough.
My Question
Is it possible to have multiple instances of box-shadow on a single element render properly on iOS devices? If not, what about the inset shadow? Or am I using this property and its values incorrectly?
Thanks in advance!
Try adding -webkit-appearance: none; iOS tends to mess up forms.
I had a problem trying to add a box-shadow around invalid inputs (before submit is clicked).
Using -webkit-appearance: none; worked fine for a while, but I've noticed on chrome checkboxes have gone missing now.
Here's my hack that works more or less cross browser. Looks like safari is the new "internet explorer" :-/
input:invalid, select:invalid, textarea:invalid, .invalid {
background-clip: padding-box; /* Safari fix */
box-shadow: 0 0 5pt 2pt rgba(255,0,0,.75) !important;
}
select:invalid {
border: 1px solid red; /* Safari fix */
}
input[type="checkbox"]:invalid{
background: red; /* Safari fix */
}
input[type="radio"]:invalid{
background: red; /* Safari fix */
}
See here jsfiddle http://jsfiddle.net/KvKsm/2/embedded/result/
edit here http://jsfiddle.net/KvKsm/2/
html
<input type="submit" value="Contact Us">
css
input {
-moz-transition: -moz-transform 0.2s ease-in-out 0s;
background: none repeat scroll 0% 0% #2E2E2E;
border-radius: 8px 8px 8px 8px;
border: 0pt none;
box-shadow: 0pt -1px 1px rgba(255, 255, 255, 0.15) inset;
color: #FFFFFF;
display: inline-block;
font-size: 32px;
line-height: 1;
padding: 10px;
text-shadow: 0pt -1px 1px rgba(19, 65, 88, 0.8);width:180px
}
in Desktop browsers
in iPad and iPhone
I want fixed width button.
I found an answer here
http://thinkvitamin.com/design/styling-submit-buttons-for-mobile-safari/
adding -webkit-appearance: none; solved the problem