Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
    My guess is that flex-layout-11 is present 11 times because you're using responsive breakpoints
    Which means the class itself is recreated in different ways for each breakpoint
    cc @intellix
    Dominic Watson
    ahah potentially but they're exactly the same class and content
    was going to serve the one included in the flex-layout repository to create a reproduction
    Unfortunately there's no good way to do consolidation, especially when you consider custom breakpoints
    We might be able to optimize, but worst case it's going to be the same thing
    Dominic Watson
    My original thought still stands on that issue actually which is that the ServerMediaMatcher isn't exported and it's the only thing we use
    Getting around it by importing the private tokens
    Can you give me some insight into how you use it?
    Dominic Watson
    In parsing the user-agent and assuming the type of device being: mobile, tablet or desktop and setting particular breakpoints as active
    so if it's a mobile useragent then we assume it's XS and if it's desktop we assume it's LG and pass those breakpoints
    disabling the inline and flex classes and only using the ngClass.xs stuff. Now we're using utility classes like d-flex as well
    We assume the media size because we use a *mediaIf structural directive to remove DOM based on viewport size like mobile menus etc
    Hmm. I've always considered stuff like that to be an antipattern, but I'm all for unblocking people if there's a use for it. We could add a server configuration option to limit the breakpoint scope. We already do this with MediaObserver. Would that help?
    Dominic Watson
    maaybe, this is exactly what we do on the server:
    export function getFlexLayoutConfig(request: Request) {
      const uaParser = new UAParser(request.headers['user-agent']);
      const device = String(uaParser.getDevice().type);
      let ssrObserveBreakpoints = ['gt-xs', 'gt-sm', 'gt-md', 'lg', 'lt-xl'];
      const breakpoints: Record<string, string[]> = {
        mobile: ['xs', 'lt-sm', 'lt-md', 'lt-lg', 'lt-xl'],
        tablet: ['gt-xs', 'gt-sm', 'md', 'lt-lg', 'lt-xl'],
        desktop: ['gt-xs', 'gt-sm', 'gt-md', 'lg', 'lt-xl'],
      if (device in breakpoints) {
        ssrObserveBreakpoints = breakpoints[device];
      return { ssrObserveBreakpoints };
    1 reply
    if you load the page on your mobile and it delivers a desktop site there's gonna be a flash of things moving around so the transition will be really ugly without the above and vice versa
    James Garcia
    Hi, Im wondering if anyone has a solution on how to use mediaObserver to show custom breakpoints. When i subscribe right now it only shows me the default ones
    well nevermind. Apparently i had to disable the defaults in the config on the app module
    Does FlexLayout re-render child elements if a Responsive API breakpoint is hit on window resize?
    ie. not just move elements around, but actually create new instances.
    jagdishsinh jadeja
    why not flex-layout come to official angular discord ?
    jagdishsinh jadeja
    anyone using angular flex layout in server side rendering ?
    Shekhar Ramola
    how to reduce a lot of space in here ?
    between cards
    Daniel Willis
    Hi there, I've built a site with flex-layout, and because it's a site, rather than an app, I'm using scully.io as a static site generator.
    What appears to be a condition of this scenario is that when loading a page in a browser, the content layout initially appears briefly as if it were for a mobile/narrow screen before jumping to its correct layout for the wider screen.
    Is this something that has been encountered before, and if so, is there a solution?
    Daniel Willis

    Well, I've managed to solve my own problem! The problem is not with flex-layout, but rather with the scully.io config. Or more precisely, the puppeteer renderer configuration. I needed to specify a sufficiently wide viewport. e.g.:

    export const config: ScullyConfig = {
      projectRoot: './src',
      projectName: 'site-project-name',
      outDir: './dist/static',
      defaultPostRenderers: [
      routes: {
      puppeteerLaunchOptions: {
        defaultViewport: {
          width: 1200,
          height: 800,

    Note the defaultViewport options.

    Yogesh Manjhi
    Hi guys
    I am new here
    any suggestions from where i can learn angular flex layout


    Trying to add widgets(components) to a dashboard dynamically. Using ComponentFactoryResolver.
    Is there a way to set the component host/wrapper width using flex?
    Ie @HostBinding('fxFlex') width: string; ?

    mohamed mamdouh
    hi all
    is fxFlex-gt-md not working on 7.0.0-beta.19
    Daniel Willis
    @moMamdouhSaad you mean fxFlex.gt-md rather than fxFlex-gt-md?
    Hello everyone, I would appreciate anyone who can help me, is there a way to tell the node server to render the components in the version, for example: xs, or md, or xl, etc.? Help please, the first painting is a disaster, I have to wait for the full javascript to load for it to detect MathQuery so I can adjust all the code provided for the answer. Thanks in advance!
    Hey, i hope everyone is having a great start of the week! I was wondering how long the css grid feature is still deemed experiemental. It is really convenient when it comes to passing down data and i am considering using it in our webapp. We are already using it in a portion of our page and it works great, but the lack of documentation still prevents us from using it everywhere...
    where can i find angular dashboard templates using material or bootstrap, and could be responsive?
    Luiz Gabriel Parreira Pereira
    Hello guys
    Someone here?
    I can't undertand how to make work the second exemple for on this https://tburleson-layouts-demos.firebaseapp.com/#/stackoverflow
    Someone can help me please?
    Sorry, third exemple (stackoverflow)
    Luiz Gabriel Parreira Pereira
    I want to do this with flex Layout library
    fxLayout, fxFlex, etc
    @Luizgpp The flex-layout just generates the flexbox as inline styles so you should be able to work back from the examples in the stackover flow link link
    Luiz Gabriel Parreira Pereira
    @DuncanFaulkner Ok, thanks!
    @ol1106 i like https://www.chartjs.org/
    Joshua Immanuel

    Hello everyone, Can we set the fxLayout on child DOM element? I am having trouble with the sibling DOM elements which are below the fxLayout set DOM element.

    <div style="height: 400px">
      <div style="min-width: 300px"
           fxFlexFill >
        <div fxFlex="15" style="background-color: red;" fxFlex.xs="55">
        <div fxFlex="30" style="background-color: yellow" >
        <div fxFlex="55" style="background-color: blue;" fxFlex.xs="15">
    <div>Lower bottom</div>

    In the above snippet the "Lower bottom" div is getting displayed above the "Bottom" div