How to style the multiselect like the demo

#1

I’m using mobiscroll version 4 for this control. I’d like to use the multiselect control and style it just like the demo, as seen here: JQuery and JQuery Mobile Select Multiple select Example | Mobiscroll

However, when I use the same code that the demo is showing me, it looks completely different. Here is my Javascript, just like what it’s showing the demo. Notice, I’m only passing in ‘bubble’ for display and no other options.

  $('#nt_newnotesecurity' + entitytype + entityid).mobiscroll4().select({
    display: 'bubble'
  });

Now in the demo it looks like this:

select2
select2.png706×577 32.7 KB

But mine looks like this:

select1

As you can see, mine has buttons (though I figured I can hide those by specifying “buttons: null”) but mine also has little arrow at the top and darkens the background. And if I specify the “ios” theme then I get a wheel, which I don’t want. So it’s all different. Why is that? Am I looking at the wrong documentation? The documentation I’m looking at is here: Select > Typescript Types > select-options - Mobiscroll for JQuery API Documentation

#2

Hello @Vincent_Wansink :wave:

You need to set touchUi: false, then there will be no arrow or darkened background either.

Let me know if this helps.

#3

Thanks for the suggestion, but that’s not working either. In fact, it looks like none of my options are taking effect. I now have:

 $('#nt_notesecurity').mobiscroll4().select({
    display: 'bubble',
    cssClass: 'security',
    touchUI: false,
    cssClass: 'security',
    dropdown: false
  });

But the background is still darkening, I still get the arrow, the security class is not being applied, touchUI seems to do nothing and the dropdown arrow is still visible.

select3

If I remove “display:bubble” then it displays in the center of the page, which is the default, so at least that option seems to be doing something, but the rest of the options are doing nothing.

#4

Hello @Vincent_Wansink :wave:

When I look at your code, I see that the touchUI parameter needs to be changed to touchUi, which is why it isn’t working. Also, if you fix the parameter, you won’t have to hide the buttons separately.

Where you would like to the security class to be applied? If you would like to be on select, then this can be done in markup.

If you also would like to hide the arrow from the dropdown, then in case of jQuery and Javascript, you will need to use <select mbsc-input>instead of <select mbsc-dropdown>.

Let me know if this helps.

#5

Ah, a typo in TouchUi. Thank you! That was indeed the problem.

And also thank you for the mbsc-input tip! Now we’re getting somewhere, although I don’t understand why the control has a “dropdown:false” option if that’s not the way to get rid of the dropdown arrow. It seems like the documentation is not accurate.

The security class I actually want to be applied to the outer div that gets applied by mobiscroll. According to the documentation, this option would apply the class to the outer element, but it doesn’t. It’s essentially to remove the padding around that div. I could override the “.mbsc-windows.mbsc-input” class but I hesitate to do that because it could have undesired effects in other areas of my app.

And lastly, I still have one more problem with this control, and that is that I’m now getting a blank space at the bottom of the options list. It looks like the space where the buttons used to be.

select4

#6

Oh, I see that if I wrap the select in a div and apply the styles to that div, then it works. Again though, I’m not sure why the documentation is telling me I can apply a cssClass when that option doesn’t actually work. I’m either looking at the wrong documentation entirely or the documentation is entirely wrong.

Select > Options - Mobiscroll for JQuery API Documentation

Anyway, thank you for your help. This is mostly working now. I’m just left with that odd space at the bottom of the options list. Any ideas on that?

#7

Hello @Vincent_Wansink :wave:

Could you please share a relevant code example?

#8

Here’ the html

<div style='width:200px;margin:0px'>
  <select mbsc-input multiple id=nt_notesecurity>
    <option value=1>One</option>
    <option value=2>Two</option>
    <option value=3>Three</option>
    <option value=4>Four</option>
    <option value=5>Five</option>
  </select>
</div>

And here’s the jQuery

 $('#nt_notesecurity').mobiscroll4().select({
    display: 'bubble',
    touchUi: false,
    cssClass: 'security',
    dropdown: false
  });

I also put together a simple test page here, so you can see it for yourself: https://devapp.timesavr.net/test.php

If you inspect the element you can see that mobiscroll has generated a total of 43 divs for the select options even though I only need 5. But all the blank ones have a different class: mbsc-sc-itm mbsc-sc-itm-ph

#9

Hi Vincent,

Thanks for the code! :+1:

It looks like this is a problem inside the select component in case touchUi: false, however it can be solved using the rows option:

      $('#nt_notesecurity').mobiscroll().select({
          display: 'bubble',
           touchUi: false,
           cssClass: 'security',
           dropdown: false,
           rows: 5
       });

Let me know if the rows option solves the issue for you!

1 Like
#10

Well, it’s not ideal because the number of rows in my case is dynamic, but I can make it work by counting the rows before I generate the select.

My only concern is that there could be anywhere from 1 to an infinite number of rows (though most people wouldn’t have more than five or six). Does the select automatically limit its size, or could it potentially grow beyond the viewport?

#11

Yes, it can potentially grow beyond the viewport. The row option only specifies how many visible items will be on the Select component, if there are more items present then those will be accessible with scrolling.

1 Like
#12

No problem. I will manually limit the number of rows to 5. Thanks!