Link to home
Start Free TrialLog in
Avatar of Roberto Parker
Roberto ParkerFlag for Mexico

asked on

jquery multiselect shows blank space

I have a jquery multi select menu.

blankWith the default select,the menu  shows all the options no more. No blank space below. But with jquery it seems that if if options are less than 6 it shows the options (less than 6) and fills with white space the rest. This is the output
<select id="actividades_cla" name="actividades_cla" multiple="multiple" style="display:none;">



<option class="option"selected="selected" value=0424B01E-C07E-4B25-940D-E89C8DD2F238> ArtesG</option>



<option class="option"selected="selected" value=90F43EEF-7F3F-4035-93EA-BB1832B000F6> Cocina</option>



<option class="option"selected="selected" value=442714E1-BFA6-406D-94A5-23E1B846939C> Maquina</option>



</select>

Only 3 options  with white space below. The output doesnt show this space. I think it is a propert of jquery. Just cant find it. Am I correct?
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

Cou you please show the actual code in a [ code][ /code] tag (remove the space after the brackets)?
Avatar of Roberto Parker

ASKER

<select id="actividades_cla" name="actividades_cla" multiple="multiple" style="display:none;">

<option value=0424B01E-C07E-4B25-940D-E89C8DD2F238>ArtesG</option>

<option value=90F43EEF-7F3F-4035-93EA-BB1832B000F6>Cocina</option>

<option value=442714E1-BFA6-406D-94A5-23E1B846939C>Maquina</option>

<option value=9AA0903D-A5F5-42A4-99CD-A5CE53657250>Venta USA</option>

</select>

$("#actividades_cla").multiselect({ multiple:true,noneSelectedText: "Proyectos",checkAllText: "Todas",uncheckAllText: "Ninguna",maxHeight: '400px'});


$('.ui-multiselect').css('width', '150px');

Open in new window

I made you a fiddle. What seems to be the issue?

https://jsfiddle.net/mplungjan/ghwvs9yL/
The output doesnt show this space. I think it is a propert of jquery. Just cant find it. Am I correct?                         
No, jQuery does not do anything it is not told to do.

I am confused as to what your problem is - your opening post shows us HTML code with spaces between the options - not what is rendered to the screen.

It is not clear what the actual issue is here - can you show us what you are seeing and what is wrong with it. What space in source code (in my view) is not a problem unless that translates to space in the view - which in the case of a <select> does not happen.
I am attaching screenshot. Space under Ventas USAUser generated image
What am I looking at?
That just looks like CSS padding.
With fewer options  white space grows until the size is as if there are six options. With six or more options it is ok
Lookg at developers tools there is this:

element.style {
    height: 175px;
}

It is a fixed value. Cant find where to modify it (no reference to a css file)

Lowering the 175 shows fewer options
I cant find any padding





You need to give us a page / link that shows the problem. You are asking a specific question but you have not given us enough to answer it. There is a context here that is relevant to your page - so you need to provide a link (either to the page or to a mockup that demonstrates the problem).
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial