Smart Select's list-item when viewed in a media-list

Questions
1

When a smart select is placed in a normal list (not a media-list) it looks great like this: image

But as soon as I make the list a media-list, it looks bad like this:image

I’d like to use the media list style for other rows. Outside of making multiple lists are there options for telling the SmartSelect how to render it’s source list-item, or is there a secret switch to help it work when inside a media-list?

Thanks! :slight_smile:

2

You probably have something wrong in HTML layout, would be good to see relevant code.

3

Thanks for responding! I am using F7-Vue. Here is my Vue code

  <!-- Smart select in normal list -->
  <f7-list>
    <f7-list-item
      smart-select :smart-select-params="{
        openIn: 'popup',
        searchbar: true,
        searchbarPlaceholder: 'Search List',
        navbarColorTheme: 'teal',
      }"
      title="Technician - Simple List"
    >
      <select name="tech" multiple>
        <option value="Frank" selected>Frank</option>
        <option value="Joe">Joe</option>
      </select>
    </f7-list-item>
  </f7-list>

  <!-- Smart select in media list -->
  <f7-list media-list>
    <f7-list-item
      smart-select :smart-select-params="{
        openIn: 'popup',
        searchbar: true,
        searchbarPlaceholder: 'Search List',
        navbarColorTheme: 'teal',
      }"
      title="Technician - Media List"
    >
      <select name="tech" multiple>
        <option value="Frank" selected>Frank</option>
        <option value="Joe">Joe</option>
      </select>
    </f7-list-item>
  </f7-list>

Here is the generated HTML for the regular list:

<div data-v-b962f452="" class="list">
   <ul>
      <li data-v-b962f452="" class="">
         <a class="item-link smart-select">
            <div class="item-content">
               <div class="item-inner">
                  <div class="item-title">Technician - Simple List</div>
                  <div class="item-after">Frank, Joe</div>
                  <select multiple="multiple" data-v-b962f452="" name="tech" class="input-with-value">
                     <option data-v-b962f452="" value="Frank" selected="selected">Frank</option>
                     <option data-v-b962f452="" value="Joe">Joe</option>
                  </select>
               </div>
            </div>
         </a>
      </li>
   </ul>
</div>

And here is the HTML generated for the media list:

<div data-v-b962f452="" class="list media-list">
   <ul>
      <li data-v-b962f452="" class="media-item">
         <a class="item-link smart-select">
            <div class="item-content">
               <div class="item-inner">
                  <div class="item-title-row">
                     <div class="item-title">Technician - Media List</div>
                  </div>
                  <div class="item-after">Frank, Joe</div>
                  <select multiple="multiple" data-v-b962f452="" name="tech" class="input-with-value">
                     <option data-v-b962f452="" value="Frank" selected="selected">Frank</option>
                     <option data-v-b962f452="" value="Joe">Joe</option>
                  </select>
               </div>
            </div>
         </a>
      </li>
   </ul>
</div>

And here is a pic of the two lists:
image

I too think the generated HTML is wrong, but there does not seem to be a way to tweak it via the smart select settings. Isn’t the .item-after supposed to be within the .item-title-row for a media list?
Here’s the layout from the F7 docs:

image
image864×373 23 KB

4

Manually creating it like this kinda works, but the other smart select parameters don’t seem to follow through (color is not teal, and search bar does not show up)

<!-- Manually created -->
<f7-list media-list>
   <li>
      <a href="#"
         class="item-link smart-select smart-select-init"
         data-open-in="popup"
         data-searchbar="true"
         data-searchbar-placeholder="Search List"
         data-navbar-color-theme="teal"
         >
         <select name="tech" multiple>
            <option value="Frank" selected>Frank</option>
            <option value="Joe">Joe</option>
         </select>
         <div class="item-content">
            <div class="item-inner">
               <div class="item-title-row">
                  <div class="item-title">Technician - Manual</div>
                  <div class="item-after">Frank</div>
               </div>
            </div>
         </div>
      </a>
   </li>
</f7-list>
1 Like