Solved

Make selects wider

Posted on 2011-03-04
8
511 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
 
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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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 500 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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

867 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now