Jan 09, 2015, 9:54 AM
[CLOSED] Why I can't scroll to page bottom?
I try to put a html code inside ext panel, everything is fine. but I can't scroll to page bottom. can anyone to help me find out the problem?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>會員註冊</title>
<link rel="stylesheet" href="./css/bootstrap.min.css" />
<link rel="stylesheet" href="./css/jquery-ui.css" />
<script src="./js/jquery.min2.1.1.js" ></script>
<script src="./js/jquery-ui.js" ></script>
<script src="./js/bootstrap.min3.2.0.js" ></script>
<style>
.main{ font-family:"微软雅黑", Arial, Helvetica, sans-serif;}
.header { background:url(images/topbg.png) repeat; background-color:#ffb861; height:80px; padding:0;}
.header .logo { height:50px; width:80px; margin-top:15px;}
.header .title { width:110px; margin:30px 0 0 0; font-weight:bold; color:#393939;}
.des { margin:0 0 0 -25px;}
.des1 { margin:0 0 0 -40px;}
.custom0 { padding:0;}
.custom1 { margin:0 0 0 -30px;}
.custom2 { padding:0; margin:0 0 0 -30px;}
.personalData { margin:15px 0 0 0;}
.petData { margin:15px 0 25px 0;}
.container { border-top:2px solid #ffb761;}
.header { border-top:none;}
span.dot { color:#f67138;}
.buttons { margin:25px 0 25px 0;}
.x-panel-body {
height:100px;
}
</style>
</head>
<body>
<form id="form1" runat="server" class="form-horizontal" role="form">
<div>
<ext:ResourceManager ID="ResourceManager1" runat="server" Theme="Neptune" >
</ext:ResourceManager>
<ext:Viewport ID="Viewport1" runat="server">
<Items>
<ext:Panel ID="Panel1" runat="server" AutoScroll="true" StyleSpec="height:100%">
<Content>
<div class="main">
<div class="container header">
<div class="col-sm-12 col-md-12 headTitle">
<img class="col-sm-1 col-md-2 col-xs-1 col-lg-2 logo" src="images/logo.png" />
<h4 class="col-sm-1 col-md-2 col-xs-6 col-lg-offset-1 col-md-offset-1 title">會員註冊</h4>
</div>
<br />
</div>
<div class="container">
<img class="personalData" src="images/personalData.png" />
<p class="help-block"><span class="dot">*</span> 項為必填項，請完整填寫</p>
<br />
<div class="form-group">
<label for="address" class="col-sm-2 control-label">會員編號 <span class="dot">*</span></label>
<div class="col-sm-10 custom0">
<div class="col-sm-12 col-md-6 custom0">
<div class="col-sm-12 hidden-xs hidden-sm">
<p class="help-block">會員編號</p>
</div>
<div class="col-sm-12">
<input type="text" class="form-control" id="userid" placeholder="請輸入您的會員編號">
</div>
</div>
<div class="col-sm-12 col-md-6 custom0">
<div class="col-sm-12">
<p class="help-block">會員驗證碼</p>
</div>
<div class="col-sm-12">
<input type="text" class="form-control" id="Text1" placeholder="請輸入您的會員驗證碼">
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="enname" class="col-sm-2 control-label">英文姓名 <span class="dot">*</span></label>
<div class="col-sm-10">
<input type="text" class="form-control" id="enname" placeholder="請輸入您的英文姓名">
</div>
</div>
<div class="form-group">
<label for="chname" class="col-sm-2 control-label">中文姓名 <span class="dot">*</span></label>
<div class="col-sm-10">
<input type="text" class="form-control" id="chname" placeholder="請輸入您的中文姓名">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">電郵地址 <span class="dot">*</span></label>
<div class="col-sm-10">
<input type="email" class="form-control" placeholder="請輸入您的電郵地址">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">密碼 <span class="dot">*</span></label>
<div class="col-sm-10">
<input type="password" class="form-control" placeholder="請輸入您的密碼">
</div>
</div>
<div class="form-group">
<label for="repassword" class="col-sm-2 control-label">確認密碼 <span class="dot">*</span></label>
<div class="col-sm-10">
<input type="password" class="form-control" placeholder="請再次確認您的密碼">
</div>
</div>
<div class="form-group">
<label for="sex" class="col-sm-2 control-label">稱呼 <span class="dot">*</span></label>
<div class="col-sm-10">
<div class="checkbox">
<label>
<input type="radio" name="sex" id="optionsRadios1" value="option1" checked> 先生
</label>
<label>
<input type="radio" name="sex" id="Radio1" value="option1" > 女士
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="birthday" class="col-sm-2 control-label">出生日期 <span class="dot">*</span></label>
<div class="col-sm-10 custom0">
<div class="col-sm-12 col-md-4 custom0">
<div class="col-sm-12">
<select class="form-control">
<option>-- 年 --</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
<option>1995</option>
</select>
</div>
</div>
<div class="col-sm-12 col-md-4 custom0">
<div class="col-sm-12">
<select class="form-control">
<option>-- 月 --</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="col-sm-12 col-md-4 custom0">
<div class="col-sm-12">
<select class="form-control">
<option>-- 日 --</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="col-sm-12 col-md-4">
<p class="help-block">（可享受生日優惠）</p>
</div>
</div>
</div>
<div class="form-group">
<label for="idcardnum" class="col-sm-2 control-label">身份證號碼 <span class="dot">*</span></label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="請輸入您的身份證號碼">
</div>
</div>
<div class="form-group">
<label for="address" class="col-sm-2 control-label">地址 <span class="dot">*</span></label>
<div class="col-sm-10 custom0">
<div class="col-sm-12 col-md-12 custom0">
<div class="col-sm-12">
<div class="col-md-2 custom0">
<p class="help-block">區域：</p>
</div>
<div class="col-sm-12 col-md-10 custom2">
<label class="checkbox-inline">
<input type="radio" name="options" id="options1" value="option1"> 香港島
</label>
<label class="checkbox-inline">
<input type="radio" name="options" id="options2" value="option2"> 九龍
</label>
<label class="checkbox-inline">
<input type="radio" name="options" id="options3" value="option3"> 新界
</label>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 custom0">
<div class="col-sm-12">
<p class="help-block">地區：</p>
</div>
<div class="col-sm-12">
<select class="form-control">
<option>-- 請選擇地區 --</option>
<option>地區1</option>
<option>地區2</option>
<option>地區3</option>
<option>地區4</option>
<option>地區5</option>
</select>
</div>
</div>
<div class="col-sm-12 col-md-6 custom0">
<div class="col-sm-12 hidden-xs hidden-sm">
<p class="help-block"> </p>
</div>
<div class="col-sm-12">
<select class="form-control">
<option>-- 請選擇地段 --</option>
<option>地段1</option>
<option>地段2</option>
<option>地段3</option>
<option>地段4</option>
<option>地段5</option>
</select>
</div>
</div>
<div class="col-sm-12 col-md-12 custom0">
<div class="col-sm-12">
<p class="help-block">詳細街道地址：</p>
</div>
<div class="col-sm-12 col-md-12">
<input type="text" class="form-control form-horizontal" placeholder="請輸入您的詳細街道地址（無需重複輸入地區，地段）">
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="tel" class="col-sm-2 control-label">聯繫電話 <span class="dot">*</span></label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="請輸入您的聯繫電話">
</div>
</div>
<div class="form-group">
<label for="eduLevel" class="col-sm-2 control-label">教育程度</label>
<div class="col-sm-10">
<select class="form-control">
<option>-- 請選擇您的教育程度 --</option>
<option>小學</option>
<option>初中</option>
<option>高中</option>
<option>中專</option>
<option>大專</option>
<option>本科</option>
<option>碩士</option>
<option>博士</option>
</select>
</div>
</div>
<div class="form-group">
<label for="ruxi" class="col-sm-2 control-label">入息</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="請輸入您的入息">
</div>
</div>
<br />
</div>
<div class="container second">
<img class="petData" src="images/petData.png" />
<br />
<div class="form-group">
<label for="species" class="col-sm-2 control-label">飼養種類</label>
<div class="col-sm-10">
<select class="form-control">
<option>-- 請選擇您寵物的種類 --</option>
<option>貓</option>
<option>狗</option>
<option>兔子</option>
<option>龍貓</option>
<option>倉鼠</option>
<option>其他</option>
<option>沒有飼養</option>
</select>
</div>
</div>
<div class="form-group">
<label for="petname" class="col-sm-2 control-label">寵物姓名</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="Text2" placeholder="請輸入您寵物的姓名">
</div>
</div>
<div class="form-group">
<label for="feedingYear" class="col-sm-2 control-label">飼養年期</label>
<div class="col-sm-10">
<input type="number" class="form-control" placeholder="請輸入您寵物的飼養年期">
</div>
</div>
<br />
</div>
<div class="container third">
<br />
<div class="col-sm-offset-1 col-sm-12 col-md-12">
<p>請認真閱讀<a href="Privacy.html">《寵物易購網隱私權聲明》</a>.</p>
</div>
<div class=" col-sm-offset-1 col-sm-12 col-md-12">
<div class="checkbox">
<label>
<input type="checkbox" name="agree" id="agree" value="agreed"> 我已經閱讀並同意該隱私權聲明
</label>
</div>
</div>
</div>
<div class="form-group buttons col-sm-12 col-md-12 col-lg-12">
<div class="col-sm-offset-2 col-md-offset-3 col-lg-offset-3 col-sm-10">
<div class="col-sm-2 col-xs-3 col-md-2 col-lg-2">
<button type="submit" class="btn btn-primary">註冊</button>
</div>
<div class="col-sm-1 col-xs-offset-1 col-xs-3 col-md-2 col-lg-2">
<button type="reset" class="btn btn-default">重置</button>
</div>
</div>
</div>
</div>
</Content>
</ext:Panel>
</Items>
</ext:Viewport>
</div>
</form>
</body>
</html>
Last edited by Daniil; Jan 10, 2015 at 11:14 AM.
Reason: [CLOSED]
