[SOLVED] Expandable search area inside navbar. Why it doesn't work

Questions
1

Hi everybody! I have a problem with searchbar. I want to realize search inside the navigation bar like it’s showed in the kitchen-sink example on the main page. I follow the docs but when I click on the search-icon nothing happens. So I need your help to find out where I’m wrong

The structure of my app is follow:

  • Navigation drawer common for all screens;
  • Left side panel;
  • View-main.

The code of index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- Status bar overlay for fullscreen mode-->
<div class="statusbar"></div>
<div class="panel-overlay"></div>
<!--Side panel-->
<div class="panel panel-left panel-cover color-theme-gray">
    <div class="view view-left">
        <div class="page">

        </div>
    </div>
</div>
<!-- Your main view, should have "view-main" class -->
<div class="views">
    <div class="view view-main view-init" data-url="/">
        <!--Application bar-->
        <div class="navbar">
            <div class="navbar-inner">
                <div class="left">
                    <a href="#" class="link icon-only panel-open" data-panel="left">
                        <i class="icon f7-icons ios-only">menu</i>
                        <i class="icon material-icons md-only">menu</i>
                    </a>
                </div>
                <div class="title">Example Title</div>
                <div class="right">
                    <a href="#" class="link icon-only">
                        <i class="icon f7-icons ios-only">bell</i>
                        <i class="icon material-icons md-only">notifications</i>
                    </a>
                    <a class="link icon-only searchbar-enable" data-searchbar=".searchbar">
                        <i class="icon f7-icons ios-only">search_strong</i>
                        <i class="icon material-icons md-only">search</i>
                    </a>
                </div>
                <form class="searchbar searchbar-expandable searchbar-init">
                    <div class="searchbar-inner">
                        <div class="searchbar-input-wrap">
                            <input type="search" placeholder="Search components"/>
                            <i class="searchbar-icon"></i>
                            <span class="input-clear-button"></span>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="pages">
            <div class="page">
                <div class="page-content hide-navbar-on-scroll">
                </div>
            </div>
        </div>
    </div>
</div>
2

auto init with *-init classes can work only when it is inside of Page! You need to initialize searchbar manually then http://framework7.io/docs/searchbar.html#searchbar-app-methods

3

I’ve done it according to your advice