Solved

Make selects wider

Posted on 2011-03-04
8
510 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
LVL 8

Author Comment

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

Author Comment

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

Accepted Solution

by:
Tomun earned 500 total points
Comment Utility
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
Comment Utility
perfect, works for me too. thank you
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
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 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)

762 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

14 Experts available now in Live!

Get 1:1 Help Now