Question

我正在尝试创建100％宽度的对话框。但是作为原始设置，它被限制为80vw。

.mat-dialog-container{
  max-width:80vw;
}

我尝试过以下方法来覆盖此值。 但他们没有成功。

.mat-dialog-container {
  max-width: none;
  width: 100vw;
  height: 100vh;
}

并且

.mat-dialog-container {
    max-width: none !important;
}

有人请告诉我如何将80vw覆盖到100vw。谢谢。

Answer 1

在全局styles.css中添加css类，例如

.full-width-dialog .mat-dialog-container {
  max-width: 100vw !important;
}

..然后在您的对话框中提供panelClass：

this.dialog.open(MyDialogComponent, {panelClass: 'full-width-dialog'})

阅读此documentation。

Answer 2

尝试如下直接使用属性名称：

<ListView ...>
    <ListView.ItemContainerStyle>

        <!-- This is the style used by the item container of this ListView -->
        <Style TargetType="ListViewItem">
            <Setter Property="FocusVisualStyle">
                <Setter.Value>

                    <!-- This is the style for the focus visual -->
                    <Style>
                        <Setter Property="Control.Template">
                            <Setter.Value>
                                <ControlTemplate>
                                    <Rectangle SnapsToDevicePixels="true"
                                               Stroke="Red"
                                               StrokeThickness="1"
                                               StrokeDashArray="1 2"/>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>

                </Setter.Value>
            </Setter>
        </Style>

    </ListView.ItemContainerStyle>
</ListView>

这在Angular 7中对我有效。

Answer 3

解决此问题的最简单方法：

val nested: Array[Seq[Order]] = data
  .rdd
  .map(x => (x.customerId + x.productId, x))
  .groupByKey()
  .reduceByKey((x,y) => x ++ y)
  .collect()
  .map(x => x._2.toSeq)

def predictAll(orders: Array[Seq[Order]]): Array[Prediction] = {
  def getPrediction(x: Seq[Order]): Prediction = {
    val df: Dataset[Order] = x.toDF.as[Order]
    Prediction(df.select("week").first.getString(0),
               df.select("customerId").first.getString(0),
               df.select("productId").first.getString(0),
               genPrediction(df))
  }

  @tailrec
  def recPredict(xs: Array[Seq[Order]], acc: Array[Prediction]): 
    Array[Prediction] = xs match {
      case x if x.isEmpty => acc
      case x => recPrediction(x.tail, acc :+ getPrediction(x.head)
  }

  recPrediction(orders, Array[Prediction]())
}

Answer 4

您可以通过两种方式实现：

创建一个 css 类 className 并设置 max-width: 100vw（不要使用 mat-dialog-container 进行限制，因为有时 cdk-overlay 选择器的最大宽度是不同的。
在对话框打开时作为属性或配置传递 this.dialog.open(MyComponent, {maxWidth: '100vw'}); 并且不要忘记设置实际宽度。

Answer 5

我更喜欢在CSS中进行设置，然后我可以对响应式设计使用不同的设置。

我发现自己不得不使用!important来绕过默认的90vw。

如果您放置maxWidth: undefined，结果将是无效的。

dialog.open(DialogChoicesComponent, { ...options, maxWidth: undefined });

关于设置CSS的问题完全是另一回事，但是您可以设置backdropClass和panelClass并根据需要设置样式。

Answer 6

您可以设置默认选项：

{ provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: { maxWidth: '95vw', hasBackdrop: true } },

Answer 7

您是否正在使用材料设计并尝试覆盖默认类？您需要使用更具体的css规则。从父元素中定位，然后尝试，!important也可能有用。

Angular Material 2：如何将Dialog max-width覆盖为100vw？

7 个答案: