Earlier the Susper search box had a fixed dimension. When a user types in a query, the dimensions of the search box remained fixed. This approach resulted in several issues like:
- Matching the dimensions of the search bar following the market leader.
- When dimensions are dynamically changing, it should not disturb alignment w.r.t tabs in the results page.
What actually happens is, when a user enters a query, the search box quickly changes its dimensions when results appear. I will be discussing below how we achieved this goal.
On the home page, we created the dimensions of a search bar with 584 x 44 pixels.
On the results page, we created the dimensions of search bar 632 x 44 similar to market leader:
How we proceeded?
Susper is built on Angular v4.1.3. It automatically comes with a function ngOnInit() whenever a new component has been created. ngOnInit() is a part of life cycle hook in Angular 4 (in Angular 2 as well). The function is called up or initialized when the component is rendered completely. This was the key for changing dimensions of search bar dynamically as soon as a component is created.
What happens is when a user types a query on the homepage and hits enter then, results component is created. As soon as, it is created – ngOnInit() function is called.
The default dimensions of search bar have been provided as follows:
search-bar.component.css
height: 44px;
width: 584px;
}
search-bar.component.ts
this.navbarWidth = ‘632px’;
}
search-bar.component.html
We used [style.width] attribute to change the dimensions dynamically. Add this attribute inside input element.
Resources
- Angular 2 dynamically set width: https://stackoverflow.com/questions/43835211/angular-2-dynamically-set-css-width-of-element-based-on-available-real-estate
- Angular Docs-Lifecycle hooks: https://angular.io/guide/lifecycle-hooks