IOS7 and translucent background of...

Sep 19th, 2013 at 11:04 AM
User 187934 Photo

Eric Rohloff
Senior Advisor
20,271 posts

View this form on an Iphone running IOS7. Select the drop down.
http://progrower.coffeecup.com/forms/dr … arkiphone/
With the translucent background of the drop downs its hard to read the text.
Man this is going to make for a bunch of extra work.:(
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Sep 19th, 2013 at 11:28 AM
User 103173 Photo

Scott Swedorski
VP of Software Development
0 posts

The text looks ok to me. Not sure i like iOS 7's new scroller.

http://s22.postimg.org/y8iwpuy3l/photo.png
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
Sep 19th, 2013 at 11:42 AM
User 187934 Photo

Eric Rohloff
Senior Advisor
20,271 posts

The text and background in the scroll is the issue. Thanks Apple.lol
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Sep 19th, 2013 at 05:32 PM
User 187934 Photo

Eric Rohloff
Senior Advisor
20,271 posts

For forms with a dark background color that make it hard to see drop downs in IOS7.
Add this to the top of your form html page. It detects for IOS7 and changes the class accordingly.
Adjust to your needs.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
.dropdownl{
background-color: rgb(255, 255, 153);
color: rgb(0, 0, 0);
}

.dropdownd{
background-color: rgb(0, 0, 0);
color: rgb(255, 255, 0);
}</style>

<script>
$(document).ready(function(){
var device = navigator.userAgent.toLowerCase();
var ios = device.match(/OS 7(_\d)+ like Mac OS X/i);
if (ios) {
// this will add the class for IOS7
$("div").addClass("dropdownl");
$("label").addClass("dropdownl");
}
else{
$("div").addClass("dropdownd");
}
});
</script>

Now go through your form and remove the inline color "color: rgb(255, 255, 0);" or wrap the elements you need changed in a simple <div></div>
I'm using it to change my form color so drop downs are easier to see.
JQuery to the rescue.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Sep 19th, 2013 at 05:54 PM
User 122279 Photo

Inger
Senior Advisor
14,648 posts
Online Now

Eric, while you're at it, does this apply to dark dropdown menus as well?
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Sep 19th, 2013 at 05:59 PM
User 187934 Photo

Eric Rohloff
Senior Advisor
20,271 posts

We can alter this to do anything you want.:cool: I haven't seen an issue with menus, just drop down lists.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Sep 20th, 2013 at 07:30 AM
User 187934 Photo

Eric Rohloff
Senior Advisor
20,271 posts

Just another tip is to turn on high contrast. It makes drop downs in IOS7 on dark forms a little better. You may not need the work around for them after doing this.
Go to settings -> general -> accessibility -> increased contrast
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.