离子3角度滑动高度刚好足以容纳内容物

时间:2017-08-18 02:15:36

标签: angular ionic3 ion-slides

我的网页目前看起来像http://moblize.it

我试图将幻灯片高度改为足够内容。显然无法解决它,否则它将搞砸小型设备

当前代码看起来像

 <ion-slides direction="vertical" speed="1000" slidesPerView="1">
  <ion-slide  class="site-slide"  style="background-color:#2298D3">
    <ion-card style="height:300px;float:center">
      <img src="http://www.segalpetroniru.com/images/Consulting-Services-Hero-Image-Secondary.jpg" />
    </ion-card>
  </ion-slide>

  <ion-slide padding class="site-slide" >
     <ion-row>
       <ion-col text-left>
         <ion-row><ion-col col-1 style="background-color: #4054B2"></ion-col><ion-col padding style="color:#616161"><h2 style="color:#616161">Revolution!</h2>

In the field of Mobile App Development!</ion-col>
         </ion-row>
       </ion-col>
     <ion-col text-left>
      <ion-row><ion-col col-1 style="background-color: #4054B2"></ion-col><ion-col padding style="color:#616161">
              <h2 style="color:#616161">Bots!</h2>
              It's time for conversational apps. You need conversations, you need apps, you need everything!</ion-col>
         </ion-row>
     </ion-col>
     </ion-row>

  </ion-slide>

  <ion-slide class="site-slide" style="background-color: #F5F5F5" padding>
        <ion-row><ion-col col-1></ion-col><ion-col>
        <ion-card padding>
        <div style="background-color:#2298D3;color:white;height:50px;font-weight:bold;font-size:large" text-left padding>Contact Us</div>
       <ion-list class="contact-form" padding>
            <form [formGroup]="slideTwoForm" style="background-color: #D9E4EE">

                <ion-item>
                    <ion-label floating>Name</ion-label>
                    <ion-input formControlName="username" type="text"></ion-input>
                </ion-item>

                <ion-item>
                    <ion-label floating>Company</ion-label>
                    <ion-input formControlName="company" type="text"></ion-input>
                </ion-item>

                 <ion-item>
                    <ion-label floating>Email</ion-label>
                    <ion-input formControlName="email" type="email"></ion-input>
                </ion-item>

                 <ion-item>
                    <ion-label floating>Phone</ion-label>
                    <ion-input formControlName="phone" type="text"></ion-input>
                </ion-item>

                <ion-item>
                    <ion-label floating>Message</ion-label>
                    <ion-textarea formControlName="message"></ion-textarea>
                </ion-item>

            </form>
             <button ion-button full color="site" (click)="sendMessage()" [disabled]="formIncomplete() == true">Send</button>
        </ion-list>     
        </ion-card>  
        </ion-col><ion-col col-1></ion-col></ion-row>
  </ion-slide>

</ion-slides>

0 个答案:

没有答案