Can't change width of flyout

Question

I have a flyout has id "productFlyout". I tried to set its background color and width. It has red color but the width doesn't change. It seems that Metro doesn't allow width too big.

JS file:

productFlyout.winControl.show(dummyDOM, "bottom", "center");

CSS file:

#productFlyout {
   background: red;
    width: 1000px;
}


#productFlyout .win-flyout {
    width: 1000px;
    background: red;
}

Commandment

If you use DOM explorer in VS, does it say who is setting the width, and which rule is setting it? I might be that the flyout is setting is programmatically and there for has a higher specificity. – Chunchung

Answer 1

There are limits for Flyout set by default. Do a quick search for ".win-flyout" in either ui-dark.css or ui-light.css and you'll see defaults for:

• min-width
• max-width
• min-height
• max-height

You can override those in your CSS, but keep in mind the guidance for Flyouts is to keep them as small as possible. See "Designing a Flyout" in this article:

"Guidelines & checklist for Flyouts"

Entablement