Listbox scrollbar on left

I have a list box with large width in a form and was wondering if there was away to have the vertical scrollbar to appear on left side than right.

Brij
BrijBhasinAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
ADSLMarkConnect With a Mentor Commented:
Ok, here is your solution:

<html>
<head>
<style text/css>
SELECT {direction: rtl;}
OPTION {text-align: left;}
</style>
<script language="javascript">
function padWithSpaces(num)
{
    var res = "";
    for(var i=0;i<num;i++)
        res += "&nbsp;";
    return res;
}

function padOptions()
{
    var sel = document.myform.myselect;
    var max = -1;
    for(var i=0;i<sel.length;i++)
    {
        var html = sel.options[i].innerHTML;
        if(max < html.length || max < 0)
            max = html.length;
    }
    for(var i=0;i<sel.length;i++)
    {
        var html = sel.options[i].innerHTML;
        sel.options[i].innerHTML = padWithSpaces(max - html.length) + html;
    }
}
</script>
</head>
<body onload="padOptions()">
<form name="myform">
<select name="myselect" multiple="multiple" style="font-family: courier;">
<option>aaa</option>
<option>aaaaa</option>
<option>aaaaaa</option>
<option>aaaaaaaaa</option>
<option>aaaaaaaaaaa</option>
</select>
</body>
</html>

Enjoy!
Mark
0
 
Irwin SantosComputer Integration SpecialistCommented:
not possible with standard HTML..you will have to incorporate Javascript.
0
 
gamebitsCommented:
Hi BrijBhasin,

use css

    <style text/css>
    html {direction:rtl;}
    body {direction:ltr;}
    </style>

Cheers!
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
gamebitsCommented:
IE only though.

Gamebits
0
 
BrijBhasinAuthor Commented:
want both IE and firefox
0
 
ADSLMarkCommented:
Like suggested..

<style text/css>
select {direction:rtl;}
</style>

<select multiple>
<option>Entry A</option>
<option>Entry B</option>
<option>Entry C</option>
</select>

works in IE and FF, in my opinion.

Mark.
0
 
BrijBhasinAuthor Commented:
Though this work, it makes the text right aligned. I want the text to remain left aligned and the scrollbar to appear on left rather than right. is that possible?
0
 
ADSLMarkCommented:
Only works in FF:

<style text/css>
SELECT {direction: rtl;}
OPTION {text-align: left;}
</style>

<select multiple>
<option>aaa</option>
<option>aaaaa</option>
<option>aaaaaa</option>
<option>aaaaaaaaa</option>
</select>

Mark
0
 
ADSLMarkCommented:
Only solution I can think of for IE is to add &nbsp; with a equal size font and then pad all the short names to the longest name. For example:

(consider X to stand for &nbsp;)

aa
aaa
aaaaa

=>

aaXXX
aaaXX
aaaaa

Of course this is a terrible solution and requires javascript or php to be a little bit elegant.

Mark
0
 
BrijBhasinAuthor Commented:
Thanks for the response .. but is there something that would work both in IE and FF.. Thanks
0
 
ADSLMarkCommented:
See both posts. I am sorry but the answer is:

No.

IE simply does not support such a thing.

Mark
0
 
gamebitsCommented:
Look at my post (second from the top) it works ONLY with IE, scrollbar to the left as well as the text.

Gamebits
0
 
ADSLMarkCommented:
True enough, but explanation was lacking.
0
 
Irwin SantosComputer Integration SpecialistCommented:
@mplungjan...with all due respect to gamebits & ADSLMark...my first comment is the correct answer.  Being that this is the HTML topic, my response is the sole conclusion to the question.

Though, not the answer the asker wants to hear, the fact that you CAN'T is a valid answer.  Therefore ACCEPT irwinpks

Let me refer you to...
http://www.experts-exchange.com/help.jsp#hi54
0
 
gamebitsCommented:
@irwinpks with all due respect I don't know if your comment as something to do with "Anyway, I'm on a quest to maintain 18k points per day " but I do believe ADSLMark and myself showed the asker there was way to have the scrollbar on the left side which was I believe the question to be answered.

I understand that if you add more variables to the question like it has to work with all major browsers and i want the text left align as well and on and on and on eventually the answer would be "no it cannot be done".

Gamebits
 
0
 
Irwin SantosComputer Integration SpecialistCommented:
@gamebits....you would be correct (to a degree) if this question was in CSS rather than HTML...whereas you would use a CSS validator to make sure that both IE & Firefox would be supporting the code you offered.  However, from what you two have provided...it doesn't... my initial comment to include Javascript would be a way to breakout of the W3 HTML compliancy to warrant what the asker is requiring.

Here is the HTML 4.01 guide for reference;
http://www.w3.org/TR/html4/

As for the quest for 18k a day...been there, done that.
0
 
Irwin SantosComputer Integration SpecialistCommented:
@BrijBhasin...what you may want to do is explore a FLASH solution...much easier to use than writing Javascript.
0
 
Michel PlungjanIT ExpertCommented:
@irwinpks with all due respect  - you know and I know that people asking questions here do not always know where a question belongs or even that there are such TAs as JavaScript or even that their question might have a solution if they asked it in the PHP TA instead of the ...

So yes, "no, but" is an answer, However in my book a suggestion that does what the user asked for (and who knows, perhaps it is on an intranet with fixed browsers) will be default until the questioner says: I cannot use CSS or I cannot use JavaScript - and by the way, "you have to incorporate javascript" is not necessarily correct either as we saw on the css suggestions - javascript itself would not do it - you will need DHTML and rewrite using your own scroll bars if you do not want the rtl css.
So a non-html answer in the html area is fine by me. I could even be convinced to move this to the CSS TA if asked.
Michel
0
 
BrijBhasinAuthor Commented:
Hi Guys,
  I appreciate all your suggestions but as suggested in the last post, I wasn't sure where this question belonged as I'm not sure what approach works best. Comment from ADSLMark
Date: 11/19/2006 07:57AM PST works but only on FF and the IE hack he suggested doesn't work. So I guess if someone can tell me how to get it to work in IE without adding nbsp; I'll award the points.

thanks,
Brij
0
 
Irwin SantosComputer Integration SpecialistCommented:
@mplungjan..."I could even be convinced to move this to the CSS TA if asked."

Perhaps post a MOVE to the appropriate topic in Support.
0
 
Michel PlungjanIT ExpertCommented:
As we still are not sure what the appropriate topic is, we will consider this...
@BrijBhasin: as you now know, what you are asking is not directly supported. So the suggestions you have now seems to answer your question

And the &nbsp; works if put in front of the text


<style text/css>
select {direction:rtl;}
</style>

<select multiple style="width:110px; overflow:scroll">
<option>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Entry A</option>
<option>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Entry B</option>
<option>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Entry C</option>

</select>
0
 
BrijBhasinAuthor Commented:
I can't use nbsp as the list is dynamic .. besides I want it left aligned
0
 
Michel PlungjanIT ExpertCommented:
To quote Austin Powers: "And I want a toilet seat of solid gold" ;)
0
 
Michel PlungjanIT ExpertCommented:
Well done :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.