?
Solved

Listbox scrollbar on left

Posted on 2006-11-18
27
Medium Priority
?
689 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
  • 6
  • 5
  • 5
  • +2
24 Comments
 
LVL 30

Expert Comment

by:Irwin Santos
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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 

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:Irwin Santos
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:Irwin Santos
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:Irwin Santos
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:Irwin Santos
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 500 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

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Question has a verified solution.

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

Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

593 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