Solved

Listbox scrollbar on left

Posted on 2006-11-18
27
660 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
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
 

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

910 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now