Solved

Make selects wider

Posted on 2011-03-04
8
515 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
[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
  • 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
Report: Liquid Web beats Amazon, Rackspace & More

A study by performance analyst firm Cloud Spectator finds that Liquid Web beats rivals Amazon, Rackspace and DigitalOcean when it comes to website and cloud application performance.

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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Hi all! Recently there was EE question and the person wanted to have a multi-column textbox <div> selection, so as a first step to answer I provided a link but that was not complete with JavaScript selection, but had a good style sheet. So as a ques…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
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

737 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