Grow your CSS skills. Land your dream job.

Looking for advice to display options with long text to the users

  • # March 13, 2013 at 11:40 am

    I’m new at this forum, i hope lear a lot of all you.

    Well, I have a form that occupies a div with span6 class (I’m using twitter-bootstrap framework). Inside contains a selectbox in which I load rows from a database. The problem is that in some cases the text of these rows are too long, and then the selectbox does not look right, therefore is not a convenient method for the user to choose the desired option.



    The maximun and minimun length of the data loaded are:

    Min – 6 characters:

    XXXXXX

    Max – 92 characters:

    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

    So my question is:
    How do you organize all these information so to be most comfortable to choose for the users?

    Do you recommend any plugin in particular? Maybe modifying one that has *twitter-bootstrap* incorporated.

    I would appreciate any advice or tip.
    Thanks in advance.

    # March 13, 2013 at 11:43 am

    A **Select Box** with 92 characters seems excessive.

    Is there anything you can do to change that before we get into the nitty-gritty?

    # March 13, 2013 at 1:26 pm

    Here are all possible ways to break long strings of text http://www.websitecodetutorials.com/code/css/wrap-text-long-strings-of-text.php

    # March 13, 2013 at 1:31 pm

    I’ve tried the basic options in CSS and most of them fail on the [option] element.

    You can try

    select, option {
    max-width: insert your value here;
    }

    which will cut of the text after the value is reached BUT this is pretty much only FF supported for BOTH.

    It works on the [select] element OK but not for the [option] in Chrome, Safari, IE10.

    # March 13, 2013 at 1:31 pm

    I’m afraid I can’t reduce the length of the information. And the count of elements loaded is between 1 to 5. And the size of the form will be fixed. Some ideas?

    # March 13, 2013 at 3:45 pm

    What about using radio buttons or check boxes instead? Text will just flow naturally to the next line.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".