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.
Related
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.
I'm trying to solve the classic box packing/knapsack problem with a CSS layout.
I would like to arrange many boxes in a way that minimizes whitespace between elements, like this;
(source: tydus.net)
CSS3 columns work VERY well here - boxes are arranged sequentially, but all white space is consumed efficiently. There is a teeny weeny problem - boxes are "sheared", or span across multiple columns. Can't do that.
I used the classic div.clearer after some boxes, but that had no effect - the boxes still spanned over those CSS3 columns. There is a column-span CSS property, but it's not supported in any browser yet ;(
Optionally, I could define the columns myself and arrange the boxes by hand, but realistically the boxes change height very frequently.
Final question: Is there a way to arrange boxes in a way that minimises whitespace between boxes using pure CSS?
Thanks!
Although I haven't tried it myself yet, one possible answer may be to use the jQuery Masonry plugin. This seems to fit the requirements you state.
Doing this in pure CSS and HTML willl be very hard, you'll have to probably let go of some wishes/requirements...
At the moment I've got a div which is 1024px wide.
In that box are two CSS3 columns with text flowing automatically from one to the next.
However, I want to restrict the height of these two columns to 700px - once they are full I want 2 more columns with the same height to appear underneath them.
Is this possible?
OK. It is totally possible to achieve what I think you are about to build. However, if you want to do it by yourself, you will need a bit more then just CSS3 styles in place. You will need a fair amount of JavaScript as well.
Take a look at this Columnizer jQuery plugin (it can do the job)
Here's a sample site showing results of it's work: http://welcome.totheinter.net/autocolumn/sample10.html
Update on this:
The Adobe CSS Regions proposal mentioned by gimme5 looks excellent. Unfortunately, according to caniuse.com, there now seems to have very little browser support - it's been removed from current versions of Webkit.
There is a simpler proposal which may do the required job: CSS Multi-column layout (http://www.w3.org/TR/css3-multicol/) which appears to have broader browser support. I haven't tried it yet, but it might work for you without having to pile in a ton of Javascript.
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?