Help Smart Select with floating label

Questions
1

I need help with smart select and floating label. The title is not shown properly. Been trying to change the css without affecting others without luck. Please advice. This is the code,

<li>
  <a class="item-link smart-select smart-select-init" data-open-in="popup"  data-searchbar="true" data-searchbar-placeholder="Search fruit">
    <select name="fruit" multiple>
      <option value="apple" selected>Apple</option>
      <option value="pineapple">Pineapple</option>
      <option value="pear">Pear</option>
      <option value="orange">Orange</option>
      <option value="melon">Melon</option>
      <option value="peach">Peach</option>
      <option value="banana">Banana</option>
    </select>
    <div class="item-content">
      <div class="item-inner">
        <div class="item-title item-floating-label">Fruit *</div>
      </div>
    </div>
  </a>
</li>
2

hi i also need a smartselect with float label,

so i managed to do it like this

jsfiddle

i dont know if this is a good solution, but it works for me.

i use vuejs, but for the smartselect i use plain f7 html + some vue (NO F7-Vue html) so you should copy and paste the html and remove all vue part.
HTML

    <div class='list'>
      <ul>
        <li class="ss-smart-select-container v2" :class="{'disabled': preventOpen}">
          <div class="item-content" v-show="params.itemTitle"><label :style="{'font-size': labelFontSize}">
              <div class="icon-container" v-if="icon"><i :class="icon"></i></div>{{params.itemTitle}}<span class="required" v-show="required"> *</span>
            </label></div><a class="item-link smart-select" href="#" :id="params.name || genericName" :class="'ss-smart-select-' + genericName"><select :id="params.name || genericName" disabled="disabled" :name="params.name || genericName" :multiple="multiple">
              <option value="-1" selected="selected" v-if="!multiple">{{params.defaultOption || 'Seleccione'}}</option>
              <option v-for="item in data" :value="item[params.idKey || 'id']" :key="item[params.idKey]" :disabled="item.disabled || false">{{item[[params.descKey || "desc"]]}}</option>
            </select>
            <div class="item-content" :class="{ 'no-padding-left': noPaddingLeft}">
              <div class="item-inner">
                <div class="item-title" :class="{'multiple' : multiple}">{{params.itemTitle || 'Cargando...'}}</div>
              </div>
            </div>
          </a>
        </li>
      </ul>
    </div>

CSS

.v2 .icon-container {
  display: inline-block;
  margin-right: 15px;
}

.v2 .item-title {
  display: none;
}

.v2 .item-title.multiple {
  display: block;
}

.v2 .item-after {
  margin: 0;
}

.v2 .item-inner:before {
  content: 'chevron_down' !important;
}

.v2 .no-padding-left {
  padding-left: 0px;
}
3

Thanks. Yours the floating label is always float like a fixed label. I want it float only when the input is click/tap on.

4

ok, i update the fiddle, you need to adjust some css to make it look nice, but you now have the base

jsfiddle

2 Likes