0
現在、ウェブ開発プロジェクトで角度材質を使用しています。また、UIルータを使用してさまざまな状態を切り替えることもできます。角度材質ui-router表示の問題
コンテンツがUIルータービューでは大きすぎると、垂直スクロールバーが存在する場合でもコンテンツが切り取られることを確認しました。
（私はより良く理解するためのタグにそれらを追加した2つのHTMLファイルと適切なスタイルの下に見つけてください
体に関連する指標のhtmlファイルを見つけてください。
<body layout="row" flex style="height:100%;width: 100%;max-height: 100%;max-width: 100%;overflow:inherit">
<div ui-view class="ng-scope"></div>
</body>
してくださいサイドバーが含まれていると、ファイルの下に見つける：
<div ng-controller="ToolbarController as tc" style="height:100%">
<md-toolbar layout="row">
<div class="md-toolbar-tools">
<md-button hide-gt-sm class="md-icon-button" aria-label="Icon">
<md-icon md-svg-src='webui/icons/menu.svg' ng-click="tc.toggleList()" ></md-icon>
</md-button>
<h2>V-Tchilling</h2>
</div>
</md-toolbar>
<div layout-fill layout="row" flex>
<md-sidenav md-is-locked-open="$mdMedia('gt-sm')" md-component-id='snav' class="md-whiteframe-4dp" style="height: 100%" >
<md-content role="navigation">
<img class="png-icon" style="max-width: 80%; width: 50%;align-self: center;padding-top: 5px;padding-bottom: 10px;" src="webui/icons/logo.png">
<ul class="side-menu">
<li ng-repeat="section in tc.menuService.sections" class="parent-list-item"
ng-class="{'parentActive' : tc.isSectionSelected(section)}">
<h2 class="menu-heading" ng-if="section.type === 'heading'"
id="heading_{{ section.name | nospace }}">
{{section}}
</h2>
<menu-link section="section" ng-if="section.type === 'link'"></menu-link>
<menu-toggle section="section" ng-if="section.type === 'toggle'"></menu-toggle>
</li>
<md-divider></md-divider>
</ul>
</md-content>
</md-sidenav>
<md-content layout-fill flex md-scroll-y class="_md layout-column flex">
<ui-view style="align-content: center;" layout-padding flex="noshrink" class="_md layout_padding ng-scope flex-noshrink" name="content"></ui-view>
</md-content>
</div>
</div>
MDカードを持っているコード・フラグメントの下に見つけてください。
<div style='margin-left: 30px;margin-top: 10px' class="doc-content">
<h1 style='margin-top: 5px;margin-bottom:0px' class='md-display-2'>Register User</h1>
<div style='margin-top: 30px;'>
<md-card style='width: 75%;height: 10%; max-height: 90%;' flex>
<md-toolbar class="md-hue-2" style="margin-bottom: 10px;" >
<h3 class='md-title' style='margin-left: 10px'> User Registration form </h3>
</md-toolbar>
<div style='margin-left: 20px'>
<p class="md-body-2" ng-show='rc.error' style='color:red;padding-top: 2px;padding-bottom: 2px;'> {{rc.error}} </p>
<form name="registerForm">
<md-input-container class="md-block md-input-has-placeholder vt-input-container">
<label>Email</label>
<input type="email" ng-model="rc.user.email" name="email" required>
<div ng-messages="registerForm.email.$error" role="alert" multiple="">
<div ng-message="required" class="my-message">You must supply an email address</div>
<div ng-message="email" class="my-message">Please correct your e-mail address eg: [email protected]</div>
</div>
</md-input-container>
<md-input-container class="md-block md-input-has-placeholder vt-input-container">
<label>First Name</label>
<input type="password" ng-model="rc.user.firstName" name="firstName" required>
<div ng-messages="registerForm.firstName.$error" role="alert" multiple="">
<div ng-message="required" class="my-message">You must supply your first name</div>
</div>
</md-input-container>
<md-input-container class="md-block md-input-has-placeholder vt-input-container">
<label>First Name</label>
<input type="password" ng-model="rc.user.surname" name="surName" required>
<div ng-messages="registerForm.surName.$error" role="alert" multiple="">
<div ng-message="required" class="my-message">You must supply your surname</div>
</div>
</md-input-container>
<md-input-container class="md-block md-input-has-placeholder vt-input-container" required>
<label>Password</label>
<input type="password" ng-model="rc.user.password" name="password">
<div ng-messages="registerForm.password.$error" role="alert" multiple="">
<div ng-message="required" class="my-message">You must supply a password</div>
</div>
</md-input-container>
<md-input-container class="md-block md-input-has-placeholder vt-input-container" >
<label>Confirm Password</label>
<input type="password" name="confirmPassword" ng-model="rc.user.confirmPassword" compare-to="rc.user.password" required>
<div ng-messages="registerForm.confirmPassword.$error" role="alert" multiple="">
<div ng-message="required" class="my-message">Please confirm a confirmation password</div>
<div ng-message="compareTo" class="my-message">The passwords do not match</div>
</div>
</md-input-container>
<md-input-container class="md-block md-input-has-placeholder vt-input-container">
<label>Phone number</label>
<input type="text" ng-model="rc.user.phoneNumber" ng-pattern="/^2588[0-9]{8}/" md-maxlength="12" name="phoneNumber" required>
<div ng-messages="registerForm.phoneNumber.$error" role="alert" multiple="">
<div ng-message="required" class="my-message">Please provide a phone number </div>
<div ng-message="md-maxlength" class="my-message">The number supplied is too long</div>
<div ng-message="pattern" class="my-message">Please supply a number in the format 258+(phoneNumber)</div>
</div>
</md-input-container>
<div layout="row" layout-align="center center" style="padding-top:10px;padding-bottom: 10px;">
<md-button type="submit" ng-disabled="!registerForm.$valid && !isSubmitted" class="md-hue-2 md-raised md-primary" ng-click="rc.registerUser()">Login</md-button>
<div flex="flex"></div>
</div>
</form>
</div>
</md-card>
</div>
</div>