nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Dynamic Expansion of Multi Select Box

Ice_Breaker

Hi,

I am using Multi select box in my Datacapture which gets populated at run time.

But while displaying the size of the box remains constant keeping the remaining values scrollable.

Also need to increase the width of the box as per the length of the values.

Please advise.

Thanks & Regards,
Manish

Find more posts tagged with

Comments

Adam Stoller

Hi,

I am using Multi select box in my Datacapture which gets populated at run time.

But while displaying the size of the box remains constant keeping the remaining values scrollable.

Also need to increase the width of the box as per the length of the values.

Please advise.

Thanks & Regards,
Manish

Without seeing the code you are using it is difficult to suggest a solution - but I'll take a guess: If you're using an inline script to populate the options in a multi-select field - change the inline script so that not only does it generate the options, but also generates the entire multi-select field and then you can set the size attribute in the select field as well as the options within it. I'd recommend having some max-value that you don't exceed when setting the size as sometimes it's better to have some scrolling.

Ice_Breaker

Hi,

I'm using cgi to populate only the options in Multi Select box but the box has already been created in the DCT.

- Manish

Adam Stoller

Hi,

I'm using cgi to populate only the options in Multi Select box but the box has already been created in the DCT.

- Manish

Well, I think it easier to set the size of the select list within the code the generates the list itself - however if I'm reading you correctly now, the population of the select field is being done via a cgi callout, not an inline (which would have allowed you to easily do what I was thinking).

In your case - you would need to utilize FormAPI / javascript - essentially you want to get a handle on the select element within the form element on the page, and then set its size attribute based on the number of option elements (length of the select list).

An example of the kind of code you need would be something like this:[html]

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Testing
<script language="javascript">
var max = 10;
function resize_list(){
var s = document.forms["myForm"]["mySelect"];
var l = s.length;
if (l > max) { l = max; }
alert("Change "+ s.size + " to: (" + s.length + ") " + l); // #=#
s.size = l;
}
</script>

Testing

Happy
Sneezy
Bashful
Doc
Dopey
Grumpy
Sleepy
Happy
Sneezy
Bashful
Doc
Dopey
Grumpy
Sleepy

Done with list

[/html]Based on however you're writing your code and how you can get a handle on the actual select list object (probably through a FormAPI call via xpath rather than named document nodes) - you should be able to re-set the size of the list.

Hope that helps.

jagadesh

Hi Adam,
I am also facing the same issue. it seems the lenght of select is fixed.
Herewith i attached the sceenshot for your reference.
DCT:
<item name="promos" pathid="promos">
<label>Promo Reference</label>
<select required="t" >
</select>
</item>
Select values are retrieved from DB using call server in FormAPI
Sample values in select:
AJ - Take 2 boosts or more and get the them half price for 3 months
AK - First month anytime on us - 1 month Anytime call plan free = £4.49 credit for one month

Is there any solution to change length of select to display the full value?

Adam Stoller

Hmm - I haven't run into that before (and am not currently doing much templating work) - perhaps there's some CSS directive that's limiting the width of the select list -- or -- the font being used for displaying the label is significantly larger than the font size being used to calculate the width to use?

I suggest you open a case with Autonomy Interwoven Support - and provide the DCT code for the image you just posted.

jagadesh

Thanks Adam. I informed the Customers. They are planning to reduce value length.Lets see what will happen.

ISCBorisB

Hi Adam,
I am also facing the same issue. it seems the lenght of select is fixed.
Herewith i attached the sceenshot for your reference.
DCT:
<item name="promos" pathid="promos">
<label>Promo Reference</label>
<select required="t" >
</select>
</item>
Select values are retrieved from DB using call server in FormAPI
Sample values in select:
AJ - Take 2 boosts or more and get the them half price for 3 months
AK - First month anytime on us - 1 month Anytime call plan free = £4.49 credit for one month

Is there any solution to change length of select to display the full value?

I'm not sure about that but it seems to me that the width is calculated upon Form instantiation.

If that's the case you can set "fake" long Option in the DCT itself and then simply remove it when
you re-populate drop-down from DB

jagadesh

Thanks Boris, Lets try. I will update you on this.

Thanks Boris, Its working fine now.

big_buddha

Are you using IE for the browser?

I think for most general scenarios where you hard code in the select options, IE may automatically expand the drop down width when the form loads. But if the drop down data gets populated at run-time, somehow IE is not notified of the change and does not resize it. This does not seem to happen on FireFox, at least with the testing I've done.

I managed to find a workaround by copying the /httpd/webapps/content_center/datacapture/dc_renderer.js file to /local/config/lib/content_center/customer_src with the following change:

Original:
selectHTML += " style='width:250px'"; //default size if no options exist.

New Update:
selectHTML += " style='max-width:250px; width: expression(this.width > 250 ? 250: true'"; //default size if no options exist. - changed for IE bug that does not maximize width after data loaded

Run make_toolkit.ipl and dump your browser cache, and it should work! Obviously not supported so make sure you document this, but a support case was logged with this information as a workaround.

jagadesh

Thanks dude. you have shared very useful information.