[SOLVED] Setting Popup Title in Smart-Select


#1

I embedded a smart-select in a list item with auto-init (works fine).
What I’s like to do is to remove the ‘back’ arrow and replace it with an ‘Close’ string. But that doesn’t seem to work for me.
I added the ‘popupCloseLinkText: “Close”’ parameter (which should be set by default), but nothing changes.

Ideally, I’d like to put that ‘popupCloseLinkText’ on the right side, but it seems I have to create my own popup-HTML-template.
Or do I miss something?

<f7-list>
    <f7-list-item
      title="Categories"
      class="categoriesselect"
      categoriesselect
      smart-select
      smart-select-init
      :smart-select-params="{on: {open: onSSOpen}, popupCloseLinkText:'Close', openIn: 'popup', searchbar: true, searchbarPlaceholder: 'Show category'}"
    >
...

#2

You can pass custom renderNavbar function, but better don’t do anything :grinning: There will be F7 update tomorrow or day after where it will be already fixed. All such kind of “opener” popup will render close button as plain text button on right side


#3

Hi @nolimits4web,
I revisited the project today, updated F7 to 4.2.0, but it still doesn’t draw anything on the right side.

:smart-select-params="{on: {open: onSSOpen}, popupCloseLinkText: 'CloseTest', virtualList:true, virtualListHeight: 28, routableModals: false, cssClass: 'smartselect-font', closeOnSelect: true, openIn: 'popup', searchbar: true, searchbarPlaceholder: 'Find Font'}"

I’m opening the popup from the right-panel (template) and here’s what I get in the resulting smart-selects containerElement:

<div class="navbar-inner sliding navbar-inner-centered-title">
    <div class="left">
      <a href="#" class="link popup-close" data-popup=".smart-select-popup[data-select-name='Font']">
        <i class="icon icon-back"></i>
        <span class="ios-only">CloseTest</span>
      </a>
    </div>
    <div class="title" style="left: -120px;">Font</div>
    <div class="subnavbar">
      <form class="searchbar">
        <div class="searchbar-inner">
          <div class="searchbar-input-wrap">
            <input type="search" placeholder="Find Font">
            <i class="searchbar-icon"></i>
            <span class="input-clear-button"></span>
          </div>
          
        </div>
      </form>
    </div>
</div>

I saw in your examples that I actually works fine, but not for me…

btw: If I leave out the popupCloseLinkText parameter, it just draws the back-icon.
Any other hint?


#4

This feature landed in 4.2.2. You can check it in Kitchen Sink smart select page, open select with cars


#5

@nolimits4web - Jep, works fine using 4.2.2
Thanks for the hint! :ok_hand: