Change the pop up options within a smart select

Questions
1

I have a smart-select that gets its data from a data-open-in="popup"
Everything works fine, the problem is that my Data is truncated because of its length.
So my idea was, to create a “media-list”-like layout but AFAIK and understood this is not possible.

As i set my options within a simple select, Framework7 seems to get these values and create a simple list-view out of it.

Deos anyone know if it is possible to change the simple list layout of said popup to a more free one, so that i can as example set up a two line list?

2

Use smart-select’s cssClass parameter that will be added to its popup. And then just tweak list styles for list inside of popup with this class

1 Like
3

That’s not exactly what I meant. I found out that there is a render API so that you can render custom layouts - that is more of what I am searching for.

Unfortunately I have not found yet an example on how to use it as the examples in the documentation only covers the Data-Attribute solution.

I understand that you can create a html list element and than call this element by the “el:” option.
But I was neither able to create a rendered list, nor a simple JS alert.

4

something like this:

jsfiddle

1 Like
5

Though i have not tested it out yet, it lookes exactly what i am looking for.
I searching stackoverflow, the Muut and the Framwork7 Forums but at the least for example there were not more than 4 questions regarding something that “touches” the rendering functions.

I think that this feature is outstanding and incredibly good because it gives you the freedom of layout. This should be more and better described in the documentation IMHO.

Now i only have to figure out where the item-data comes from in your example. Thanks a lot. I will respond with a result as soon as i can.

Greetings and have a great day!

6

didn’t read F7 source, but i think that item data is from f7.
among with all the data, f7 fetch value and text from your select layout.

<select name="fruits">
  <option value="apple" selected>Apple</option>
  <option value="pineapple">Pineapple</option>
  <option value="orange">Orange</option>
  <option value="banana">Banana</option>
  <option value="grape">Grape</option>
</select>
1 Like