Solved

Listbox scrollbar on left

Posted on 2006-11-18
27
671 Views
Last Modified: 2008-02-01
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
0
Comment
Question by:BrijBhasin
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
  • 5
  • +2
27 Comments
 
LVL 30

Expert Comment

by:irwinpks
ID: 17973482
not possible with standard HTML..you will have to incorporate Javascript.
0
 
LVL 28

Expert Comment

by:gamebits
ID: 17973485
Hi BrijBhasin,

use css

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

Cheers!
0
 
LVL 28

Expert Comment

by:gamebits
ID: 17973490
IE only though.

Gamebits
0
Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

 

Author Comment

by:BrijBhasin
ID: 17973495
want both IE and firefox
0
 
LVL 10

Expert Comment

by:ADSLMark
ID: 17974053
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
 

Author Comment

by:BrijBhasin
ID: 17974888
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
 
LVL 10

Expert Comment

by:ADSLMark
ID: 17974935
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
 
LVL 10

Expert Comment

by:ADSLMark
ID: 17974947
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
 

Author Comment

by:BrijBhasin
ID: 17974948
Thanks for the response .. but is there something that would work both in IE and FF.. Thanks
0
 
LVL 10

Expert Comment

by:ADSLMark
ID: 17974953
See both posts. I am sorry but the answer is:

No.

IE simply does not support such a thing.

Mark
0
 
LVL 28

Expert Comment

by:gamebits
ID: 17975690
Look at my post (second from the top) it works ONLY with IE, scrollbar to the left as well as the text.

Gamebits
0
 
LVL 10

Expert Comment

by:ADSLMark
ID: 17975767
True enough, but explanation was lacking.
0
 
LVL 30

Expert Comment

by:irwinpks
ID: 18359917
@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
 
LVL 28

Expert Comment

by:gamebits
ID: 18360198
@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
 
LVL 30

Expert Comment

by:irwinpks
ID: 18360439
@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
 
LVL 30

Expert Comment

by:irwinpks
ID: 18360454
@BrijBhasin...what you may want to do is explore a FLASH solution...much easier to use than writing Javascript.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 18363672
@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
 

Author Comment

by:BrijBhasin
ID: 18363793
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
 
LVL 30

Expert Comment

by:irwinpks
ID: 18363924
@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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 18364067
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
 

Author Comment

by:BrijBhasin
ID: 18364150
I can't use nbsp as the list is dynamic .. besides I want it left aligned
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 18366155
To quote Austin Powers: "And I want a toilet seat of solid gold" ;)
0
 
LVL 10

Accepted Solution

by:
ADSLMark earned 125 total points
ID: 18812321
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 18814655
Well done :)
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this. Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it i…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

719 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question