angular-uiのaccordionについて

小関智礼

unread,

Feb 4, 2014, 1:02:26 AM2/4/14

to angula...@googlegroups.com

いつも参考にさせて頂きます。

小関です。

またまた質問がありますので、皆様の技術でお助け下さい。

（投稿の連投になってしまいますね。すみません。）

angular-uiのaccordionを使用してみたのですが、

そのaccordion内にdatepickerを置くと２つ程問題が発生しています。

・カレンダーが表示されるのですが、accordionの内側に隠れてしまう。

・カレンダーを表示するボタンが反応しない。デバッグするとng-clickは動いています。

　（カレンダーはフォーカスが当たると、表示されます。）

サンプルソースをPlunkerに置いています。

比較として、accordionで括っていないものを下に表示していますが、

こちらは正しく動いています。

（コードをそのままコピっただけですので、同じJavaScriptの関数を呼び出す様になっていますが、ご了承下さい。）

問題点について、何か解決策があれば、ご教授頂きたく。

よろしくお願いします。

ひだか屋ウェブデザイン

unread,

Feb 4, 2014, 3:02:23 AM2/4/14

to angula...@googlegroups.com

こんにちは、堀米ともうします。

カレンダーがaccordionの内側に表示される件ですが、

bootstrap.min.cssが問題かと思います。

.panel-group .panel {

margin-bottom: 0;

border-radius: 4px;

overflow: hidden;　←これ

}

ボタンが反応しないのはちょっとわかりませんでした。

2014年2月4日 15:02 小関智礼 <ktomoa...@gmail.com>:

--
このメールは Google グループのグループ「AngularJS Japan User Group」の登録者に送られています。
このグループから退会し、メールの受信を停止するには、angularjs-jp...@googlegroups.com にメールを送信します。
このグループに投稿するには、angula...@googlegroups.com にメールを送信してください。
このディスカッションをウェブ上で閲覧するには、https://groups.google.com/d/msgid/angularjs-jp/4943fe0b-c7df-42e3-b364-c37350a1f18a%40googlegroups.com にアクセスしてください。
その他のオプションについては、https://groups.google.com/groups/opt_out にアクセスしてください。

--

堀米　雄樹

ひだか屋ウェブデザイン
〒396-0009 長野県伊那市日影563-1
電話：0265-98-6002
携帯：090-8507-8243
Email：in...@hidakaya.net
URL：http://hidakaya.net/

小関智礼

unread,

Feb 4, 2014, 3:50:10 AM2/4/14

to angula...@googlegroups.com, in...@hidakaya.net

堀米さん

早速のご回答、ありがとうございます。

該当の場所をコメントアウトしたら、正しく表示されました。

あとは、ng-clickが反応しない件だけになりました。

よろしくお願いします。

小関

2014年2月4日火曜日 17時02分23秒 UTC+9 ひだか屋ウェブデザイン:

このグループから退会し、メールの受信を停止するには、angularjs-jp+unsubscribe@googlegroups.com にメールを送信します。

このグループに投稿するには、angula...@googlegroups.com にメールを送信してください。
このディスカッションをウェブ上で閲覧するには、https://groups.google.com/d/msgid/angularjs-jp/4943fe0b-c7df-42e3-b364-c37350a1f18a%40googlegroups.com にアクセスしてください。
その他のオプションについては、https://groups.google.com/groups/opt_out にアクセスしてください。

Tessei Yoshida

unread,

Feb 4, 2014, 7:27:17 AM2/4/14

to angula...@googlegroups.com

こんばんわ、吉田です。

たぶんなんですが、アコーディオンのis-openとdatepickerのis-openがバッティングしているのかもしれないです。
アコーディオンとdatepickerの違うcontrollerを挟んだりしてscopeを別のものにしてみてください

小関智礼 wrote:

堀米さん
早速のご回答、ありがとうございます。

該当の場所をコメントアウトしたら、正しく表示されました。

あとは、ng-clickが反応しない件だけになりました。

よろしくお願いします。

小関

2014年2月4日火曜日 17時02分23秒 UTC+9 ひだか屋ウェブデザイン:

    こんにちは、堀米ともうします。

    カレンダーがaccordionの内側に表示される件ですが、
    bootstrap.min.cssが問題かと思います。

    .panel-group .panel {
    margin-bottom: 0;
    border-radius: 4px;
    overflow: hidden;　←これ
    }

    ボタンが反応しないのはちょっとわかりませんでした。

2014年2月4日 15:02 小関智礼 <ktomoa...@gmail.com <javascript:>>:

        いつも参考にさせて頂きます。
        小関です。
        またまた質問がありますので、皆様の技術でお助け下さい。
        （投稿の連投になってしまいますね。すみません。）

        angular-uiのaccordionを使用してみたのですが、
        そのaccordion内にdatepickerを置くと２つ程問題が発生しています。
        ・カレンダーが表示されるのですが、accordionの内側に隠れてしまう。
        ・カレンダーを表示するボタンが反応しない。デバッグするとng-
        clickは動いています。
        　（カレンダーはフォーカスが当たると、表示されます。）

        サンプルソースをPlunker

        <http://plnkr.co/edit/NRfeyArsxfEFZGWpk7Du?p=preview>に置いて
        います。

        比較として、accordionで括っていないものを下に表示していますが、
        こちらは正しく動いています。
        （コードをそのままコピっただけですので、同じJavaScriptの関数を

        呼び出す様になっていますが、ご了承下さい。）

        問題点について、何か解決策があれば、ご教授頂きたく。

        よろしくお願いします。

        --
        このメールは Google グループのグループ「AngularJS Japan User
        Group」の登録者に送られています。
        このグループから退会し、メールの受信を停止するには、angularjs-

        jp+unsu...@googlegroups.com <javascript:> にメールを送信し
        ます。
        このグループに投稿するには、angula...@googlegroups.com
        <javascript:> にメールを送信してください。
        このディスカッションをウェブ上で閲覧するには、
        https://groups.google.com/d/msgid/angularjs-jp/4943fe0b-c7df-42e3-b364-c37350a1f18a%40googlegroups.com

        <https://groups.google.com/d/msgid/angularjs-jp/4943fe0b-c7df-42e3-b364-c37350a1f18a%40googlegroups.com>
        にアクセスしてください。
        その他のオプションについては、https://groups.google.com/groups

/opt_out <https://groups.google.com/groups/opt_out> にアクセス

        してください。

    --

    堀米　雄樹

    ひだか屋ウェブデザイン
    〒396-0009 長野県伊那市日影563-1
    電話：0265-98-6002
    携帯：090-8507-8243

Email：in...@hidakaya.net <javascript:>
URL：http://hidakaya.net/

--
このメールは Google グループのグループ「AngularJS Japan User Group」の
登録者に送られています。
このグループから退会し、メールの受信を停止するには、angularjs-

jp+unsu...@googlegroups.com にメールを送信します。
このグループに投稿するには、angula...@googlegroups.com にメールを送
信してください。
このディスカッションをウェブ上で閲覧するには、
https://groups.google.com/d/msgid/angularjs-jp/cc06b4cb-c647-4484-bc70-66fbe4094e25%40googlegroups.com

小関智礼

unread,

Feb 4, 2014, 8:23:22 PM2/4/14

to angula...@googlegroups.com

吉田さん

ご回答、ありがとうございます。

指摘の通りでした！

Plunkerで修正してみました。

これで解決です。

ありがとうございました。

小関

2014年2月4日火曜日 21時27分17秒 UTC+9 Tessei Yoshida:

Reply all

Reply to author

Forward