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.
Related
Link:- https://stackblitz.com/angular/qmedkbvramy?file=app%2Fcdk-virtual-scroll-overview-example.ts
I am trying angular material scollbar look as in the attached picture. But I can't figure out, how to do this.
Material by default doesn't provide any styles to change the scrolling
You can use this css to change the scrollbar style
cdk-virtual-scroll-viewport::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
cdk-virtual-scroll-viewport::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
Stackblitz demo: https://stackblitz.com/edit/angular-jkw9ac
Couldn't find anything in the doc's but perhaps someone knows better or can suggest a work around using available properties to hack it together?
If not in bootstrap does anyone know of a gem (rails) or generator that can create the CSS/jQuery/JS?
You can also try this Bootstrap 3 Nav Wizard version on GitHub, LESS file is included:
https://github.com/acornejo/bootstrap-nav-wizard
demo here: http://acornejo.github.io/bootstrap-nav-wizard/
Preview (orig):
Preview (customized):
Maybe you are looking for this. Check the demo below. Just resize the window if it doesn't look like the image below.
Fiddle
HTML
<h3>Wizard</h3>
<div class="wizard">
<a><span class="badge">1</span> Set Global Properties</a>
<a><span class="badge">2</span> Specify Entry Scheme</a>
<a class="current"><span class="badge badge-inverse">3</span> Create Test Entry</a>
<a><span class="badge">4</span> Check Your Data and Generate Portal</a>
</div>
CSS (or SCSS instead)
.wizard a {
padding: 10px 12px 10px;
margin-right: 5px;
background: #efefef;
position: relative;
display: inline-block;
}
.wizard a:before {
width: 0;
height: 0;
border-top: 20px inset transparent;
border-bottom: 20px inset transparent;
border-left: 20px solid #fff;
position: absolute;
content: "";
top: 0;
left: 0;
}
.wizard a:after {
width: 0;
height: 0;
border-top: 20px inset transparent;
border-bottom: 20px inset transparent;
border-left: 20px solid #efefef;
position: absolute;
content: "";
top: 0;
right: -20px;
z-index: 2;
}
.wizard a:first-child:before,
.wizard a:last-child:after {
border: none;
}
.wizard a:first-child {
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
}
.wizard a:last-child {
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
}
.wizard .badge {
margin: 0 5px 0 18px;
position: relative;
top: -1px;
}
.wizard a:first-child .badge {
margin-left: 0;
}
.wizard .current {
background: #007ACC;
color: #fff;
}
.wizard .current:after {
border-left-color: #007ACC;
}
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!
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; }
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