I use Responsive Web design to turn my page into mobile layout, but something weird happens,, why the style of checkbox in IOS changes like that, the checkbox border disappear, and the check symbol is hollow.
please see the attachment.
The first image is the screenshot of Chrome
The first image is the screenshot of iphone4
What should I do to make the checkbox in IOS as same as normal checkbox?
In general, you shouldn't. Each browser and OS can style their controls differently. This is not a part of the HTML standard.
MacOS also styles their checkboxes different, as does Linux.
Why do you feel the need to change the way the checkboxes are styled? Users of that platform are used to the checkboxes looking the way that OS makes them. If you style them differently, then users will find this odd.
Related
I am working on a website using Bootstrap and have a problem I can't seem to fix. Here is the draft of the site.
On the "What We Do" panel, I made a clickable modal window on the first thumbnail box (it says "Enterprise Software development" under the thumbnail). If you click the thumbnail on a non-mobile device, a modal window will pop-up.
On a desktop computer (or laptop), it works just fine. But on a iOS (iPhone, iPad, etc.) it doesn't work at all: i.e. tapping it doesn't bring up the modal window.
However, if you look lower on the page at the "Who We are" panel, there is a "See more about Tim..." button. If you click or tap on that button, it will work across all devices (include iOS).
The only difference I can see between the two is that the first one is on a <div> tag, whereas the second one is on a <button> tag.
Does Bootstrap not support starting up a modal window from a <div> on an iOS device? If it does, do you see anything wrong with my code that would make it fail only on iOS devices?
Chris's answer is correct. Changing the div to a button would help clarify your markup. If, however, you need to keep the same markup, you can also add cursor: pointer to your div element to let safari know that this is something that might be clickable. It also let's mouse users have a standard visual cue that the element is clickable as well.
Just add the class clickable and then include the following CSS:
.clickable {
cursor: pointer;
}
Here's an MCVE in Fiddle with the fix as well
notice I haven't used Bootstrap's btn classes here because they will add the cursor rule automatically.
This isn't Bootstrap-specific at all, it's a general problem on iOS. By default, many not-usually-interactive elements (such as <div>s) aren't clickable/tappable on iOS.
See https://github.com/facebook/react/issues/134 and the links & follow-ups therein for some more details.
If possible, use a <button> or <a> instead. A <div> for an interactive element isn't very semantically appropriate anyway.
I am trying to insert a placeholder icon into a select2 input field.
View on desktop:
View on mobile:
Here is the code I use to integrate font awesome using unicode, to place the icon in a input field.
jade (element in which I initialize the select2 on)
#tags.icon(type="text", name="tags", placeholder= " tags...")
and CSS
.select2-input, #searchPosts
font-family 'FontAwesome'
The weird thing is, when I click into the input field, type and then clear the typing, and click outside, the tag icon shows correctly. But it does not show correctly on load.
Font Awesome and other icon sites often have compatibility issues across various different platforms. You should have back up options if unicode appears - such as a sprite.
Often mobile browser encoding is different to web version of the browser.
There are many ways to handle this and this article is a good place to start:
http://www.creativebloq.com/app-design/icon-fonts-in-apps-21410734
Without debugging it I'd say you're experiencing a z-index issue or an actual engine rendering mistake. Try setting the value later if you can. If you know the placeholder text is achieved through a dom element addition, try increasing its z-index. Good Luck.
I have a group of radio buttons, and have styled them so that they display:block so that they appear like buttons (have also hidden the radio button itself). This works great in Chrome and Firefox on desktops and on android tablets...but will not work on an iPad.
See it here:
http://jsfiddle.net/WhNRK/
For whatever reason the block element is not 'active' on an iPad and does not set the radio button. If I 'unhide' the radio button you can see that it doesn't get select when clicking the block. However if I click the actual radio button itself, it selects properly and even changes the block element background color as it should!
http://jsfiddle.net/WhNRK/1/
Any idea as to what I'm doing wrong that is causing this to happen? Seems like it should be pretty straightforward functionality, so I'm hoping its just something simple I'm overlooking...
The primary use of the site that this is incorporated within is meant for mobile devices, so definitely need it working on any iOS device (assuming it likely happens on an iPhone as well, just don't have one here with me to test right now).
Thanks for any suggestions you may have!
Fisrt of all, your fiddle does indeed not work on the iphone either, both in safari and chrome.
Curious as i am, i tried to find the solution by playing a bit with your code. In changed the html a bit to make the label a sibling of the input, rather then a parent. Still with no effect on my iphone.
After some googling i found this: http://forums.macrumors.com/showthread.php?t=785632
I tryed the solution and it seems to work, allthough i have no clue why. I guess it is some sort of bug...
You have to add onclick="" to your labels.
I didn't test it on an iPad, but as it is just a big iPhone it should work the same. A working example can be found here: http://jsfiddle.net/WhNRK/15/
I recently made a new WordPress theme for a local travel company and they are now getting reports that two elements in my design are not in the correct positions in Firefox (seems specific to version 3.6) and Chrome for Mac.
A page where both issues are visible: http://www.totemtravel.com/blog
Issues:
The white flag with the logo on it at the top of every page jumps
several inches to the right to cover the area code of the first
phone number.
The search button at the bottom of the blog categories widget in the sidebar jumps to the right, out of the widget, and off the page content wrapper.
I think the issue has to do with where those browser assume the item should be before the relative positioning, but I need a way to make these all look the same across all modern-ish browsers.
I wont paste the pages of source code behind the theme since it can be easily viewed with Firebug or the Chrome inspector, but please let me know if any additional info would help.
1: The img for the white flag must have left:0. Not all browsers default to left 0. Firefox for example, is defaulted to left:50%. Another problem is your trying to relatively position a td element for the title "Totem Travel", this is invalid and I would recommend using divs here instead of tables.
2: This is due to the native CSS styling differences of the browsers. That is why people use CSS Reset style sheets, to zero everything out so you know for sure the "default" css is the same. Here's an example: http://meyerweb.com/eric/tools/css/reset/. The effect this is having on your css now is that, the submit button is falling down to under the input as it doesn't have enough space - so when you are relatively positioning it it is off in the browsers.
3: Relatively/absolutely positioning everything isn't quite the best way to go about styling a website. You will find many inconsistencies like you are experiencing and there are better ways. I would recommend visiting some example themes on sites such as themeforest.com or elegantthemes.com and seeing how they do their CSS and HTML
There Is A Date Picker Code In my Program (Of Course We Placed A Calendar Picture In The Web Page) The Problem Now Is That How Can We Be Able Not To Include The Picture Of The Calendar Picture In Printing?
Use a specific CSS for printing: http://www.alistapart.com/articles/goingtoprint/
Manipulate the dom (remove the image) before printing and insert it back afterwards.
The picture is most likely a background image. Browsers don't print background images by default. You'll need to activate printing of background images (and colors) in your browsers options.
If that's not a option you'll need to change your code, so that the image becomes a normal image instead of a background image.
First You should clarify what is Date Picker - is it Your custom code, or Jquery's one. If its javascript widget as with Jquery, its a common problem with different browsers. My suggestion would be - try YUI calendar instead, it shows well on IE, Firefox and even old Opera. Example:
http://developer.yahoo.com/yui/examples/calendar/formtxt.html
By the way, Jquery's DatePicker shows well in Firefox 3.6.