同じ列の他の要素に影響を与えずにテーブルの列に動的要素を追加する方法

Question

列要素にテキストが含まれているテーブルがあります。ボタンをクリックすると、すべてのテキスト要素が入力要素になります。条件に基づいて、入力フィールドの横にボタンが表示されます。

私がしなければならないことは、入力フィールドの隣の同じ列にアイコンのボタンを表示することです。私はこれを行ったが、結果は期待通りではない。

これは私が得ているものです。

これは私が探しているものです。

<td id="id119ae"> 
<form class="mytemp" id="form19af" method="post" action="./Application"><div style="width:0px;height:0px;position:absolute;left:-100px;top:-100px;overflow:hidden"><input type="hidden" name="form19af_hf_0" id="form19af_hf_0"></div> 

    <div style="padding:5px; border-width:0px;background-color: #ffffbb" id="editContainer19b0"> 
    <button style="display:none;" data-toggle="modal" data-backdrop="static" class="btn btn-default btn-xs pull-right"> 
     <span class="fa fa-bolt"></span> 
    </button> 
     <input value="Account test" name="editContainer:edit" id="edit1923"> 

    </div> 
</form> 

これは、私は現在、それは私の最初の結果を与えていたコードです。レイアウトはいくつかの問題を引き起こしています。私はより良いレイアウトの提案やこれを修正する方法が必要です。

Answer 1

使用inputgroupクラスは入力タイプ
http://getbootstrap.com/components/#input-groups-buttons

Answer 2

あなたの要求のためのユニークなソリューションはありませんに隣接するボタンを表示します。

どのようにデザインしているかによって異なりますか？応答性を検討していますか？固定幅を使っていますか？あなたはブートストラップのようなライブラリやフレームワークを使っていますか？

ところで、私はあなたのためにこれが働くと思う： あなたの入力とボタンの幅のパーセンテージを使用してください。 例：

<button style="display:none; width: 10%;" data-toggle="modal" data-backdrop="static" class="btn btn-default btn-xs pull-right"> 
    <span class="fa fa-bolt"></span> 
</button> 
<input value="Account test" style="width:80%" name="editContainer:edit" id="edit1923"> 

Answer 3

テーブルの分の幅が設定されました。それが動的だったので、パーセンテージは私を助けませんでした。何らかの理由で、新しい要素が追加され、ボタンが常に間違った場所に来たときに、それを考慮に入れていませんでした。

その列の最小幅を250ピクセルに設定しました。私はそれを30％と言うように設定しようとしましたが、どちらもうまくいきませんでした。

解決策：ヘッダー要素でmin-widthを使用します。テーブル全体を最小幅に従うように設定します。