2

I have list box to show the select box data which is long(almost one line sentence). I cant make list box which look very big.

For all sentence I have can use some code(Say for 'Sentence1' I can use short-form as "A")

What is best way to show list box in such condition.

List box

<select>
<option>Long Sentence1....</option>
<option>Long Sentence2....</option>
</select>

Not necessary list box. I just want precise option.

Thanks

7
  • Let us know more: Why can't you make big list boxes - Is there much more content to be shown? Or does it have to fit onto a mobile screen? And what do you mean by "I can use some code" - Do your users know the codes already? If not, how do you think they can link the code with the sentence? Oct 15 '15 at 6:01
  • yes content is bigger say almost 2 lines. Not for mobile screen for now. User don't know about code, I was thinking I can have some code kind which will look simple (on click of code some popup will showup --just thought )
    – Mike Phils
    Oct 15 '15 at 6:08
  • I get that the content of the select box is big (up to two lines). What about the rest of the UI? I am not getting the reason why you are worried about the size of the selection. Oct 15 '15 at 6:22
  • I list box will have 13 options an each is of 2 lines. Hence that much big list box will not go with the design and also it won't look good each list with 2 lines.
    – Mike Phils
    Oct 15 '15 at 6:26
  • Are you sure you want to use dropdown ? Why can't you go with a checkbox list ?
    – Sooraj
    Oct 15 '15 at 7:34
1

A pop-up with full sentence when the user hovers on the short sentence line would be a solution.

enter image description here

1

One option would be if you definitely need to display the data in a drop-down select list to keep the width of the field fixed and expand it on selection. The options could wrap inside the list as well. Though when a value is selected it will not fit all for display

enter image description here

1

Upon First Glance

I believe your answer lies in the marquee effects, previously answered here https://stackoverflow.com/questions/337330/javascript-marquee-to-replace-marquee-tags.

My favorite has to be this one: http://remysharp.com/2008/09/10/the-silky-smooth-marquee/


A Preferred Design Choice

I love Apple's solution (personal bias), which is to display the text normally for a moment before scrolling if needed until it came back to default and pausing before the next cycle. Sadly I believe a custom JQuery or JavaScript approach is in order if you wish to achieve the best results.


A Responsive Touch

For a good marquee effect based in the first link (silky smooth marquee) the function would have to add instead of:

$('marquee').marquee(optionalClass);

Would need to:

1 Give horizontal overflow to .marquee classes in CSS (keeping them single lined):

.marquee {
    overflow-x: auto;
}

2 Load the gistfile1.js (I'd name it "marquee.js") found here

3 Check all $('.marquee') for overflowed content (in this case your buttons)

4 Apply marquee as necessary

5 Recheck whenever the page resizes

function isOverflowed(element){
  return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
}
$( window ).resize(function() {
  $('.marquee').each(function(){
    if(isOverflowed($(this))) $(this).marquee();
  });
});

isOverflowed function credit: micnic at https://stackoverflow.com/questions/9333379/javascript-css-check-if-overflow

Hope this helps you!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.