質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.37%

toastをスクロールしても常に画面下部に表示したい

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,061

score 9

スマホアプリでtoastを実装したいと思い、OnsenUIのtoastを書いてみたのですが、toastの表示位置がスクロールしない状態の最下部で固定されています。
スクロールしても最下部に表示させたいのですが、色々調べてみてもわかりませんでした。

<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no">
  <link rel="stylesheet" href="css/style.css">
</head>
<body data-role="none" class="body">
  <header class="header">
    <img src="img/header.png" class="header-image">
  </header>
  <div class="siteContent">
    <div class="input_data_your_data">
      <h3 data-role="none">アカウント情報の入力</h3>
      <div class="contact-form">
        <!-- Form -->
        <div class="bottom_space">
          <form data-role="none" id="account" method="post" action="#">
            <table data-role="none" class="your_form_table" id="your-form-table">
              <tr data-role="none" class="your_form_tr">
                <th data-role="none" class="your_form_left">
                  <label data-role="none" for="service_name">
                    サービス名
                  </label>
                </th>
                <td data-role="none" class="your_form_right">
                  <input data-role="none" type="text" name="service_name_0" id="service_name_0" class="your_input_text">
                </td>
              </tr>
              <tr data-role="none">
                <td data-role="none" class="your_bar" colspan="2"></td>
              </tr>
              <tr data-role="none" class="your_form_tr">
                <th data-role="none" class="your_form_left">
                  <label data-role="none" for="service_id">
                    ログインID
                  </label>
                </th>
                <td data-role="none" class="your_form_right">
                  <input data-role="none" type="text" name="service_id_0" id="service_id_0" class="your_input_text">
                </td>
              </tr>
              <tr data-role="none">
                <td data-role="none" class="your_bar" colspan="2"></td>
              </tr>
              <tr data-role="none" class="your_form_tr">
                <th data-role="none" class="your_form_left">
                  <label data-role="none" for="service_pass">
                    パスワード
                  </label>
                </th>
                <td data-role="none" class="your_form_right">
                  <input data-role="none" type="text" name="service_pass_0" id="service_pass_0" class="your_input_text">
                </td>
              </tr>
            </table>
            <input data-role="none" class="btn-flat-double-border-tsuika" id="account_0" type="button" onClick="Add(this);" value="登録する">
          </form>
          <div data-role="none" id="addtable">
          </div>
          <div class="bottom_space">
            <input data-role="none" class="btn-flat-double-border-tsuika" id="add" type="button" onclick="AddTable();" value="アカウントを追加する">
          </div>
          <div>
            <a data-role="none" href="your_data.html" class="btn-circle-border-simple">
              戻る
            </a>
          </div>
        </div>        
      </div>
    </div>
  </div>
  <script language="javascript" type="text/javascript">
    var i = 0 ;
    //読み込み時処理
    document.addEventListener('DOMContentLoaded', function() {
      Load();
    }, false);
    document.addEventListener('deviceready', function() {
      Load();
    }, false);

    function Load(){
      //ローカルストレージの読み込み
      var argument_service_name = localStorage.getItem('service_name_' + i );
      var argument_service_id = localStorage.getItem('service_id_' + i );
      var argument_service_pass = localStorage.getItem('service_pass_' + i );
      //変数に中身があるか確認
      while(argument_service_name !== null) { 
        //ローカルストレージから挿入
        document.getElementById('service_name_' + i ).value = argument_service_name;
        document.getElementById('service_id_' + i ).value = argument_service_id;
        document.getElementById('service_pass_' + i ).value = argument_service_pass;
        //次のテーブルを作成、カウントアップ
        AddTable();
        //ローカルストレージの再読み込み
        argument_service_name = localStorage.getItem('service_name_' + i );
        argument_service_id = localStorage.getItem('service_id_' + i );
        argument_service_pass = localStorage.getItem('service_pass_' + i );
      }
    }

    //アカウント入力欄を追加する
    function AddTable(){
      i ++;
      var newForm =  document.createElement('form');
      newForm.id = 'account_' + i;
      newForm.className = 'data-role-none';

      var service_name = document.createElement('input');
      service_name.type = 'text';
      service_name.id = 'service_name_' + i;
      service_name.className = 'data-role-none';
      service_name.className = 'your_input_text';

      var service_id = document.createElement('input');
      service_id.type = 'text';
      service_id.id = 'service_id_' + i;
      service_id.className = 'data-role-none';
      service_id.className = 'your_input_text';

      var service_pass = document.createElement('input');
      service_pass.type = 'text';
      service_pass.id = 'service_pass_' + i;
      service_pass.className = 'data-role-none';
      service_pass.className = 'your_input_text';

      var div = document.createElement('div');
      div.className = 'data-role-none';
      div.className = 'bottom_space';

      var table = document.createElement('table');
      table.className = 'data-role-none';
      table.className = 'your_form_table';
      table.id = 'your_form_table'

      var tr1 = document.createElement('tr');
      tr1.className = 'your_form_tr';
      tr1.className = 'data-role-none';
      var tr2 = document.createElement('tr');
      tr2.className = 'data-role-none';
      tr2.className = 'your_form_tr';
      var tr3 = document.createElement('tr');
      tr3.className = 'data-role-none';
      tr3.className = 'your_form_tr';

      var th1 = document.createElement('th');
      th1.className = 'data-role-none';
      th1.className = 'your_form_left';
      var th2 = document.createElement('th');
      th2.className = 'data-role-none';
      th2.className = 'your_form_left';
      var th3 = document.createElement('th');
      th3.className = 'data-role-none';
      th3.className = 'your_form_left';

      var td1 = document.createElement('td');
      td1.className = 'data-role-none';
      td1.className = 'your_form_right';
      var td2 = document.createElement('td');
      td2.className = 'data-role-none';
      td2.className = 'your_form_right';
      var td3 = document.createElement('td');
      td3.className = 'data-role-none';
      td3.className = 'your_form_right';

      var lavel1 = document.createElement('lavel');
      lavel1.className = 'lavel1'
      var lavel2 = document.createElement('lavel');
      lavel2.className = 'lavel2'
      var lavel3 = document.createElement('lavel');
      lavel3.className = 'lavel3'

      var tr_bar1 = document.createElement('tr');
      var td_bar1 = document.createElement('td');
      td_bar1.className = 'data-role-none';
      td_bar1.className = 'your_bar';
      td_bar1.colSpan = '2';

      var tr_bar2 = document.createElement('tr');
      var td_bar2 = document.createElement('td');
      td_bar2.className = 'data-role-none';
      td_bar2.className = 'your_bar';
      td_bar2.colSpan = '2';

      var button = document.createElement('input');
      button.className = 'data-role-none';
      button.className = 'btn-flat-double-border-tsuika';
      button.type = 'button';
      button.id = 'account_' + i;
      button.value = '登録する'
      button.onclick = function(){
          Add(this);
      };

      var parent = document.getElementById('addtable');

      parent.appendChild(div);
      div.appendChild(newForm);
      newForm.appendChild(table);

      table.appendChild(tr1);
      tr1.appendChild(th1);
      th1.appendChild(lavel1);
      lavel1.innerHTML = "サービス名";
      tr1.appendChild(td1);
      td1.appendChild(service_name);
      table.appendChild(tr_bar1);
      tr_bar1.appendChild(td_bar1);

      table.appendChild(tr2);
      tr2.appendChild(th2);
      th2.appendChild(lavel2);
      lavel2.innerHTML = "ログインID";
      tr2.appendChild(td2);
      td2.appendChild(service_id);
      table.appendChild(tr_bar2);
      tr_bar2.appendChild(td_bar2);

      table.appendChild(tr3);
      tr3.appendChild(th3);
      th3.appendChild(lavel3);
      lavel3.innerHTML = "パスワード";
      tr3.appendChild(td3);
      td3.appendChild(service_pass);

      newForm.appendChild(button);
    }

    //ローカルストレージに保存する
    function Add(account_no) {
      //フォームナンバーを変数に入れる
      var idNo = account_no.id;//これだと「submit_0」
      idNo = idNo.replace(/[^0-9]/g, '');//数字を取り出す

      //ローカルストレージに保存する
      var serviceName = document.getElementById('service_name_' + idNo).value;
      var serviceId = document.getElementById('service_id_' + idNo).value;
      var servicePass = document.getElementById('service_pass_' + idNo).value;

      localStorage.setItem('service_name_' + idNo, serviceName);
      localStorage.setItem('service_id_' + idNo, serviceId);
      localStorage.setItem('service_pass_' + idNo, servicePass);

    callDialog();
  }
    function callDialog(){ 
      ons.notification.toast('Hi there!', { timeout: 1000, animation: 'ascend' });
    }
  </script>
</body>
</html>

OnsenUI以外のtoastでtoastrを使ってみましたが下記のエラーが出てしまいます。
ReferenceError: Can't find variable: toastr

同じく、iziToastを試しても同じエラーが出ました。
ReferenceError: Can't find variable: iziToast

環境:monacaIDE monacaデバッガー iphone7

どのような方法でも良いので、スクロールしても画面下部に表示されるtoastの実装の仕方を教えてください。
お願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

Onsen UI Playgroundでtoastを実行したら上下にtoast張り付きますけど。OnsenUIで試したソースを質問本文に張ったほうが回答つきやすいと思いますよ。

<ons-page>
  <p>
    <br><br>    <br><br>  分かりやすく  <br><br>    <br><br>
    <ons-button
      onclick="ons.notification.toast('Hi there!', { timeout: 1000, animation: 'fall' })"
    >
      Queue notification toast (top)
    </ons-button>

    <br><br>    <br><br>  分かりやすく  <br><br>    <br><br>

    <ons-button onclick="myToast.toggle()">Toggle element toast (bottom)</ons-button>
    <br><br>    <br><br>  分かりやすく  <br><br>    <br><br>
  </p>

  <ons-fab position="bottom right">+</ons-fab>
</ons-page>

<ons-toast id="myToast" animation="ascend">
  FABs up!
  <button onclick="myToast.hide()">ok</button>
</ons-toast>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/06/12 14:40

    Onsen UI Playgroundでは意図通り動きましたが、monacaでそのまま書くと、だめでした。
    もう少し調べてみます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.37%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る