CODEWITHSUNDEEP
cssionic-framework
user1995781
user1995781

Reputation: 19463

ion-nav-buttons full width

I am trying to add search bar into header on one of the page.

<ion-view view-title="">
    <ion-nav-buttons side="left">
        <label class=" item item-input-wrapper">
            <i class="icon ion-ios-search placeholder-icon"></i>
            <input type="search" placeholder="Search">
        </label>
  </ion-nav-buttons>

  <ion-content>
    Search content
  </ion-content>
</ion-view>

The search bar does show up in the header as expected. But how can I get the search field to be 100% width across the header? I did try to apply:

.buttons-left, .left-buttons{
    width:100% !important;
}

It does work. But the problem is it affect all other pages as well. I tried to add class and id to ion-nav-buttons, but it doesn't shows up.

How can I apply custom width to ion-nav-buttons only on specific page?

Upvotes: 0

Views: 2435

Answers (1)

LeftyX
LeftyX

Reputation: 35587

I am not sure if that is the best place where to put a search field:

<ion-nav-buttons>

You can define a custom header for your specific view:

<ion-header-bar class="bar-positive">
    <label class="item-input-wrapper">
        <i class="icon ion-ios-search placeholder-icon"></i>
        <input type="search" placeholder="Search" class="search-bar">
    </label>
    <button class="button button-clear">Cancel</button>
</ion-header-bar>

and use the directive hide-nav-bar="true" in your view to tell the current view to hide the navbar:

<ion-view view-title="home" hide-nav-bar="true">
    ...
</ion-view>

This is your end result:

<ion-view view-title="home" hide-nav-bar="true">

  <ion-header-bar class="bar-positive">
    <label class="item-input-wrapper">
      <i class="icon ion-ios-search placeholder-icon"></i>
      <input type="search" placeholder="Search" class="search-bar">
    </label>
    <button class="button button-clear">
      Cancel
    </button>
  </ion-header-bar>


  <ion-content padding='true' scroll='false' has-footer='false'>

    <div class="card">
      <div class="item item-text-wrap">
        HOME PAGE
      </div>
    </div>

  </ion-content>

</ion-view>

I've also used some styling to change the result:

.search-bar
{
  width:100% !important;
  background: inherit;
  height: inherit !important;
}

and this is how it looks in a Plunker.

Upvotes: 1

Related Questions