Make selects wider

I'm trying to use uniformjs.com
but I'm not sure how I can the selects wider.

Any ideas?
LVL 8
JRockFLAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
TomunConnect With a Mentor Commented:
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
 
TomunCommented:
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
 
TomunCommented:
Sorry you'll also need to change the width of div.selector span which is just after the other above.
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
JRockFLAuthor Commented:
Thanks for the reply. I just to increase both widths, but the select remains the same.
Can you verify?
0
 
TomunCommented:
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
 
JRockFLAuthor Commented:
I tried it in firefox too with firebug and it did not change
0
 
JRockFLAuthor Commented:
can you send me a screen shot of larger and what you changed?
0
 
JRockFLAuthor Commented:
perfect, works for me too. thank you
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.