?
Solved

Make selects wider

Posted on 2011-03-04
8
Medium Priority
?
517 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

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

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 Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
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)

777 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