Dynamic resizing of lookup control

  • 2 November 2015
  • 2 replies
  • 1 view

Badge +8

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


2 replies

Badge +8

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

Badge +8

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

Reply