I'm having trouble to get the -webkit-tap-highlight-color property to apply to a div - I'm at a loss as to why it isn't. Copying all the styles that apply to it below. The desired outcome is a back button as shown here: http://building-iphone-apps.labs.oreilly.com/ch03.html#ch03_id35932102
.backButton {
font-weight: bold;
text-align: center;
line-height: 28px;
color: white;
text-shadow: rgba(0,0,0,0.6) 0px -1px 0px;
position: absolute;
top: 13px;
left: 6px;
font-size: 14px;
max-width: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-width: 0 8px 0 14px;
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-border-image: url(/static/images/backButton.png) 0 8 0 14;
}
.backButton.clicked {
-webkit-border-image: url(/static/images/back_button_clicked.png) 0 8 0 14;
}
.toolbar{
background-color: #e1f7ff;
-webkit-box-sizing:border-box;
border-bottom:1px solid #559D75;
padding:10px;
height:53px;
background-image:-webkit-gradient(linear,left top,left bottom,from(#e1f7ff),to(#a1d2ed));
position:relative;
z-index: 70; }
Applied here:
<div class='toolbar'>
<div class='backButton'>Back</div>
</div>
Viewing it in iPhone simulator (OS 4 enabled) and Safari - same problem with both (tap highlight still shows up).
Thanks in advance.
Try adding:
-webkit-user-select: none;
This is embarrassing. The image I had been using from an example back button online had the background color in it - it wasn't a problem with the CSS property.
I'm almost embarrassed enough not to post this answer, but I'm willing to swallow my pride in hopes of helping others. Let this be a lesson: if you use example images from Google images, etc., be sure the copy you download looks as you expect it to.
I wish I could reclaim the hours I spent trying to debug this, but maybe this will help someone else gain them back.
Lesson learned... thoroughly.
Related
can you please give me the right CSS snippet to move these price tags from left to right? I am very insecure with this positioning and don’t want to produce crippled code so it would be great to get some help here.
https://prnt.sc/1x10vpj
I suppose it is thie, but not 100% sure:
position: absolute;
bottom: 12px;
left: 12px;
padding: 3px 11px;
margin: 0;
min-width: 0;
min-height: 0;
line-height: 20px;
border-radius: 50px;
background-color: #fff;
color: #111;
font-weight: 700;
font-size: 13px;
}```
Thanks and regards!
Seems a bit of an incomplete question. Would be good to see where the element s sit in relation to other elelements and also associated CSS.
But looks like it is as simple as changing left, to right in your CSS.
As the title says, I have a weird css error on my hands. I've built a rails app using bootstrap and some custom css, testing the whole thing in chrome initially. I started checking it out in firefox and my user sign in form-fields don't seem to respond to clicking on them or typing. You can't see the placeholder value nor what you're typing. Has anyone heard of this before? Any ideas what causes it?
To illustrate I made a jsfiddle (my first). I was kind of heavy handed and just copied the css right out of my inspector so it's a little bit of a mess. Open it in firefox and the form cannot be typed into. In chrome it's fine. The offending line on this fiddle appears to be 28, the -mox-box-sizing rule.
http://jsfiddle.net/vRF3F/
.row-fluid [class*="span"] {
-moz-box-sizing: border-box;
display: block;
float: left;
margin-left: 2.12766%;
min-height: 30px;
width: 100%;
}
Ok, I think I have found the cause:
If you remove this line:
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
border-radius: 4px 4px 4px 4px;
color: #555555;
display: inline-block;
font-size: 14px;
/* height: 20px;*/
line-height: 20px;
margin-bottom: 10px;
padding: 4px 6px;
vertical-align: middle;
}
it will work. Setting the height property will cause the parent div to collapse so you won't see the input box anymore, hence it appear to not work. The padding alone should be fine to give it a height.
See updated fiddle here:
http://jsfiddle.net/AbdiasSoftware/vRF3F/3/
Bootstrap CSS does include the box-sizing property with all vendor prefixes in that selector, I don't know why you are only getting the -moz
.row-fluid [class*="span"] {
...
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
...
}
Try updating your CSS with that and you will note that your inputs are now smaller in height so just set a specific value for height and I think you'll be good to go
.new-user input[type="text"],.new-user input[type="password"]{
height: 60px;
}
I am working on a web base app for my school with different versions of CSS for handheld, tablet and desktop. I am using media queries for this. The app is almost done and it works correctly on almost all browsers and android. The app looks awesome on Iphone/Ipad however buttons do not work making the app useless in these devices.
This is what I have:
//Source code
<div id="signinbutton" class="blue_button">Sign In</div>
//desktop.CSS
.blue_button {
width: 130px;
height: auto;
padding: 8px;
margin: 0% auto 20% auto;
background-image:url(../../images/bluebar5.png);
color: #FFF;
text-align: center;
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 14pt;
font-weight: bolder;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
cursor: default;
}
.blue_button:hover {
opacity: 0.7;
}
//Handheld.css (this overwrites css on desktop)
.blue_button {
width: 260px;
font-size: 18pt;
background-image:url(../../images/bluebar6.png);
}
I tried applying the style to #signinbutton without success.
You should use a <button> or <input type="button"> tag instead of a div. While the <div> button functionality may work in some browsers, it can be a bit of a hack compared to the traditional button tags
You can wrap your div around <a> like this. It's perfectly valid with html5 now.
<div id="signinbutton" class="blue_button">Sign In</div>
You just need to adjust
Reference:
https://css-tricks.com/snippets/jquery/make-entire-div-clickable/
Try adding to the style of the div {cursor:pointer}.
I've styled an ordinary link to resemble a button in our Sencha Touch 2-based mobile application, and I'm having issues with most of the link not functioning in Safari on the iPhone.
The link is an ordinary <a> tag with an inner <span> element containing the label text. There is padding on the <a> element, which allows taps to be registered. It appears that the inner <span> is blocking taps from being registered in the parent anchor as a link tap, and its background is transparent.
Here's the markup:
<a href="http://test-site.xx/full-site-page?param=value" class="x-button-normal x-button btn-profile">
<span class="x-button-label">View profile on full site</span>
</a>
Testing this in Chrome doesn't present any problems, i.e. clicking the span causes the parent hyperlink to be followed. Both are Webkit-based browsers. One of our testers also tested this in Safari on a Macbook with no problems; I have also tested this in Chrome using a Wacom Bamboo tablet with no problems. This is only an issue on mobile devices (tested on both iPhone and Android 2.2) - which is what we're targeting.
Is there a CSS property I can set on the <span> element to allow taps to fall through to the parent hyperlink? Ideally I want to avoid having to set events through JavaScript. Any ideas as to why this isn't working as I'd expect?
Update: Here are the styles for the inner span as reported by Chrome's developer console:
-webkit-box-align: center;
-webkit-box-flex: 1;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-drag: none;
-webkit-user-select: none;
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: none;
background-origin: padding-box;
border-bottom-color: white;
border-bottom-style: none;
border-bottom-width: 0px;
border-left-color: white;
border-left-style: none;
border-left-width: 0px;
border-right-color: white;
border-right-style: none;
border-right-width: 0px;
border-top-color: white;
border-top-style: none;
border-top-width: 0px;
box-shadow: none;
box-sizing: border-box;
color: white;
cursor: auto;
display: inline;
font-family: 'Helvetica Neue', HelveticaNeue, Helvetica-Neue, Helvetica, 'BBAlpha Sans', sans-serif;
font-size: 18px;
font-weight: bold;
height: auto;
line-height: 21px;
overflow-x: hidden;
overflow-y: hidden;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: static;
text-align: center;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
width: auto;
Many thanks.
Solved it, thanks to this post which mentions the following CSS property:
pointer-events: none;
Adding this to the style for the inner <span> (and inner floated <img> as alluded to in my second comment) allowed these to pass the tap through to the parent hyperlink.
The strange thing is that Sencha Touch 2 seemed to interfere with the DOM, not sure what it was in particular. Mocking up a similarly-styled button on a completely static HTML page (no JavaScript, let alone Sencha Touch 2) did not exhibit the original problem on a mobile device.
Another option in the simple case (single <span>, no floated images) was to refactor the styles to eliminate the need for an inner <span>, though this wasn't feasible for the more complicated case:
<a class="attachment" href="/someRepository/someDownload.pdf">
<img src="/images/fileExtension-pdf.png" alt="Attachment"/>
<span class="title">Title of download</span>
<span class="size">xxx kB</span>
</a>
I think this has to do with Sencha Touch's prevention of zooming. They have added in code to preventDefault most touchstart events (which kill the use of the link). There is an exception for anchors, but not for children of anchors (so tapping on an anchor itself works fine, but not tapping on a span within an anchor). I was able to monkey patch a quickfix in my application launch method:
Ext.Viewport.setPreventZooming(false); // unbind any existing handler
Ext.Viewport.doPreventZooming = Ext.Function.createInterceptor(Ext.Viewport.doPreventZooming, function(e){
return !Ext.fly(e.target).findParent('a');
});
Ext.Viewport.setPreventZooming(true);
The above code comes with no warranties (have not tested on Android and I suspect it to be fairly inefficient). I have also reported this as a bug: http://www.sencha.com/forum/showthread.php?215032-Links-are-prevented-when-tapping-on-children
Here's my problem: I'm showing an overlay (using this) with a message div that has rounded corners.
Here is my css code for message div:
#modal1
{
margin-left: auto;
margin-right: auto;
display: none;
width: 620px;
height: 150px;
position: relative;
background-color: #FFF;
border: 12px solid #FF771C;
-webkit-border-top-left-radius: 12px;
-webkit-border-top-right-radius: 12px;
-webkit-border-bottom-left-radius: 12px;
-webkit-border-bottom-right-radius: 12px;
text-align: center;
}
And my problem is that I get a white "border" (if you look closely) in the upper left and right corners. Here is the image so you can see for yourself. Now, I "solved" this by putting top-left and -right border properties of webkit to 0px, but this is not a solution, so I'm asking if you have maybe some ideas? Btw, this is only developed for chrome that's why it's only -webkit up there in the code..
EDIT:
I found the solution on their forum http://flowplayer.org/tools/forum/40/46850
this seems to be the border of another div or element behind your rounded bordered div