[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

WordPress css <select> element

Posted on 2015-02-24
9
Medium Priority
?
120 Views
Last Modified: 2015-02-25
In a wordpress site I am using an html <select> element with about 21 options.

It works perfectly in Firefox & Safari.

In Chrome, it has odd behavior the slider on the right does not have a slide element in it. Site visitors cannot see the end of the options list (last 3 elements).

In the Theme css, I see this:

input,select,textarea{ -moz-border-radius: 0px; -webkit-border-radius:0px; border-radius:0px; }

In another case, the -webkit thing caused issues with radio buttons in Chrome. I removed that (at the suggestion of an expert) & the radio buttons worked fine.

You can see what I get by going to rain1.com/new-site/service-agreement/. Enter zip code 43219, it's on the next page. Of course I mean in Chrome.

How can I fix this?

Thanks
0
Comment
Question by:Richard Korts
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
9 Comments
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40629366
In Chrome, it has odd behavior the slider on the right does not have a slide element in it. Site visitors cannot see the end of the options list (last 3 elements).

Not in my Chrome...

Scrollbar and choices visible.
0
 

Author Comment

by:Richard Korts
ID: 40629383
Jason,

Yes, in my Chrome too, it looks like what you saw.

But two different people on different computers experienced the behavior I described. One of them JUST downloaded chrome today, just to test this, so they have the latest version.

I don't know what to do.

Put 22 radio buttons on the page?
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40629404
Put 22 radio buttons on the page?

Up to you.  I can't fix what I can't see as broken, though.

Can those users replicate it on every page access?
Is caching in play?
Security settings on the local machine blocking access?
Are those users manually zooming the browser magnification?
0
Simplify Your Workload with One Tool

How do you combat today’s intelligent hacker while managing multiple domains and platforms? By simplifying your workload with one tool. With Lunarpages hosting through Plesk Onyx, you can:

Automate SSL generation and installation with two clicks
Experience total server control

 

Author Comment

by:Richard Korts
ID: 40629464
Jason,  

I set up an independent test, whole page just this code:

<!DOCTYPE html>

<html>
<head>
<title>Untitled</title>
</head>
<body>
Test Select<br>
<select name="sel">
<?php
      for ($i = 1; $i < 26; $i++) { ?>
            <option value="<? print $i; ?>"><? print $i; ?></option>
      <? } ?>
</select>      
</body>
</html>

When I FIRST open it in Chrome & click the darker bar on the right, it does nothing.

The 2nd time I click it, it lets me move up & down.

It's hard for me to believe there is an overall issue in Chrome
0
 

Author Comment

by:Richard Korts
ID: 40629480
Jason,

There are some illusions to it here:

http://stackoverflow.com/questions/21166379/html-select-scroll-bar-not-functioning-correctly-in-chrome-32

But I tried the jsfiddle in my Chrome, it worked fine.

Richard
0
 

Author Comment

by:Richard Korts
ID: 40629529
Jason,

What's the downside if I remove { -moz-border-radius: 0px; -webkit-border-radius:0px; border-radius:0px; }

from the theme CSS?

Other than the issues you discussed re the radio button.

Thanks
0
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 2000 total points
ID: 40629802
That bug is from a year ago, but I wouldn't put it past Google to reintroduce it given how often Chrome updates.

I'm not entirely sure what to tell you here.  20+ radio buttons is kind of an UI disaster but if you are that concerned over this bug, run with it and keep a test version of the page with the select handy to test when Google resolves it.  If you want to keep testing it, it might be worth opening a browserstack account and running that page through all versions of Chrome to see if you can isolate which version(s) are affected.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40629805
What's the downside if I remove { -moz-border-radius: 0px; -webkit-border-radius:0px; border-radius:0px; }

Other stuff may look funny?  I don't think it's a huge issue to kill it, just make sure you retest things before going to production.
0
 

Author Closing Comment

by:Richard Korts
ID: 40630964
We decided to try using the size parameter on the <select> element to force display of all 21 options at ALL times; had to rearrange the page a little, not sure the customer will like it but onward & upward.

Richard
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

WordPress can be pretty daunting, especially for a beginner, so I thought it might be a good idea to write an article to show how easy it is to get started in WordPress and to design a custom theme.  The first step is to check with your hosting comp…
In Part I (http://www.experts-exchange.com/Web_Development/Blogs/WordPress/A_8410-Getting-Started-In-WordPress-Part-I.html), I introduced you to the powerful WordPress backend, the WordPress administrative Dashboard.  In Part II, I will introduce yo…
The purpose of this video is to demonstrate how to create a Printer Friendly PDF on a WordPress Page. This will be demonstrated using a Windows 8 PC. Tools Used are Photoshop, Awesome Screenshot” Google Chrome Extension, and SmallPDF.com Log…
The purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…
Suggested Courses

649 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question