Position fixed css adding in body tag in angular material

Question

I'm facing some issues with position: fixed; width: 100%; top: 0px; for md-select md-autocomplete if I use them in some fixed. I face this issue with angular material for almost all the md-select options. It's adding up the CSS attributes dynamically to the body section.

position: fixed; width: 100%; top: 0px; and scrollY.

index.html

<header class="container-fluid" id='headerControl' ng-cloak ng-controller = 'headerControl as ctrl'>
  <div layout="row">
    <div class="col-md-2 col-sm-2 logo">
      <a href="/">
        <img src="img/scooby.svg" alt="Logo" width="120px" class="img-responsive"></a>
    </div>

    <div class="col-md-7 col-sm-6 search-head hidden-xs">
      <md-autocomplete
        md-no-cache="ctrl.noCache"
        md-selected-item="ctrl.selectedItem"
        md-search-text-change="ctrl.searchTextChange(ctrl.searchText)"
        md-search-text="ctrl.searchText"
        md-selected-item-change="ctrl.selectedItemChange(item)"
        md-items="item in ctrl.querySearch(ctrl.searchText)"
        md-item-text="item.name"
        md-min-length="0"
        placeholder="Search....."
        md-menu-class="autocomplete-custom-template">
        <md-item-template>
          <span class="item-title">
           
            <span> {{item.name}} </span>
          </span>
          <span class="item-metadata">
            <span class="item-metastat pull-right">
              <strong>{{item.forks}}</strong>
            </span>
          </span>
        </md-item-template>
      </md-autocomplete>
      <md-input-container class="md-block" md-no-float flex-gt-sm>
        <md-icon md-svg-src="img/locationpin.svg"></md-icon>
        <!-- <label>Location</label> -->
        <md-select ng-model="user.state" placeholder="Location">
          <md-option ng-repeat="state in states" value="{{state.abbrev}}">
            {{state.abbrev}}
          </md-option>
        </md-select>
      </md-input-container>
      <button type="button" class="search-bt">GO</button>
    </div>
    <div class="col-md-3 col-sm-4 col-xs-10 head-link">
      <p class="visible-xs mobile-menu-ic">

        <md-menu md-offset="0 -5" ng-controller="menuCtrl as ctrl">
          <md-button aria-label="Open demo menu" class="md-icon-button" ng-click="ctrl.openMenu($mdOpenMenu, $event)">
            <i class="material-icons">&#xE5D2;</i>
          </md-button>
          <md-menu-content width="4">
            <md-menu-item>
              <md-button ng-click="ctrl.announceClick($index)"> Profile </md-button>
            </md-menu-item>
            <md-menu-item>
              <md-button ng-click="ctrl.announceClick($index)"> Messages </md-button>
            </md-menu-item>
            <md-menu-item>
              <md-button ng-click="ctrl.announceClick($index)"> Sign Out </md-button>
            </md-menu-item>
          </md-menu-content>
        </md-menu>
      </p>
      <ul id="popupContainer" class="clearfix pull-right hidden-xs">
        <li><md-button class="" ng-click="newpost($event)">
          Post
        </md-button></li>

        <li class="mesg"><a href="#"><img src="img/mail.svg"> </a></li>
        <li><a href="/profile" class="profile" ng-click="showAdvanced($event)"><img src="img/macbook-wireless-mouse.jpg"> </a></li>

      </ul>
    </div>
  </div>
</header>

Answer 1

Have you inspected it in your browser? You can see the md styles overriding it probably. Add a class to it and override style, with important if needed

.md-select.fixedTop{
    top: 0px !important;
}