Add a search textbox to my app



  • Hello,

    I want to add a search textbox to my app in the top right side which will slide and expand to the left side when get focused by users. Does onsen have such a control ? If not, is there a working example can guide me?

    Thank you



  • @Ahmed-Elshorbagy Well, I have down popdown search bars. This eBook template does that. https://github.com/munsterlander/Onsen-Examples/tree/master/eBook-Template You can place an input in the title bar though and would just need to add some JS overwriting the CSS to make it do what you want. I know there is an Onsen component that has search, but I can’t remember what it is or how it works off the top of my head.



  • I tried to add a textbox in the right side, it works in the design mode but when I create an APK file it is not working in my mobile, the textbox expands but I cannot write inside it, I don’t know why?

      <ons-toolbar>
            <div class="left">
              <ons-toolbar-button onclick="fn.open()">
                <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
              </ons-toolbar-button>
            </div>
            <div class="center">
    Title   
            </div>
            <div class="right">  
                <input type="text" id="search" placeholder="Search" class='search' >               
            </div>
    </ons-toolbar>
    

    CSS:

    .search {
        width: 20px;height: 20px;
        box-sizing: border-box;
        border: 0px solid ;/*rgba(250,250,250,0.38);    */
        border-radius: 4px;
        font-size: 10px;    
        color:black;    
        background: transparent;
        background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nNDFweCcgaGVpZ2h0PSc0MHB4JyB2aWV3Qm94PScwIDAgNDEgNDAnIHZlcnNpb249JzEuMScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJyB4bWxuczp4bGluaz0naHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluaycgeG1sbnM6c2tldGNoPSdodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMnPjx0aXRsZT5TbGljZSAxPC90aXRsZT48ZGVzY3JpcHRpb24+Q3JlYXRlZCB3aXRoIFNrZXRjaCAoaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoKTwvZGVzY3JpcHRpb24+PGRlZnM+PC9kZWZzPjxnIGlkPSdQYWdlIDEnIHN0cm9rZT0nbm9uZScgc3Ryb2tlLXdpZHRoPScxJyBmaWxsPSdub25lJyBmaWxsLXJ1bGU9J2V2ZW5vZGQnPjxnIGlkPSdzZWFyY2gnIGZpbGw9JyNDNkM4QzgnPjxwYXRoIGQ9J00wLjUwNCwxNi4zMzggQzAuNTA0LDI1LjA4NSA3LjYzNSwzMi4xNjUgMTYuNDQ0LDMyLjE2NSBDMjUuMjQsMzIuMTY1IDMyLjM4MiwyNS4wODUgMzIuMzgyLDE2LjMzOCBDMzIuMzgyLDcuNTkxIDI1LjI0LDAuNSAxNi40NDQsMC41IEM3LjYzNSwwLjUgMC41MDQsNy41OTEgMC41MDQsMTYuMzM4IEwwLjUwNCwxNi4zMzggWiBNNS41NTUsMTYuMzM4IEM1LjU1NSwxMC4zNTkgMTAuNDIzLDUuNTIxIDE2LjQ0NSw1LjUyMSBDMjIuNDU1LDUuNTIxIDI3LjMzMywxMC4zNiAyNy4zMzMsMTYuMzM4IEMyNy4zMzMsMjIuMzE3IDIyLjQ1NSwyNy4xNTYgMTYuNDQ1LDI3LjE1NiBDMTAuNDIzLDI3LjE1NiA1LjU1NSwyMi4zMTYgNS41NTUsMTYuMzM4IEw1LjU1NSwxNi4zMzggWiBNMjcuNjY2LDMwLjg2MSBMMzQuNTIxLDM4LjY3IEMzNS42MjUsMzkuNzcyIDM2LjMzOCwzOS43ODEgMzcuNDYsMzguNjcgTDM5LjY2MSwzNi40ODkgQzQwLjc0MywzNS40MDggNDAuODExLDM0LjcxMSAzOS42NjEsMzMuNTY4IEwzMS43NjUsMjYuNzkzIEwyNy42NjYsMzAuODYxIEwyNy42NjYsMzAuODYxIFogTTI3LjY2NiwzMC44NjEnIGlkPSdTaGFwZSc+PC9wYXRoPjwvZz48L2c+PC9zdmc+");
        background-size: 17px;
        background-position: 1px 1px; 
        background-repeat: no-repeat;
        padding: 12px 20px 12px 40px;
        -webkit-transition: width 0.4s ease-in-out;
        transition: width 0.4s ease-in-out;    
        z-index: -1;
    }
    
    .search:focus {
        width: 100%;
        border: 1px solid rgba(250,250,250,0.38); 
        background-color: white;
    }
    

Log in to reply