Question

我开始使用ng-bootstrap Typeahead组件，对此我感到非常满意。

我想实现的一件事是使下拉菜单项具有与输入字段相同的宽度，而默认行为将宽度应用于文本长度。应该是基本的CSS ...

我在Plunker中创建了基本的Example。

您可以注意到，所应用的样式将被忽略：

.dropdown-menu { width: 100%;}

如果我使用浏览器开发工具，并应用与之相同的东西。

关于使用CSS如何获得结果的任何想法？

Answer 1

将$(".btn_ranking").one('click', function(e) { e.preventDefault(); var name = localStorage.getItem('name'); var time = localStorage.getItem('timer_end'); $.ajax({ url: "php/file.php", method: "POST", data: { name: name, time: time }, success : function(data) { alert(data); } }); });添加到组件

$conn = new mysqli($servername, $username, $password, $dbname);

查看更新后的plunker

没有ViewEncapsulation.None，此组件中应用的样式只会影响此组件，而不会影响此页面上的任何其他组件。

阅读this了解更多信息

Answer 2

对我来说，工作原理很深。看起来更安全，范围更广：

enhanced_graphql

Answer 3

@Nandita的答案是正确的，直接将宽度应用于下拉菜单不会造成影响。

并且您希望下拉菜单的宽度与输入的宽度相同，因此应在CSS下方添加其答案：

.dropdown-menu { width: 300px;}

检查结果： https://next.plnkr.co/edit/YvOymCLAwYgU3VmJ

Answer 4

此代码100％可用，但是对于类.dropdown-menu，其他任何下拉列表都将更改

::ng-deep .dropdown-menu { width: 100%; }

所以我只使用了ngb-typeahead-作为ID的这段代码：

::ng-deep [id^="ngb-typeahead-"]{ 
width: 100%!important; 
white-space: nowrap!important;
overflow: hidden!important;
text-overflow: ellipsis!important;}

Answer 5

使用scss应该可以解决问题。在您的dom中找到父 div ，并给它一个“下拉包装”类。

.dropdown-wrapper {
  .dropdown-menu {
    width: 90%;
  }
}

将此添加到您的全局scss。干杯！

Answer 6

扩展Nandita Sharma的答案，在Angular中关闭ViewEncapsulation时，将任何CSS规则范围限定到组件可能是一个好主意。这样可以避免通用名称的类在全局CSS范围内泄漏出去。

一种非常简单的方法是确定组件选择器内部的所有范围：

// Name of the component containing the typeahead
app-parent-selector {
  // Rules added here won't leak out into the global CSS scope
  .dropdown-menu {
    width: 400px;
  }
}

最好避免使用任何使用刺穿后代组合器（:: ng-deep，/ deep /或>>>）的方法，因为所有主要浏览器和{{3 }}。

Answer 7

这就是我如何使其在响应式col中工作的方式：

::ng-deep ngb-typeahead-window.dropdown-menu {
    width: calc(100% - 30px);
}

或

::ng-deep .dropdown-menu.show {
    width:calc(100% - 30px);
}

不确定哪个是最好的选择，但我倾向于想到第一个。

Answer 8

如果您计划在所有页面中以相同的方式使用预先输入字段，最好的做法是在全局范围内添加它。如果您有一个可以保存所有全局样式的 styles.scss，请在此处添加：

ngb-typeahead-window {
    width:calc(100% - 30px);

    .dropdown-item {
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

ng-bootstrap-提前输入下拉宽度

8 个答案: