Identifying correct .css file for modification


Thank you for developing this wonderful framework! When using a floating action button, I need to modify the css file to achieve my desired behavior. I can achieve the desired result in the web view by modifying the file: src/www/build/main.css.

In particular, I simply add the property right: 0; to ion-fab-list{}. That works well.

Clearly, I ought to be editing a file that exists before the build stage. Can you please point me to the file which contains the floating action button list css (ion-fab-list)? I need the FAB list to align to the right of my FAB container.

I have tried modifying the CSS file for my component page. I can emulate the desired effect by setting the right margin property of a self-defined class, but have been unsuccessful at simply aligning the FAB list to the right side of the FAB container. If this is the correct approach, could you please show me how to align the FAB list with respect to its FAB container?

Thank you!


In many cases, you can do things like this by overriding default values of various SASS variables. Perhaps $fab-list-margin is the one you’re looking for here?

Thanks rapropros. Your approach appears to work very well. $fab-list-margin was my first thought as well, but it appears that right can be used directly with better results since all I am trying to do is align the list with respect to the FAB container.

For anyone else new to CSS, the solution is:

  1. In your HTML file, give your ion-fab-list an id:
    <ion-fab-list id="fab_list">

  2. In your page’s scss file, modify the position property:
    #fab_list { right: 0; }

The re-built result appears identical to having set right: 0; in ion-fab-list of src/www/build/main.css.