user4756836 user4756836 - 1 month ago 7
AngularJS Question

Stack columns if browser size is small

I have 2 columns on my page... my issue is that I want the right column to stack underneath my left column if browser size is made smaller. I am using angular material but don't mind using custom styling to fix this. Any help will be appreciated.

HTML:

<div layout="row" layout-align="center center" flex>
<section layout="row">
<div id="nav" flex="20" layout="column" layout-align="space-around">
<md-calendar class="fixed-calendar" ng-model="myDate"></md-calendar>
</div>
<div id="content" flex>
<h2>Right Column</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
</div>
</section>
</div>


CSS:

.datepickerdemoBasicUsage md-content {
padding-bottom: 200px; }

.datepickerdemoBasicUsage .validation-messages {
font-size: 11px;
color: darkred;
margin: 10px 0 0 25px; }

.fixed-calendar {
width: 340px;
height: 340px;
display: block;
}

.fixed-calendar .md-calendar-scroll-mask {
width: 340px !important;
}

.fixed-calendar .md-virtual-repeat-scroller {
width: 340px !important;
height: 308px;
overflow: hidden !important;
}


JSFiddle Demo

Answer

Something like this on your parent layout="column" layout-gt-xs="row"

<div ng-app="sandbox">
  <div>
    <section layout="column" layout-gt-xs="row">
      <div id="nav" flex>
        <md-calendar class="fixed-calendar" ng-model="myDate"></md-calendar>
      </div>
      <div id="content" flex>
        <h2>Right Column</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
      </div>
    </section>
  </div>
</div>

This says stack child elements into a column. Then if the browser width gets to greater than or equal xs (>= 600px), make child elements into a row.

Fiddle

Comments