0

I'm working with Angular 7 and Angular flex-layout ^7.0.0-beta.24. I am having an issue where when I set the width of a div, minimizing the window past that div width causes the left side to get cut off with no option to scroll to see the content.

I have tried setting the min and max widths on the div, tried media queries, tried the width of the outer container to 100% but no luck. I've also tried setting overflow to auto or scroll, as well as just overflow-x and y to auto or scroll still nothing to make the div keep the left side static and squish the right side with scroll to right

My scss:

.details-page {
  background-color: #f3f4f5;
  color: #292929;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  border: 1px solid red;  // for testing

  .heading {
    height: 55px;
    margin: 36px 24px !important;
    width: 976px;  // if I remove this, everything is fine scroll-wise but the div contents look weird and I need to have this width here to match design specs
  }
}

My html:

<div class='details-page'>
  <div fxLayout='column' fxLayoutAlign='center center' fxLayoutGap='16px'>
    <!-- asset header and backlink -->
    <div class='heading' fxFlex='100'>
      This is a heading kajhdkjhag jkh jskfhg kjh kajshg kh jkhkjh asdf jh kljh
    </div>
  </div>
</div>

image with screen width wider than 976px: normal screen

image with screen smaller than 976px: squished screen no scroll left

JD Carr
  • 219
  • 3
  • 17
  • possibly related: https://stackoverflow.com/q/33454533/3597276 – Michael Benjamin Aug 08 '19 at 16:56
  • This does explain the problem but not how to solve the issue with flex-layout, since all that flex is happening under the hood. I suppose I can fiddle around with the fxLayoutAlign but I really wanted the header column to be centered on the page with a width of 976px and until I played with screen width `fxLayoutAlign='center center'` was working wonderfully ¯\_(ツ)_/¯ – JD Carr Aug 08 '19 at 17:12
  • Please post enough code to reproduce the problem. My previous comment was limited by lack of detail in your post. – Michael Benjamin Aug 08 '19 at 17:16
  • That's all the code I have to reproduce the problem in my Angular 7 and flex-layout 7.0.0-beta.24 app ... – JD Carr Aug 08 '19 at 17:20

1 Answers1

0

Okay, so going off the link Michael_B posted in comment, it seems fxLayoutAlign='center center' uses justify-content: center and align-items: center; align-content: center

I'm still not sure why flex does true centering, seems like a limitation that's been fixed since Angular flex-layout 8.

I updated it to the html (note the fxLayoutAlign='center center' changing to fxLayoutAlign='center start'):

<div class='details-page'>

  <div fxLayout='column' fxLayoutAlign='center start' fxLayoutGap='16px'>
    <!-- header and backlink -->
    <div class='heading' fxFlex='100'>
      <div fxLayout='column' fxLayoutAlign='start start' fxLayoutGap='5px'>
        <div>
          <a routerLink='list' class='link'>
            < Back to list
          </a>
        </div>
        <div class='title'>
          Details
        </div>
      </div>
    </div>
  </div>
</div>

And my scss:

.details-page {
  background-color: #f3f4f5;
  color: #292929;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  width: 100%;
  margin: auto;

  .heading {
    height: 55px;
    margin: auto;
    padding: 36px 24px;
    width: 976px;

    .link {
      color: #0458e6;
      font-size: 12px;
      text-decoration: none;
    }

    .title {
      font-size: 36px;
      font-weight: 300;
    }
  }
}
JD Carr
  • 219
  • 3
  • 17