/    Sign up×
Community /Pin to ProfileBookmark

Creating a vertical scrollbar in a <netui:select> tag

Copy linkTweet thisAlerts:
Dec 12.2007

Hi everyone, I’m new here and if this is the wrong forum to ask this question in, please shift my post..thank you!

I’ve read another [url=http://www.dreamincode.net/forums/index.php?showtopic=7661&st=0]post [/url]in this forum, dated around 2003 and have tried the solutions stated there, but it’s not what I’m looking for. I’m quite at the end of my tether with this problem as I’ve tried a lot of fixes for it.

Here is the code:

[CODE]<netui:select optionsDataSource=”{pageFlow.serviceIdentifierList}” dataSource=”{actionForm.serviceIdentifier}” onChange=”getServiceDetails(‘selection’)” nullable=”true” nullableOptionText=”Please Select Number” tagId=”selSvcNo” nullableTop=”true” style=”width:170px;”/>[/CODE]

The problem is, I need to create a scrollbar if the optionsDataSource outputs more than 5 options. I’ve tried using the size=”5″ attribute, but it doesn’t seem to work one bit.

Do I use Javascript? Because I have searched for Javascript generated codes for scrollbars, and they don’t seem to be standard OS/browser generated type (which I need). I’ve heard that CSS can help too, but I want to try and refrain from that first, because this is a big project.

I appreciate all and any constructive help =)

to post a comment
JavaScript

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangDec 12.2007 — Adding [I]size="5"[/I] is the solution. Why does this not work for you?

You would of course only add it server side if the optionsDataSource outputs more than 5 options.

A similar solution can be achieved with JavaScript.
Copy linkTweet thisAlerts:
@MayaArcanaauthorDec 12.2007 — Hi Fang, thank you for answering

I have tried size="5", but it causes the dropdown list to expand into something that would have occured with a multiple="true" attribute being used.

I have a feeling it's because with a netui:select tag, the size attribute is non-bindable?

Thank you =)

Edit: I just realised you mentioned a condition if the server side outputs more than 5. Should i do an if-else, then?

Thanks again!
Copy linkTweet thisAlerts:
@FangDec 12.2007 — [I]multiple[/I] will expand the select to show all options.

[I]size[/I] only expands to show the required number of options.

With Javascript:var sel=document.[I]formName.selectName[/I];
if(sel.length&gt;5){sel.size='5';}
Copy linkTweet thisAlerts:
@MayaArcanaauthorDec 12.2007 — I'm really not too good with Javascript, but here's what I've tried

I've added a id to the <select> tag:

<netui:select id="selSvcNumber" .... >

and used this:

var sel=document.changeSiNameForm.selSvcNumber;

alert(sel);

if(sel.length>5){sel.size='5';}

However, the alert returns undefined. I'm kind of..burnt out right now, so I may be missing something...

Thanks =)
Copy linkTweet thisAlerts:
@FangDec 12.2007 — var sel=document.getElementById('selSvcNumber');
alert(sel);
if(sel.length&gt;5){sel.size='5';}
Copy linkTweet thisAlerts:
@MayaArcanaauthorDec 12.2007 — thank you for the tip =)

I've tried that and it seems that it returns a null value due to the first/default selection of the <select> tag.

What I did next was to get a count of the number of options that would appear in the dropdown list, and try to use that number as a condition.

var svcIdCount = eval(getNetuiTagName("countSvcNumber", this).value);
alert(svcIdCount);
var sel = getNetuiTagName("selSvcNumber");

if(svcIdCount&gt;5){
sel.size="5";
}


The getNetuiTagName is recognised by BEA workshop, so no worries about that. The current output I'm getting from the alert is 'undefined'...I somehow prefer to see 'null' instead XD
Copy linkTweet thisAlerts:
@FangDec 12.2007 — [I]getNetuiTagName[/I] Does is get the object by [I]name[/I] or [I]id[/I]? there is a difference.
Copy linkTweet thisAlerts:
@MayaArcanaauthorDec 12.2007 — It returns by ID...
Copy linkTweet thisAlerts:
@FangDec 12.2007 — [I]getNetui[B]TagName[/B][/I] returns by ID...[/QUOTE] Where's the logic in that???


Why notvar sel = getNetuiTagName("selSvcNumber");

if(sel.length&gt;5){
sel.size="5";
}
Copy linkTweet thisAlerts:
@MayaArcanaauthorDec 12.2007 — Actually, yeah. But I've asked one of my colleagues about it, and he says it returns by ID..so lol

I'll give the codes a shot...Thanks =)
×

Success!

Help @MayaArcana spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...