cancel
Showing results for 
Search instead for 
Did you mean: 
Workflow Hero

Dynamic resizing of lookup control

Greetings:

 

I have a form with several multi-select lookup controls. The problem is that the selectable options displayed on the form are truncated because they are quite a bit wider than the width established for the control on the form template. This is shown in the figure below where the control on the left is the size I want it to be on the form while the one on the right is how large I would need to make it in order to display the widest option without truncation.

 

My question is this:  is it possible, via javascript, to dynamically resize the control when the user mouses over it to select items? In other words, the items would appear truncated except when the user is selecting from the control, whereupon he or she would see the entire text?

 

Thanks, in advance.

 

lookupcontrol_resizing.png

Labels: (3)
Tags (1)
0 Kudos
Reply
4 Replies
Not applicable

Re: Dynamic resizing of lookup control

A very quick and simple (not sure if it works for you) is to add Custom CSS with this:

select.nf-lookup[multiple]:hover {

    width: 500px;

}

It will applied to all lookup with multiple option on your form.

0 Kudos
Accept as Solution Reply
Workflow Hero

Re: Dynamic resizing of lookup control

Stephen:

Thanks for the suggestion. Unfortunately, it does not work for me.  I tried both hover and focus actions.

It appears that single-value lookup controls expand  to show the widest element by default (when they get focus). The multiple select menus do not, and that's what is causing me problems.

-Bruce

0 Kudos
Accept as Solution Reply
Workflow Hero

Re: Dynamic resizing of lookup control

Here's an update:  I finally did get this to work after adding the !important qualifier:

.nf-form-lookup-expanded[multiple]:hover

{

  width: 425px  !important;

}

Thanks,

Bruce

0 Kudos
Accept as Solution Reply
Not applicable

Re: Dynamic resizing of lookup control

Hi, Bruce Altner​, If you got a "correct answer" in the thread, please mark it as correct, which helps other people in the community find correct answers. Thanks!

0 Kudos
Accept as Solution Reply