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!
Related
This absolutely positioned pseudo-element has a position:relative parent. We should expect its border styles to be applied, but they are not. Why?
:root {
--color-border: #E5E5E5;
--color-background: #FFFFFF;
}
.tooltip {
position: relative;
border-radius: 3px;
padding: 16px;
border: 1px solid var(--color-border);
background-color: var(--color-background);
}
.tooltip::after {
position: absolute;
top: 11px;
right: 100%;
left: -8px;
display: block;
width: 8px;
height: 16px;
pointer-events: none;
content: "";
clip-path: polygon(0 50%, 100% 0, 100% 100%);
border-width: 1px;
border-style: solid;
border-color: var(--color-border);
background-color: #ffffff;
}
.tooltip-hard-coded {
position: relative;
border-radius: 3px;
padding: 16px;
border: 1px solid #e5e5e5;
background-color: #ffffff;
}
.tooltip-hard-coded::after {
position: absolute;
top: 11px;
right: 100%;
left: -9px;
display: block;
width: 8px;
height: 16px;
pointer-events: none;
content: "";
clip-path: polygon(0 50%, 100% 0, 100% 100%);
border-width: 1px;
border-style: solid;
border-color: red;
background-color: pink;
}
<div style="display: flex; flex-direction: column">
<div style="padding: 32px;">
<div class="tooltip">With CSS variables</div>
</div>
<div style="padding: 32px;">
<div class="tooltip-hard-coded">With hard-coded values</div>
</div>
</div>
<div class="tooltip">Hi</div>
no border with the following CSS:
:root {
--color-border: #E5E5E5;
--color-background: #FFFFFF;
}
.tooltip {
position: relative;
border-radius: 3px;
padding: 16px;
border: 1px solid var(--color-border);
background-color: var(--color-background);
}
.tooltip::after {
position: absolute;
top: 11px;
right: 100%;
left: -8px;
display: block;
width: 8px;
height: 16px;
pointer-events: none;
content: "";
clip-path: polygon(0 50%, 100% 0, 100% 100%);
border-width: 1px;
border-style: solid;
border-color: var(--color-border);
background-color: var(--color-background);
}
when hard-coding a border color value, the pseudo-element only gets the style partially applied:
<div class="tooltip-hard-coded">With hard-coded values</div>
with hard-coded values:
<div class="tooltip-hard-coded">With hard-coded values</div>
What is the correct way to apply border styles to an absolutely positioned pseudo-element using CSS custom properties?
Tried several variations of the styles applied to pseudo-element; tried hard-coded values, tried changing display methods, etc
I can't understand why this tutorial example does not work for me:
I have external js libraries:
"https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"
"http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"
And this code on load document:
<script type="text/javascript">
$(document).ready(function () {
$('input.typeahead').typeahead({
name: 'cars',
local: ['Audi', 'BMW', 'Bugatti', 'Ferrari', 'Ford', 'Lamborghini', 'Mercedes Benz', 'Porsche', 'Rolls-Royce', 'Volkswagen']
});
});
</script>
I have css:
<style type="text/css">
.bs-example {
font-family: sans-serif;
position: relative;
margin: 100px;
}
.typeahead, .tt-query, .tt-hint {
border: 2px solid #CCCCCC;
border-radius: 8px;
font-size: 24px;
height: 30px;
line-height: 30px;
outline: medium none;
padding: 8px 12px;
width: 396px;
}
.typeahead {
background-color: #FFFFFF;
}
.typeahead:focus {
border: 2px solid #0097CF;
}
.tt-query {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.tt-hint {
color: #999999;
}
.tt-dropdown-menu {
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 8px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
margin-top: 12px;
padding: 8px 0;
width: 422px;
}
.tt-suggestion {
font-size: 24px;
line-height: 24px;
padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor {
background-color: #0097CF;
color: #FFFFFF;
}
.tt-suggestion p {
margin: 0;
}
</style>
And html code:
<body>
<div class="bs-example">
<input type="text" class="typeahead tt-query" autocomplete="off" spellcheck="false">
</div>
</body>
Can anyone help me ?
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;
}
Trying to follow this tutorial in this book, but the images supplied are not being shown on the page my /views/layouts/ads.html.erb looks like this
<!doctype HTML>
<html>
<head>
<title>Ads: <%= controller.action_name %></title>
<%= stylesheet_link_tag 'default.css' %>
</head>
<body>
<div id="wrapper">
<div id="header">
<div>
<h1>MeBay</h1>
<ul id="nav">
<li>All Ads</li>
</ul>
</div>
</div>
<div id="content">
<%= yield %>
</div>
<div id="clearfooter"></div>
</div>
<div id="footer"></div>
</body>
</html>
CSS in /app/assets/stylesheets looks like this
html, body { height: 100%; }
body { background-color: #e6dacf; background-image: url('/images/bg.png'); background-position: top center; background-repeat: repeat-y; font-family: "Trebuchet MS", Arial, san-serif; font-size: 14px; margin: 0; padding: 0; text-align: center; }
a { color: #000; }
a:hover { background: #000; color: #e6dacf; }
div#wrapper { min-height: 100%; }
* html div#wrapper { height: 100%; }
div#header { background: url('/images/bgHeader.png'); height: 100px; padding: 8px 0 0 0; }
div#header div { margin: 0 auto; position: relative; width: 800px; }
div#header h1 { left: 0; margin: 0; position: absolute; }
div#header h1 { background: url('/images/logo.png') no-repeat; display: block; height: 0; margin: 0 auto; padding: 92px 0 0 0; overflow: hidden; width: 319px; }
ul#nav { float: right; list-style: none; margin: 0; padding: 69px 0 0 0; }
ul#nav li { background: #e6dacf; border: solid #000; border-width: 2px 2px 0 2px; float: left; margin: 0 0 0 2px; }
ul#nav a { display: block; padding: 3px 6px 0 6px; text-decoration: none; }
ul#nav a:hover { display: block; padding: 3px 6px 7px 6px; }
ul#nav a.current { padding-bottom: 8px; }
ul#nav a.current:hover { background: #e6dacf; color: #000; cursor: default; }
div#content{ margin: 0 auto; padding: 20px 0; text-align: left; width: 720px; height: 300px}
div#content img { border: 10px solid #000; float: right; margin: 18px 0 0 20px; }
div#content h2 { border: solid #999; border-width: 0 0 5px 0; font-size: 28px; margin: 0; padding: 0 0 10px 0; }
div#content p { margin: 0; padding: 4px 6px 10px 0; }
div#clearfooter { height: 110px; }
div#footer { background: url('/images/bgFooter.png'); height: 110px; margin: -110px auto 0 auto; }
and I placed the supplied images in /app/assets/images
This is how it should look, and also what it looks like for me
http://imgur.com/a/VEryr
You should debug these kinds of problems with either
Chrome Developer Tools
Firebug for Firefox
Both provide excellent support for resolving js / css related issues.
In your particular case, you need to check the Network or Net tabs in the tools to see how the CSS gets loaded. Most likely you'll see an error in loading the stylesheet.
The tool will show you the CSS path its trying to access and you can debug it from there...
I have this styling:
#flash_wrapper {
width: 100%;
padding: 15px 0;
background: rgba(255,255,120,0.2);
border-bottom: 2px solid #FFFFAA;
-moz-box-shadow: 0 2px 2px #FFF;
-webkit-box-shadow: 0 2px 2px #FFF;
box-shadow: 0 2px 2px #FFF;
.flash{
width: 960px;
margin: 0 auto;
font-size: 16px;
font-weight: bold;
color: #333;
}
}
But I would like to have background: red in #flash_wrapper, if there is a children with id error in flash. So, if I have the following:
<div id="flash_wrapper">
<div class="flash" id="error">
Error value
</div>
</div>
I would like to have the background of #flash_wrapper set to red.
How can I do that?