Algolia Widgets in Angular UI oddities

Hello, I am just learning Angular and Algolia. Thanks to all the excellent tutorials, I have almost everything working perfectly. However, there are a few oddities I cannot figure out.

The searchbox is looking like this…


I can modify the CSS for the searchbox in its entirety, but not each element. When I do, the search icon and the X scale together, and no matter what I try, it seems I cannot adjust the padding between them or center the search bar vertically. I would like each icon to be the same size and centered vertically.

Also, in ais-pagination, I would love the widget to be a straight line, but currently, it is a bulleted list.


This search feature is incredible. I love how quick and dynamic it is as well as how easy it is to use. I know I am missing some basic things, but I thought I would ask. I can PM a link to the site if that would help. It is not really public yet.
I would upload code too, but I am not sure what would help short of a link to everything (which I currently cannot do).
Thanks for the help.

Edit: Using basic CSS, I was able to remove the bullets, but it would still be nice to have a line for navigation.

  list-style-type: none;


Hi @jrothritchie!

Most of the elements in Instantsearch are just unordered lists under the covers. There are a couple of defaults style sheets you can use either to give Instantsearch a consistent default look, or use as a model to build your own styles.

Check out the satellite.css style sheet as a starting point: