How do you do the background?



  • I'm sorry I'm putting the angular tag, but maybe who worked with the angular-material.

    I'd like to make a list of names on the poles with flexbox.

    Example 1

    http://plnkr.co/edit/ZUKHlC?p=preview

    That's how it works. But if I turn things around

     div layout="row"
    

    The following is happening:

    Example 2

    http://plnkr.co/edit/e86jtj?p=preview

    I have to.

    layout="row" в ui-view
    

    so that the background on the remaining pages is 100% How do you win?



  • when added layout="row" to the attribute element ui-view The diva, which is responsible for showing the inner line, becomes attached, its width is considered to be the contents. To extend it to the breadth of the container, you need to add a characteristic.

    flex-grow:1
    

    An examplele with inline style simply add the necessary line into the class:

    <div ng-controller="DemoCtrl" layout="row" style="flex-grow:1" class="mainPallete">
        <div layout="column" layout-wrap style="max-height :calc(100vh); height: 100%">
          <p flex="20" ng-repeat="item in data | orderBy:'name'" style="padding-left: 20vh;" >{{item.name}}</p>
        </div>
    </div>
    

    http://plnkr.co/edit/B8qtV4Bo3MZqGf89m4B9?p=preview

    https://css-tricks.com/snippets/css/a-guide-to-flexbox/




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2