小明跑到一家書店，問老闆說，你們這有沒有最可怕的故事書。老闆推推眼鏡，然後冷冷的回答說，有。於是從書架上取下一本書，並告訴小明，這本故事書很特別，每個章節都很恐怖，要價 1000元，你要買嗎？
小明沒有猶豫很久，就跟老闆說，我要買。當老闆把書交給小明之際，低聲的對小明說，有一件事你一定要特別注意，就是「千萬不要翻到最後一頁，千萬要記住喔」。
2017年7月28日 星期五
2017年7月26日 星期三
調整Bootstrap 裡的 input-group 高度
Bootstrap 裡使用 input-group ，可以很輕易的讓使用者建構出鮮明清爽的輸入項目。
但有發現嗎？在備註二，如果內容的文字一多，就會出現這種爆表的現象。
目前找到一個有效的解決方式，就是透過調整 CSS ，針對 .input-group-btn, .input-group .form-control 這些 class 設定 height: auto
但單單僅這樣設定，反而造成其他尚未有 input 內容的畫面變得很乾扁。
所以再針對每一個項目設定了最小高度，例如：min-height: 30px;
經由這樣的設定後，整體呈現總算有及格了。
參考：.input-group-lg causes textarea's height to shrink to a single line
目前找到一個有效的解決方式，就是透過調整 CSS ，針對 .input-group-btn, .input-group .form-control 這些 class 設定 height: auto
但單單僅這樣設定，反而造成其他尚未有 input 內容的畫面變得很乾扁。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="Default5" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="http://getbootstrap.com/favicon.ico">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<style>
.input-group-addon {
/*設定每個 input-group-addon 都有固定寬度 */
min-width:180px;
}
.input-group{
padding-bottom:2px;
}
/*自動根據內容調整高度，同時設定最小高度*/
.input-group-btn, .input-group .form-control
{
height: auto;
min-height: 30px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<div>
</div>
<div class="row">
<div class="col-md-6">
<div class="input-group">
<span class="input-group-addon">學生姓名</span>
<asp:Label id="lb_學生姓名" runat="server" CssClass="form-control" Text="張小明" ></asp:Label>
</div>
</div>
<div class="col-md-6">
<div class="input-group">
<span class="input-group-addon">年級班級</span>
<asp:Label id="lb_班級" runat="server" CssClass="form-control" Text="五年一班" ></asp:Label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="input-group">
<span class="input-group-addon">備註一</span>
<asp:Label id="lb_備註一" runat="server" CssClass="form-control" Text="" ></asp:Label>
</div>
</div>
<div class="col-md-6">
<div class="input-group">
<span class="input-group-addon">備註二</span>
<asp:Label id="lb_備註二" runat="server" CssClass="form-control" Text="2014年校慶運動會跑步第一名<br>2015年校慶運動會跑步第二名<br>2016年全國運動會跑步第一名" ></asp:Label>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
參考：.input-group-lg causes textarea's height to shrink to a single line
訂閱：
意見 (Atom)