Item: Dynamic Height
Rating: 3.4
Author: 1kohei1

0 Downloads
25 Views
Tweet
Download Now View Demo

HTML
CSS
JavaScript

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Dynamic Height</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
  
  <link rel='stylesheet prefetch' href='https://gitcdn.xyz/repo/angular/bower-material/v0.11.4/angular-material.css'>
<link rel='stylesheet prefetch' href='http://localhost:8080/docs.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div ng-cloak="" class="tabsdemoDynamicHeight" >
  <md-content>
    <md-tabs md-dynamic-height="" md-border-bottom="">
      <md-tab label="one">
        <md-content class="md-padding">
          <h1 class="md-display-2">Tab One</h1>
          <p>Tab 1</p>
        </md-content>
      </md-tab>
      <md-tab label="two">
        <md-content class="md-padding">
          <h1 class="md-display-2">Tab Two</h1>
          <p>Tab 2</p>
        </md-content>
      </md-tab>
    </md-tabs>
  </md-content>
</div>
  <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-animate.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-route.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-aria.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-messages.min.js'></script>
<script src='https://gitcdn.xyz/repo/angular/bower-material/v0.11.4/angular-material.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>


/*Downloaded from https://www.codeseek.co/1kohei1/dynamic-height-MaOMQa */
.tabsdemoDynamicHeight md-content {
  background-color: transparent !important; }
  .tabsdemoDynamicHeight md-content md-tabs {
    background: #f6f6f6;
    border: 1px solid #e1e1e1; }
    .tabsdemoDynamicHeight md-content md-tabs md-tabs-wrapper {
      background: white; }
  .tabsdemoDynamicHeight md-content h1:first-child {
    margin-top: 0; }


/*Downloaded from https://www.codeseek.co/1kohei1/dynamic-height-MaOMQa */
(function() {
  'use strict';
  
  angular.module('MyApp').controller('TestController', TestController);
  
  function TestController() {
    
  }
});

Comments

More from 1kohei1

Dynamic Height

In this example below you will see how to do a Dynamic Height with some HTML / CSS and Javascript

Technologies

Comments

More from 1kohei1

SVG.js playground

RxJS playground

RxJS drag capture drag complete

Observable connect

You Might Also Like

Q-animation

A Pen by JEET

Simple Hierarchy

Pigecon

QEEL pour Hebi

Pristine

Portfolio

A Pen by Renan Nogueira