CSS: [code language=”css”] .k-grid-header th.k-grid-header-center { vertical-align: middle; } [/code] Kendo Grid: [code language=”javascript”] columns: [ { field: ‘Procurement.Name’, title: ‘Nama Kegiatan’, width: 175, headerAttributes: { "class": "k-grid-header-center" } }, ] [/code]
Membuat field Kendo Datepicker / DateTimePicker tidak bisa di input melalui keyboard. Tinggal menambahkan attribut onkeydown. Contoh penggunaan pada form.cshtml [code language=”html”] <input id="StartDate" onkeydown="return false"/> <!–atau–> @Html.EditorFor(model => model.StartDate, new { htmlAttributes = new { @onkeydown = "return false" } }) [/code]
Jika dalam list terdapat item dengan tinggi berbeda, supaya setiap baris tetap lurus seperti gambar di atas, floating left menggunakan [code language=”css”] #frontend-contents .dirfile { display: inline-block; vertical-align: top; } [/code] Referensi https://css-tricks.com/snippets/css/cross-browser-inline-block/ Menggunakan inline-block, ada jarak antara elemen. Solusinya [code language=”css”] #parent { font-size: 0; } #child { font-size: 16px; } [/code] Referensi http://stackoverflow.com/questions/19038799/why-is-there-an-unexplainable-gap-between-these-inline-block-div-elements
Pada jquery ui versi 1.11, sepertinya ada perubahan css. Untuk mengatur ukuran datepicker dapat menggunakan script CSS berikut: [code language=”css”] .ui-datepicker { width: 15em; font-size: 0.9em; } [/code]
Tambahkan css di print media query [code language=”css”] .tab-content > .tab-pane {display: block !important; opacity: 1 !important;} [/code] http://stackoverflow.com/questions/13963801/twitter-bootstrap-print-all-tab-content
Bootstrap dropdown menu pada bagian kanan halaman akan mengakibatkan tampilan seperti ini: Solusi menambahkan kelas pull-right pada dropdown menu [code language=”html”] <li class=""> <a data-toggle="dropdown" href="javascript:"><span class="glyphicon glyphicon-cog"></span></a> <ul class="dropdown-menu pull-right" role="menu"> <li class="#"><a href="#">Ubah Password</a></li> <li class="#">@Html.ActionLink("Logout", "Logout", "Account")</li> </ul> </li> [/code]
[code language=”html”] <div class="form-group"> @Html.LabelFor(model => model.Approve, new { @class = "col-xs-2 control-label" }) <div class="col-xs-4"> <div class="checkbox"> <label> @Html.EditorFor(model => model.Approve, new { @class = "text" }) </label> </div> @Html.ValidationMessageFor(model => model.Approve) </div> </div> [/code]
Kondisi awal: container di dalam (overlay warna biru) memiliki position: absolute dan width: 100%. Hasilnya ada sebagian overlay yang keluar dari bidang gambar. Solusinya: width: 100% dihapus, ditambahkan left: 15px dan right 15px (karena menggunakan bootstrap). [code language=”css”] .widget.services .cover { position: absolute; top: 0px; left: 15px; right: 15px; height: 0; padding-bottom: 100%; transition:…
[code lang=”html”] <div class="form-group"> <label class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <p class="form-control-static">email@example.com</p> </div> </div> [/code]
[code lang=”css”] /* 1. non-responsive */ .container { width: 1170px !important; } .container .navbar-header, .container .navbar-collapse { margin-right: 0; margin-left: 0; } /* Always float the navbar header */ .navbar-header { float: left; } /* Undo the collapsing navbar */ .navbar-collapse { display: block !important; height: auto !important; padding-bottom: 0; overflow: visible !important; } .navbar-brand…