?
Solved

Make selects wider

Posted on 2011-03-04
8
Medium Priority
?
520 Views
Last Modified: 2012-05-11
I'm trying to use uniformjs.com
but I'm not sure how I can the selects wider.

Any ideas?
0
Comment
Question by:JRockFL
  • 4
  • 4
8 Comments
 
LVL 4

Expert Comment

by:Tomun
ID: 35037854
Change the width in the css. File uniform.default.css around line 298:

div.selector select {
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  width: 190px;
}
0
 
LVL 4

Expert Comment

by:Tomun
ID: 35037933
Sorry you'll also need to change the width of div.selector span which is just after the other above.
0
 
LVL 8

Author Comment

by:JRockFL
ID: 35038816
Thanks for the reply. I just to increase both widths, but the select remains the same.
Can you verify?
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 4

Expert Comment

by:Tomun
ID: 35039264
Which browser are you using?

I did my test in Firefox on their website, using the firebug addon to inspect the element and find out where its css settings were. Editing the two settings did change the width, the second setting changed the collapsed view's width and the first the size of the dropdown.

It may use different elements in different browsers though or have browser specific css rules for the select. For me the visible part of the select was <span style="-moz-user-select: none;">Option 1</span> so maybe in your browser it's not using a span.

I found this piece of documentation at https://github.com/pixelmatrix/uniform :

"To edit the CSS of Uniform it is highly recommended to not edit the theme files, but to override them using CSS. Make sure your CSS file comes after the uniform theme css file in the HEAD section.

It’s common to want to resize the selects or other elements. The best way is to set the width property on the div element, span element and the form element itself. Look through the theme CSS in the presentation section to see where the width property is currently set."

So it seems like we're trying the right thing, except not using a separate css file which sounds like a good idea.
0
 
LVL 8

Author Comment

by:JRockFL
ID: 35039469
I tried it in firefox too with firebug and it did not change
0
 
LVL 8

Author Comment

by:JRockFL
ID: 35039577
can you send me a screen shot of larger and what you changed?
0
 
LVL 4

Accepted Solution

by:
Tomun earned 2000 total points
ID: 35039678
Here I made it narrower to 90px. To go wider I'd have to move the other stuff out of the way.
uniform.png
0
 
LVL 8

Author Closing Comment

by:JRockFL
ID: 35039734
perfect, works for me too. thank you
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month8 days, 20 hours left to enroll

621 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