0

したがって、データベースに送信される人物の名前と電話番号を表すテキスト ボックスのペアを不特定の数だけユーザーが追加できるアプリケーションがあります。関連するマークアップは以下のとおりです...

<div id="divAddVoters">
            <form class="formee" action="">
                <fieldset id="appendVoters">
                    <legend>Enter Voter Name and Phone Number:</legend>
                    <!--<div id="appendVoters">-->
                        <div class="grid-4-12" id="appendVoterName">
                            <label>Name:</label>
                            <input type="text" class="txtAddVoter" value="" />
                        </div>
                        <div class="grid-4-12" id="appendVoterNumber">
                            <label>Phone Number</label>
                            <input type="text" class="txtAddNumber" value="" />
                        </div>
                        <div class="grid-4-12"></div>
                    <!--</div>-->
                    <div class="grid-12-12">
                        <button id="btnAddVoter" class="formee-button" 
                                onclick="addVoter(); return false;">ADD VOTER</button>
                        <button id="btnSubmitVoters" class="formee-button" 
                                onclick="submitVoters(); return false;">SUBMIT VOTER(S)</button>
                        <p id="pError"></p>
                    </div>
                </fieldset>
            </form>
        </div>

...したがって、ユーザーがbtnAddVoterボタンを何度も選択した場合、任意の数のtxtAddVoterテキスト ボックスを div に追加しappendVoterName、txtAddNumberテキスト ボックスを div に追加する必要がありますappendVoterNumber。これを行うJavaScript関数は以下のとおりです...

function addVoter()
            {
                $('fieldset#appendVoters div#appendVoterName').append("<label>Name</label><input type='text'" +  
                                "class='txtAddVoter' value='' />");

                $('fieldset#appendVoters div#appendVoterNumber').append("<label>Phone Number</label>" +
                                "<input type='text' class='txtAddNumber' value='' />");
            }

私はFormeeすべてを美しく見せるために を使用しています。これはfieldset, legendandを説明してform class="formee"います (私のアプリケーションは実際には完全に駆動されているため、スタイルが要求することjavascriptを除いて、フォームはまったく必要ありません)。formee問題は、凡例タグによって描かれた境界線が、その内部に追加された要素で大きくならないことです。そのため、ユーザーがテキストボックスを追加すると、最終的には凡例の境界を超えてボタンを超え、全体が完全にばかげて見えます。

含まれるテキストボックス要素の数に応じて凡例の境界線を大きくする最良の方法は何だろうと思っています。テキストボックスの数を維持することを考えていましたが、特定の数に達したらjavascript/jQueryを使用してFormeeスタイルシートを変更して凡例を大きくしますか? ただし、これをどのように行うかはよくわかりませんが、いくつかの良いアイデアを探しています。

編集 - OK、これが CSS の関連部分です...

.formee fieldset {
    border: 1px solid #d4d4d4;
    position: relative;
    height:30%;
    padding: 1.2em 0;
    margin: 0 0 4em;
}

私がやりたいことは、ユーザーがテキストボックスのペアを追加するたびに、height 属性値を読み取り、その値を 2 倍にしてから、この値をこの CSS ルールの新しい高さとして設定することです。これは可能ですか？

編集 - 私はこの機能でそれを実現しました...

    function doubleFieldSetSize(divName)
    {
        var height = $('fieldset#' + divName).css('height');
        height = height.replace(/px$/, '');
        height = parseInt(height) + 70;
        height = height + "px";
        $('fieldset#' + divName).css('height', height);
    }
4

1 に答える 1

0

このcss、float、heightを追加してみてください。

.formee fieldset {
    float:left;
    height:auto;
    border: 1px solid #d4d4d4;
    position: relative;    
    padding: 1.2em 0;
    margin: 0 0 4em;
}
于 2013-06-12T04:31:05.877 に答える