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.
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
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.
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.
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>.
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.
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.
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
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?
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.