Solved

Listbox scrollbar on left

Posted on 2006-11-18
27
653 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
Comment Utility
not possible with standard HTML..you will have to incorporate Javascript.
0
 
LVL 28

Expert Comment

by:gamebits
Comment Utility
Hi BrijBhasin,

use css

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

Cheers!
0
 
LVL 28

Expert Comment

by:gamebits
Comment Utility
IE only though.

Gamebits
0
 

Author Comment

by:BrijBhasin
Comment Utility
want both IE and firefox
0
 
LVL 10

Expert Comment

by:ADSLMark
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Thanks for the response .. but is there something that would work both in IE and FF.. Thanks
0
 
LVL 10

Expert Comment

by:ADSLMark
Comment Utility
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
Comment Utility
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
Comment Utility
True enough, but explanation was lacking.
0
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
LVL 30

Expert Comment

by:irwinpks
Comment Utility
@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
Comment Utility
@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
Comment Utility
@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
Comment Utility
@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
Comment Utility
@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
Comment Utility
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
Comment Utility
@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
Comment Utility
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
Comment Utility
I can't use nbsp as the list is dynamic .. besides I want it left aligned
0
 
LVL 75

Expert Comment

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

Accepted Solution

by:
ADSLMark earned 125 total points
Comment Utility
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
Comment Utility
Well done :)
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Jquery oncheck to update SPAN 31 55
Detecting robots? 5 33
Modify Table Width 6 13
Login area of a page 4 19
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

744 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

14 Experts available now in Live!

Get 1:1 Help Now