3
票
Accepted
Polymerでの外部Scriptファイルの読み込み方法について
動作しないコードが掲載されていないので、推測になります。
原因
前回の質問と同じく、ShadowDOM の仕様による現象だと考えられます。
前回 私は ShadowDOM の外側で定義された CSS ルールが適用されない と記述しましたが、より厳密には CSS セレクタがマッチしない と言うべきだったでしょう。CSS セレクタがマッチしない結果、ルールが適用されません。
さて、CSS ...
- 1,143
2
票
Accepted
PolymerとBootstrapの併用について
コードが無いので推測ですが、それは不具合では無く ShadowDOM の仕様によるものだと考えられます。
ShadowDOM は CSS の境界を作ります。
ShadowDOM の外で定義された CSS ルールは、ShadowDOM の内部に影響を与えません。
ShadowDOM の中で定義された CSS ルールは、ShadowDOM の外部に影響を与えません。
つまり、Web ...
- 1,143
2
票
Accepted
要素中にある複数の要素を適宜折り返したい、ただし要素の途中で折り返さない
table要素はデフォルト(table-layout: auto)では表の全てのセルを考慮して幅を決定します。この時 「折り返しを考慮しても中身が枠をはみ出ない幅」 が、親要素の幅や、テーブル自身に指定された width CSSプロパティを超えていた場合、それらの値を無視して「折り返しを考慮しても中身が枠をはみ出ない幅」がテーブルの幅となります。これが今回の現象です。
...
- 1.5万
2
票
Timepickerが機能しない。
bootstrap-timepickerのlinkタグにrel="stylesheet"属性を指定していないためです。
以下のように指定すると動作します。
$('#timepicker1').timepicker();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">...
- 669
2
票
チェックボックスを扱って時間を変更したい。
Timepickerの時間を設定するのに、setTimeを利用してください。
詳しくは、ここに参照してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" ...
- 513
2
票
Accepted
RSpec+CapybaraでBootstrap 4のドロップダウンをテストする方法
「ナビゲーションバーの中にあるドロップダウンをクリックして表示されたドロップダウンメニュー」はJavaScriptを使って実現されているはずです。
なので、RSpecの中でもJavaScriptを使う必要があります。
selenium-webdriverやPoltergeistといったgemを導入するとRSpec内でもJSが有効になります。
(僕はPoltergeistをよく使います)
...
- 6,611
2
票
Accepted
Bootstrapで動的にフォームを作るとチェックボックスのラベルをクリックしても機能しない
jsによってformを生成して、そのチェックボックスのラベルをクリックしてもチェックのオン・オフが起こらない、ということですよね?
ためしに作成してみましたが、ラベルをクリックしても動作します(Chromeでのみ確認)
addform = function() {
var form = $('#target:first');
form.append('<form>...
- 3,560
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
あと、理由として、...
- 126
2
票
bootstrap でnavbar が正しく表示されません
スクリーンショットを見る限り、bootstrapの前にhtmlについて勉強する必要があります。特に<html>タグや<body>タグの役割といった基礎の基礎の知識が足りてないように見受けられます。
とりあえずの解決策としては、全てのコンテンツは</body>の手前に書く必要があります。
- 4.1万
2
票
2
票
Accepted
Rails6 webpacker から bootstrap js を使う方法
require して返り値を受け取ってないからでは無いでしょうか。
const bootstrap = require(“bootstrap”);
console.log(bootstrap.Tab);
みたいにすると大丈夫そうな気がします。
ところで今後はes6の文法で書く方がより良いと思います。
公式にも下記のような書き方が推奨されてます。
import * as bootstrap ...
- 163
2
票
使っているデバイスによってbackground-sizeを変えたい
メディアクエリを使ってブラウザーのビューポートの幅で切り替えるのが一般的です。
たとえばスマートフォン用の指定は下記を追加します
@media (max-width: 575.98px) {
.top-main {
background-size: cover;
}
}
- 261
1
票
AngulerJSでのモーダル画面表示
全体的に$modalではなく$uimodalでした
また最初に
app.controller("controller", ['$scope', '$http','$uibModal', function($scope, $http, $uibModal )
と定義しておいく必要があることがわかりました。
実際につかうときは
var modalInstance = $uibModal.open(...
- 31
1
票
Accepted
隔離スコープのパラメータが同期されない
詳細がわからないため推測になりますが、以下のどちらかではないでしょうか。
異なるスコープでshowが定義されており、scope.toggleによる切り替えで期待したスコープのshowの値が変更されていない
DatepickerのshortcutPropagationの設定が考慮されていない
補足:
1....
- 1,012
1
票
Accepted
.NETでBootstrapのModalがOnClickイベント後に閉じてしまう。
onserverclickなのでポストバックが発生し、ページ全体またはUpdatePanelが再読み込みされてBootstrapによるモーダルの表示を打ち消しているのでしょう。ですのでUpdatePanelのトリガーとして問題のボタンを登録する必要があります。対象の<asp:UpdatePanel>に
<asp:UpdatePanel ID="UpdatePanel2" ...
- 1.4万
1
票
要素を横一列で並べたい。
.form-inline .input-group {
display: inline-table;
vertical-align: middle;
}
横並びのときは上記のCSSが効いているので、これをメディアクエリ外に書いても効くのですが、ほかに影響が出るとまずいので、
.input-group.timepicker {
display: inline-table;
...
- 106
1
票
modal内の特定の要素の高さを取得したい
回答の内容は@pgrho さんと同じですが、サンプルを投稿します。
(コメントとして追加しようとしましたが、まだ権限が足りなかったため回答として投稿)
$('#myModal').on('shown.bs.modal', function (e) {
var takasa = $('p').height()
alert(takasa);
});
<script ...
- 669
1
票
bootstrapでtableの縦線を消す方法について
以下はBootstrap 3 の基本的なテーブルを公式のドキュメントより引用したものです。
縦線は存在しませんが、これで解決できませんか?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class=...
- 4,651
1
票
Accepted
画面が小さくなっても要素を横一列に並んだままにしたい
多少デザインが変わりますが、このような感じではいかがでしょう?
<div class="container" style="padding:20px 0">
<form class="form-inline" style="margin-bottom:15px;">
<div class="form-group">
...
- 106
1
票
1
票
Bootstrapテンプレートで、<select class="form-control"> の角丸を四角にしたい
-webkit-appearance:none; を指定してください。
<select class="form-control" style="border-radius: 0!important; -webkit-appearance:none;">
- 7,195
1
票
zabuto calendarでクリックイベントをjsonの値によって変えたい
http://zabuto.com/dev/calendar/examples/action.html はご覧になりましたか?
クリックされた時の action を書き換えることができるようです。
サンプルでは、hasEvent 値を見て分岐しているので、似たような処理で行けるのではないでしょうか?
var hasEvent = $("#" + id).data("hasEvent");
- 2,173
1
票
Accepted
BowerやGruntを使ってHonokaをコンパイルしたい
bower, gruntはNodeJSを使用したCLIです。
公式ページからNodeJSをインストールするか、nodebrewで任意のバージョンを利用できます。インストールが終了すると、npmコマンドを使用できるようになります。NodeJS-Package-Managerの意です。
curl -L git.io/nodebrew | perl - setup
nodebrew install-...
- 523
1
票
Accepted
AngularJS ui-routerを用いた共通モーダル(BOOTSTRAP)の定義について
あくまでstateとしてモーダルウィンドウを呼び出したい場合は、ct.ui.router.extrasのSticky Stateを使用して近い動きが実装できます。
上記の公式サンプルを改変して、state経由で$modal.openを呼び出すサンプルが下記です。ただ、この実装も不完全で、モーダルを表示してF5リロードをすると、モーダルが閉じた状態で画面が再現されます。ですので、...
- 523
1
票
Accepted
1
票
Accepted
Flat UI ProのRailsへのインストールで generatorを実行すると Could not find generator 'flatuipro:install' エラーになる
参考サイトの内容は、例ですので、ディレクトリのパス等はご自身の環境に合わせて置き換える必要があります。また、2014年の情報である為、内容が古い可能性もあります。github上のdesignmodo-flatuipro-railsのインストール手順や、Flat UI Proをダウンロードしたディレクトリ中にあるドキュメントを参照して、最新の情報に従うようにしてください。
...
- 1,505
1
票
Accepted
Bootstrap3 のファントアイコンを増加したい
クラス指定ではなく、iタグで指定しなければいけないのでしょうか?
Font Awesome はインライン要素で利用することが想定されており、i 以外 (span など) を利用することもできます: Font Awesome is designed to be used with inline elements (we like the <i> tag for brevity, but ...
- 4,413
1
票
bootstrapでタブをクリックしたらAjax機能で画面遷移せずにデータを表示したい
Bootsrapのtabコンポーネントは、タブ形式の表示と、JavaScript(jQuery)を使った機能に分割しています。
http://getbootstrap.com/javascript/#tabs-usage
公式サイトのサンプルコードでは、
$('#myTabs a').click(function (e) {
e.preventDefault()
$(this)....
- 1,864
Only top scored, non community-wiki answers of a minimum length are eligible
関連するタグ
bootstrap × 73ruby-on-rails × 19
javascript × 18
css × 16
html × 15
jquery × 12
html5 × 7
ruby × 4
vue.js × 4
angularjs × 4
java × 3
scss × 3
c# × 2
node.js × 2
typescript × 2
rubygems × 2
jsp × 2
internet-explorer × 2
sass × 2
polymer × 2
bootstrap4 × 2
python × 1
php × 1
laravel × 1
json × 1