位置固定的css在角度材料中添加身体标签

Posted 2023-03-06

【中文标题】位置固定的css在角度材料中添加身体标签

【英文标题】：Position fixed css adding in body tag in angular material

【发布时间】：2017-05-07 17:07:43

【问题描述】：

如果我在某些固定的情况下使用position: fixed; width: 100%; top: 0px; for md-select md-autocomplete，我会遇到一些问题。对于几乎所有md-select 选项，我都面临着角度材料的这个问题。 它将CSS 属性动态添加到正文部分。

position: fixed; width: 100%; top: 0px; 和 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"   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 >
            <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>

【问题讨论】：

为特异性选择框添加类

面临一些问题 详细说明问题是什么，至少添加一个屏幕截图！阅读您的帖子一次，看看它是否可以从第三人称的角度理解。还有棱角？角2？角材料？你用的是哪一个？

这里好像不应该使用angular2标签。

我也面临同样的问题，比如当聚焦 md-autocomplete 时它会自动向下滚动页面并且下拉列表的位置没有正确呈现。

这真是一个更好的方法

【参考方案1】：

您是否在浏览器中检查过它？您可能会看到 md 样式覆盖它。向它添加一个类并覆盖样式，如果需要，则使用重要

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

【参考方案2】：

我想你检查一下 .md-select.fixedTop top: 0px !important;

【讨论】：

应该在评论区而不是答案框