Smart Select in a Sheet modal

1

I have a smart select rendered on the page that works fine until i try to put it inside a sheet modal on the same page. I get the old “Smart Select requires initialized View” Strange that it works in the same view just fine until its inside the sheet modal. Also tried adding the “smart-select-init” class as well as view-init to the view the page is contained. no luck.

2

Yuo can set the prop openIn of the smart select. instead of making a Sheet Modal to show a smart select.

openIn: string
Defines how to open Smart Select. Can be page or popup or popover or sheet

https://framework7.io/docs/smart-select.html#smart-select-parameters

3

I am sorry i didnt describe the problem clearly. I am not trying to make the smart select options appear in a sheet modal, im trying to put the actual select boxes inside a sheet modal. Like this:

<div class="sheet-modal my-sheet">
<div class="toolbar">
  <div class="toolbar-inner">
	<div class="left"><span class="small">Console/Game</span></div>
	<div class="right"><a class="link sheet-close" href="#">Close</a></div>
  </div>
</div>
<div class="sheet-modal-inner">
	<div class="list no-margin-top">
	  <ul>
		<li>
		<a href="#" class="item-link smart-select" data-view="view-home" data-close-on-select="true">
			<select name="filter_system" id="filter_system">
				<option value="all">All</option>
				<option value="1">1</option>
				<option value="2">2</option>
			</select>
			<div class="item-content">
			  <div class="item-inner">
				<div class="item-title">Console</div>
				<div id="default_console" class="item-after">All</div>
			  </div>
			</div>
		  </a>
		</li>
	  </ul>
	</div>
</div>
4

First i was getting the “Smart Select requires initialized View” error until i added the data-view=“view-home” property, but now i get a new error: Uncaught TypeError: Cannot read property ‘navigate’ of undefined. my view looks like this:

<div class="view view-main" id="view-home"> </div>
5

Ok, so you need a view with router to use smart select. since sheets its independent of view main, if you dont specify the view element with data-view, it will find the parent view. Since there is no view you get, Smart Select requires initialized View. Then you specify the view with data-view. But now the smart-select tries to navigate to a new page (smart select page) but it cant find a navigate.
so the solution I found is to create a new view for sheet and use it. But again, its my solution. Maybe there is a better approach.

Or @nolimits4web can say the correct way of doing it.

here is the fiddle;

jsfiddle

1 Like