0

Onsen-UIの検索テキストコントロール(Search Input)内に文字をクリアするボタンをつけたいです。下記サイトを参考にしましたが、ボタンがコントロール外に表示されてしまいます。アドバイスを頂ければ幸いです。

参考ページ
https://stackoverflow.com/questions/21708689/clear-text-input-on-click-with-angularjs

実装コード

            <!DOCTYPE HTML>
            <html ng-app = "myApp">
            <head>
                <meta charset="utf-8">
                <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
                <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
                <script src="components/loader.js"></script>
                <script src="js/winstore-jscompat.js"></script>
                <link rel="stylesshet" href="components/monaca-onsenui/js/angular/angular-csp.css">
                <link rel="stylesheet" href="components/loader.css">
                <link rel="stylesheet" href="css/style.css">
                <script>
                    var app = angular.module("myApp", ['onsen']);
                    app.controller("myCtrl", function ($scope) {
                        $scope.searchAll = "";
                        $scope.clearSearch = function () {
                            $scope.searchAll = "";
                        };
                    });
                </script>
            </head>
            <body ng-controller="myCtrl">
                <ons-navigator var="myNavigator" page="main.html">
                </ons-navigator> 

                <ons-template id = "main.html">
                    <ons-toolbar>
                        <div class="left"><ons-toolbar-button><ons-icon icon="fa-trash-o"></ons-icon></ons-toolbar-button></div>
                        <div class="center">
                            <input id="searcharea" type="search" class="search-input" ng-model="searchAll">
                            <a class="clear" ng-click="searchAll = null">
                                <ons-icon icon="fa-times-circle-o"></ons-icon>
                            </a>                    
                        </div>
                        <div class="right"><ons-toolbar-button><ons-icon icon="fa-plus"></ons-icon></ons-toolbar-button></div>
                    </ons-toolbar>

                    <form>
                        <textarea class="textarea" placeholder="テキストを入力" rows="15" ng-model="text"></textarea>        
                        <button class="button button--large">Button</button>
                    </form>
                </ons-template>
            <style>
            #searcharea{ 
                margin-top: 5px
            }

            .textarea{
                width: 100%;    
            }

            .button{
                margin-top: 10px;
            }
            </style>
            </body>
            </html>

1 件の回答 1

0

CSSを使用して×ボタンのアイコンを移動させてください。

HTML

<ons-toolbar>
    <div class="left"><ons-toolbar-button><ons-icon icon="fa-trash-o"></ons-icon></ons-toolbar-button></div>
    <div class="center">
        <div class="tb-search">
            <input id="searcharea" type="search" class="search-input" ng-model="searchAll">
            <div class="tb-clear" ng-click="searchAll = null"><ons-icon icon="fa-times-circle-o"></ons-icon></div>
        </div>
    </div>
    <div class="right"><ons-toolbar-button><ons-icon icon="fa-plus"></ons-icon></ons-toolbar-button></div>
</ons-toolbar>

CSS

.tb-search {
    position: relative;
}
.tb-clear {
    position: absolute;
    color: #ccc;
    top: 50%;
    right: 5px;
    height: 21px;
    line-height: 1.3;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。