2
票
Accepted
要素中にある複数の要素を適宜折り返したい、ただし要素の途中で折り返さない
table要素はデフォルト(table-layout: auto)では表の全てのセルを考慮して幅を決定します。この時 「折り返しを考慮しても中身が枠をはみ出ない幅」 が、親要素の幅や、テーブル自身に指定された width CSSプロパティを超えていた場合、それらの値を無視して「折り返しを考慮しても中身が枠をはみ出ない幅」がテーブルの幅となります。これが今回の現象です。
...
2
票
Timepickerが機能しない。
bootstrap-timepickerのlinkタグにrel="stylesheet"属性を指定していないためです。
以下のように指定すると動作します。
$('#timepicker1').timepicker();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">...
2
票
チェックボックスを扱って時間を変更したい。
Timepickerの時間を設定するのに、setTimeを利用してください。
詳しくは、ここに参照してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" ...
2
票
rails g kaminari:views bootstrap3が実行できない
状況整理:
エラーメッセージをよく見ると、実際の処理を実行せんとして 失敗しているファイルとその該当行が出力されているのがわかります(ファイルパス:該当行 形式)
/usr/local/rvm/gems/ruby-2.3.0/gems/kaminari-core-1.0.1/lib/generators/kaminari/views_generator.rb:114
あと、理由として、...
2
票
2
票
bootstrap でnavbar が正しく表示されません
スクリーンショットを見る限り、bootstrapの前にhtmlについて勉強する必要があります。特に<html>タグや<body>タグの役割といった基礎の基礎の知識が足りてないように見受けられます。
とりあえずの解決策としては、全てのコンテンツは</body>の手前に書く必要があります。
2
票
Accepted
Rails6 webpacker から bootstrap js を使う方法
require して返り値を受け取ってないからでは無いでしょうか。
const bootstrap = require(“bootstrap”);
console.log(bootstrap.Tab);
みたいにすると大丈夫そうな気がします。
ところで今後はes6の文法で書く方がより良いと思います。
公式にも下記のような書き方が推奨されてます。
import * as bootstrap ...
2
票
Accepted
RSpec+CapybaraでBootstrap 4のドロップダウンをテストする方法
「ナビゲーションバーの中にあるドロップダウンをクリックして表示されたドロップダウンメニュー」はJavaScriptを使って実現されているはずです。
なので、RSpecの中でもJavaScriptを使う必要があります。
selenium-webdriverやPoltergeistといったgemを導入するとRSpec内でもJSが有効になります。
(僕はPoltergeistをよく使います)
...
2
票
使っているデバイスによってbackground-sizeを変えたい
メディアクエリを使ってブラウザーのビューポートの幅で切り替えるのが一般的です。
たとえばスマートフォン用の指定は下記を追加します
@media (max-width: 575.98px) {
.top-main {
background-size: cover;
}
}
2
票
Accepted
Bootstrapでhover時に他のアイコンに変えたい
Bootstrap Icons v1.9.1 を使われているようですが、bi-1-circle-fillにはバグがあり、v1.10.0で修正されています。v1.10.0以降を使いましょう。
加えて設定しているCSSセレクタも間違っています。まず、bi-i-circle(アイ)ではなくbi-1-circle(イチ)です。更に::before疑似要素のcontentスタイルを変更する必要があります。
...
2
票
Accepted
Bootstrapでhover時に他のアイコンへ変えたい
https://ja.stackoverflow.com/a/96867/4236 でも例示しましたが、変えるべきスタイルは content だけで十分です。今回、 background-color まで変えてしまったために黒くなっています。
.bi-person:hover::before {
content: '\F4DA';
}
.bi-bag:hover::before {
...
1
票
Accepted
隔離スコープのパラメータが同期されない
詳細がわからないため推測になりますが、以下のどちらかではないでしょうか。
異なるスコープでshowが定義されており、scope.toggleによる切り替えで期待したスコープのshowの値が変更されていない
DatepickerのshortcutPropagationの設定が考慮されていない
補足:
1....
1
票
CSSにおいて正方形に余白がある状態にしたい
以下のやり方でできました。
▼HTML
<section class="testimonials">
<div class="flex-container">
<ul>
<li><img src="...
1
票
CSSにおいて画像を上下に5つずつ配置したい
以下のコードでできました。
▼HTML
<div class="flex-container">
<ul>
<li><img class="testimonials-img" src="img/blog/1.jpg" alt=&...
1
票
HTML,CSSによるデザインで要素の高さを70%にしたい
.section-box .box-white {
padding: 50px 10%;
background: #fff;
-webkit-box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.08);
box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.08);
}
にすることで高さをだいたい70%...
1
票
Bootstrapのdatatables内におけるselectボックスにデータを挿入する場合について。
ListAのrenderにて<option>を含んだ<select>の文字列を返せばいいのでは?
とりあえずListAに配列が来ると仮定してデモを作りました。
$('#tbl').DataTable({
searching: false,
sort: false,
paging: false,
data: [
{...
1
票
BootstrapのModalで別htmlの読み込みができましたが、読み込む要素を指定したい
仮に、Lab6.htmlの内容が以下のとき
<html>
<body>
<h1>test</h1>
<div class="panel-body">これそれあれ</div>
<div>hoge</div>
</body>
</html>
div ...
1
票
Accepted
.NET MVC ViewからControllerへのbootstrap toggleの状態渡しについて
JavaScriptで値が変化する際のイベント(onlickなど)を監視し、AJAXと呼ばれる手法でリクエストを送信し、結果を受け取ることができます。ASP.NET MVCの場合はjQueryを使用して
<script>
$("#cbOnOff").click(function(e){
$.ajax({
url: '@Url....
1
票
.NET MVC ViewからControllerへのbootstrap toggleの状態渡しについて
ASP.NETの標準的な方法では、同名の<input type="hidden" />をチェックボックスより後ろに配置し、checkboxにTrue、hiddenにFalseを指定します。
<input type="checkbox" name="cbOnOff" value="True" />
<input type="hidden" name="cbOnOff" ...
1
票
画面のテーブルに対して行選択するコードの書き方について。
class(dataとfilename)とattribute(flag)を付加してサンプルを書いてみました。
色々な方法がありますが、こんな感じでしょうか。
選択行を取得ボタンの処理結果はconsole.logへ出力しました。
$(function(){
$('.data').on("click",function(){
var ...
1
票
モーダル画面内の入力値が文字化けする(TOMCATによる文字化け)
色々と調べた結果Tomcat5.X以降においてGET時に日本語が文字化けするとのことでした
参照
http://ameblo.jp/spring-beginner/entry-10429339939.html
そこでサーバー側(私の場合、Eclipseのテスト用TOMCAT7)のserver.xmlの以下のパラメータに以下の項目を追加したら治りました。
<Connector ...
1
票
AngulerJSでのモーダル画面表示
全体的に$modalではなく$uimodalでした
また最初に
app.controller("controller", ['$scope', '$http','$uibModal', function($scope, $http, $uibModal )
と定義しておいく必要があることがわかりました。
実際につかうときは
var modalInstance = $uibModal.open(...
1
票
Accepted
.NETでBootstrapのModalがOnClickイベント後に閉じてしまう。
onserverclickなのでポストバックが発生し、ページ全体またはUpdatePanelが再読み込みされてBootstrapによるモーダルの表示を打ち消しているのでしょう。ですのでUpdatePanelのトリガーとして問題のボタンを登録する必要があります。対象の<asp:UpdatePanel>に
<asp:UpdatePanel ID="UpdatePanel2" ...
1
票
要素を横一列で並べたい。
.form-inline .input-group {
display: inline-table;
vertical-align: middle;
}
横並びのときは上記のCSSが効いているので、これをメディアクエリ外に書いても効くのですが、ほかに影響が出るとまずいので、
.input-group.timepicker {
display: inline-table;
...
1
票
modal内の特定の要素の高さを取得したい
回答の内容は@pgrho さんと同じですが、サンプルを投稿します。
(コメントとして追加しようとしましたが、まだ権限が足りなかったため回答として投稿)
$('#myModal').on('shown.bs.modal', function (e) {
var takasa = $('p').height()
alert(takasa);
});
<script ...
1
票
bootstrapでtableの縦線を消す方法について
以下はBootstrap 3 の基本的なテーブルを公式のドキュメントより引用したものです。
縦線は存在しませんが、これで解決できませんか?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class=...
1
票
Accepted
画面が小さくなっても要素を横一列に並んだままにしたい
多少デザインが変わりますが、このような感じではいかがでしょう?
<div class="container" style="padding:20px 0">
<form class="form-inline" style="margin-bottom:15px;">
<div class="form-group">
...
1
票
Only top scored, non community-wiki answers of a minimum length are eligible