What kinds of options do I have when a dropdown menu is faced with text that is so wide that extending the menu's width to accommodate is not feasible? i.e. It breaks the page layout, or just looks too ugly if the dropdown is adjusted to fit the long item.
Truncation?
Truncation plus full hover text?
Don't allow items that long?
Anyone encountered any elegant solutions to this?
Thanks.
I realise I'm fairly late to this question, but I've been hunting for an answer and I may have found a fairly elegant solution.
Have a look here:
http://www.getharvest.com/blog/2009/12/dropdown-problems-on-internet-explorer/
http://www.dougboude.com/blog/1/2008/05/Viewing-Option-Text-in-IE7-thats-Wider-than-the-Select-List.cfm
The first link talks about a couple of solutions before recommending a solution based on the second link.
The idea is that on click, you change the width of the <select> tag such that it is big enough to show the full text of the options. By keeping the <select> tag inside a div with overflow set to 'hidden', it doesn't screw with the rest of the page.
Try it out - it's a pretty good solution.
Truncation with tooltip would be my choice....
The last time i had to do that i used a telerik control, which was quite UI rich.
I agree with GordonB regarding truncating the options. Excessively long options can be hard to read, and as you mentioned it looks horrible.
If your dropdown is populated from user input, however, I'd restrict the length. What can be said with 15 words should be said with 5 ... if it can't, then perhaps a dropdown isn't your best option.
For example, if your options are the titles of research papers and their authors, you can probably abbreviate them down to a few key words ("String Theory and You [Brown 2008]"). On the other hand, if the options themselves differ by only a few words and lose meaning if they are truncated (e.g. a list of options like "Peanut butter and grape jelly sandwich with carrot sticks and soy milk" and "Peanut butter and boysenberry jelly sandwith with carrot sticks and 2% milk") maybe you would be better served by displaying all the options sequentially, accompanied by a checkbox or radio button as appropriate.
(If you're using ASP.NET, basically I'm saying using a repeater instead of a DropDownList)
This second approach might also allow you to incorporate other elements that you wouldn't be able to in a dropdown. Take a look at this Amazon search result page for ideas.
Give the element a maximum width with the CSS property max-width.
Most browsers show the options at full width regardless of the dropdown's actual width whereas IE crops them to the width of the select box. So the problem is really browser specific.
I've made a solution using absolute positioning on the dropdown so that I could extend it's width on hover in IE without breaking my layout. A bit hacky but it's one option.
I've been using commercial ASP.NET control that is implemented using <div> rather than <select>. This way we could put multiline elements on it, style it as we wanted and do some other stuff.
Depends how wide you are talking, what the context is. Often this comes down to a design problem rather than a coding problem. If the text is really long you will have usability problems regardless because reading long text in a dropdown is difficult. My options would be:
If the dropdown is really narrow and the longest items aren't very long (eg 3-4 words) change the design to accommodate it.
If the text is really long (eg sentences) then truncate it if you can. Sometimes text isn't amenable to this (eg. you may end up with multiple items with the same text). You can't really put tooltips on select list items.
If the text is really long and can't be truncated, you may want to consider a different UI option.
Why not create a calculated field which is based on the lengthy field.
Only create it to only be the first 50 (say) characters.
=LEFT([Title],50)
Then reference that field in the drop down.
Related
I'm using the code found here to create my text links located on this page. What I am trying to accomplish is having the rollover text be the description of the link ie: 'Insight' goes to the 'About' page. Some of descriptions are too long and are getting cut off and when I try to make them bigger they just overlap the link next to it. Any suggestions on how to fix it or a better method I should be using? Here is the HTML I'm using.
<span data-title="Services">Ingenuity.</span>
Sounds like you're asking for design advice as well.
Judging by the way you have your links presented (each list item with an equal fixed width in a row), a longer description will certainly overlap other links if you do end up finding a solution to make them not "cut off" (it exists, but I'm just not sure if it'll give you a desired result that you're looking for).
Either customize the widths of each list item so they don't overlap, or use some other cool transition (i.e. have the description slide down under the link rather than flip it). That's what I would suggest personally; however, it's up to you to choose what's considered a "better method" of displaying your descriptions.
I have some content set to be in 3 columns, but as it wraps from column to column in Chrome, it adds the margin at the top of the next column, which makes sense in one way, but looks very bad.
Here is an example of what I'm talking about: http://www.sanguinediabetes.com/wp/concept/
How can I style this so there is not an ugly gap at the top of some of the columns, but still space between the paragraphs that end midcolumn?
What you're seeing is arguably the correct behavior for multicolumn elements. The bottom margin you've set on each paragraph will push down subsequent paragraphs, even when there's a column break just before those paragraphs. Yeah, it's arguably weird, but hey, there are even bigger issues with this layout model that need fixing right now.
One way to address your problem would be to remove all paragraph margins and force a column break after certain selected paragraphs. The revised draft of the spec from last year provides for a column-break declaration. But support so far is literally nil, the MDN article on the topic is nonexistent, and chrome doesn't even pretend to support it. Basically, you're in some pretty new territory, and the tools aren't quite there yet.
While I'm here, there are other pressing problems with your layout. To see the most basic one, try sizing the viewport narrow, around 500 pixels. Your columns become painfully thin and unreadable, really just a stack of individual words. Considering that your text says "Mobile phones have helped to popularize the primary concept of interface design: it shouldn’t be the duty of the user to muddle through complex procedures and hidden options to achieve simple tasks, or even complex ones. It is the duty of the software to be designed in such a way that every operation is simple, obvious and fast."? This is kind of funny. Have you tried looking at this on a mobile phone? I would recommend it, considering the content.
Column-count is awesome and all but if you're looking for any real browser compatibility you're much better off with good old floated columns for now. Perhaps try some variation of the one true layout.
I've had immense trouble googling this, I guess I don't quite know the name for the concept. I have a section of the page where a series of text boxes will appear, the number might vary. I'd like to have them fill a div in a top-to-bottom then left-to-right manner. That is, the text boxes will stack (normal) until they reach the bottom then wrap around to the top again in a new column.
Like:
Textbox1 Textbox4 Textbox7
Textbox2 Textbox5 Textbox8
Textbox3 Textbox6
Is that possible in CSS, or will I need to actually code something to do this correctly?
You can use CSS columns, which is described on A List Apart.
Note that this only works in modern browsers. Otherwise you need JavaScript or extra HTML.
You want to Google "multi-column lists" using CSS.
I personally call this newspaper columns, and there is support for this in CSS 3
As mentioned, CSS3 allows for this, though browser support is going to likely be mixed.
It wouldn't be too hard to do via JavaScript, though.
I'd like to add a description field to an application that can be as long as several lines (or even paragraphs) or as short as a one-liner.
Instead of taking up a lot of screen real estate or have scroll bars, it would be preferable to have the textbox grow based on its input.
On IE6 adding Style="overflow-y:visible" accomplishes this nicely (both on display of read only, and if we are in edit mode).
However, it has no effect on Firefox, or IE7 for that matter.
Is there a relatively easy fix for this?
Thanks!
You can accomplish this using jquery if you want to go down that route. It's a nice effect, kind of like the comment textarea in facebook.
http://javascriptly.com/examples/jquery-grab-bag/autogrow-textarea.html
I need help. My main page has a long table that will typically be approximately 2 screens "tall" (assuming a 1024x768 browser window).
I want
the user to be able to browse that table up and down, while always having a set of control buttons available in the currently visible portion of the page.
AND
to retain control over the color scheme of all elements on the page.
The problem is that both solutions I could think of that address the first point (using an overflown div or a frame) involve scrollbars that I cannot style. (At least on Firefox they will invariably be gray.)
I cannot implement a "pager" which breaks the data on the table into chunks which are served one at a time (eg, having a "next 40 results" link at the bottom). The user needs to refer to the full table to find and compare multiple rows throughout the table.
What are my options? My head hurts when I think of moving this entire page to Flash for this reason...
thanks in advance...
i would use jquery and a scrollable div.
Here are some resources to get you started.
http://www.switchonthecode.com/tutorials/using-jquery-slider-to-scroll-a-div
http://flowplayer.org/tools/demos/scrollable/vertical.html
http://logicbox.net/jquery/simplyscroll/vertical.html
Don't change the styling of scrollbars unless you really know what you're doing! However, if you understand the usability implications (and try to make them as user-friendly as possible), try the following options:
If you use jQuery, try jScrollPane.
If you use MooTools, try MooScroll or MooScroller.
The following StackOverflow threads might also be useful:
How do I change the browser's scrollbar colours using CSS?
What's the deal with CSS and scroll bars?
How can one use scroll bar images?