0

2列にしたいフォームを作っているのですが、ケーキは1列目以降フォームを閉じています。Cake 2.3.8を使用しています

最初の列は適切にスタイル設定されていますが、2 番目の列は入力間の間隔が短くなっています。ソースを確認したところ、ケーキは最初の列の後にフォームの終了タグを追加しています。これは、2 番目の列のスタイルの問題を説明していると思います。

<div class = "template_form_left">  
        <?php
            echo $this->Form->create('Template');

            echo $this->Form->input('bullet_1', array('label' => 'Bullet 1'));
            echo $this->Form->input('bullet_2', array('label' => 'Bullet 2'));
            echo $this->Form->input('bullet_3', array('label' => 'Bullet 3'));

            echo $this->Form->input('section_1_title', array('label' => 'Section 1 Title'));
            echo $this->Form->input('section_1_content', array('label' => 'Section 1 Content'));

            echo $this->Form->input('section_2_title', array('label' => 'Section 2 Title'));
            echo $this->Form->input('section_2_content', array('label' => 'Section 2 Content'));

     //when I check the source, a closing form tag is added here by cake    
        ?>
</div>
<div class = "template_form_right"> 
        <?php
            echo $this->Form->input('section_3_title', array('label' => 'Section 3 Title'));
            echo $this->Form->input('section_3_content', array('label' => 'Section 3 Content'));


            echo $this->Form->input('section_4_title', array('label' => 'Section 4 Title'));
            echo $this->Form->input('section_4_content', array('label' => 'Section 4 Content'));

            echo $this->Form->input('section_5_title', array('label' => 'Section 5 Title'));
            echo $this->Form->input('section_5_content', array('label' => 'Section 5 Content'));

            echo $this->form->submit('Submit');
        ?>
</div>

ここにCSSがあります

.template_form_left{
float:left;
width:50%
}

.template_form_right{
float:right;
width:50%
}

テーブルを使用するか、フォームを手動でコーディングする以外に、フォーム ヘルパーを使用しながら、フォームを 2 つの div に分割して並べて表示 (2 列) することはできますか?

4

1 に答える 1

3

これは実際には CakePHP の問題ではありません。

あなたがやろうとしているのは

<div class="left">
    <form>
    ...
</div>
<div class="right">
    ...
    </form>
<div>

これは有効な HTML ではなく、非論理的です。ブラウザに「クローゼットを含む引き出しを開始してから引き出しを終了し、別の引き出しを開始してクローゼットを終了し、次に引き出し」と伝えていると考えてください。

各ブラウザは、その日を節約し、可能な限り最善のフォーマットにしようとしますが、結果は予測できません。

代わりに、次のように言う必要があります。

<form>
    <div class="left">
        ...
    </div>
    <div class="right">
        ...
    </div>
</form>

または「クローゼットの開始、引き出しの開始、引き出しの停止、引き出しの開始、引き出しの停止、クローゼットの停止」。これは、コードで次のように変換されます。

<?php echo $this->Form->create('Template'); ?>
<div class = "template_form_left"> 
<?php
    echo $this->Form->input('bullet_1', array('label' => 'Bullet 1'));
    echo $this->Form->input('bullet_2', array('label' => 'Bullet 2'));
    echo $this->Form->input('bullet_3', array('label' => 'Bullet 3'));

    echo $this->Form->input('section_1_title', array('label' => 'Section 1 Title'));
    echo $this->Form->input('section_1_content', array('label' => 'Section 1 Content'));

    echo $this->Form->input('section_2_title', array('label' => 'Section 2 Title'));
    echo $this->Form->input('section_2_content', array('label' => 'Section 2 Content')); ?>
</div>
<div class = "template_form_right">
<?php
    echo $this->Form->input('section_3_title', array('label' => 'Section 3 Title'));
    echo $this->Form->input('section_3_content', array('label' => 'Section 3 Content'));


    echo $this->Form->input('section_4_title', array('label' => 'Section 4 Title'));
    echo $this->Form->input('section_4_content', array('label' => 'Section 4 Content'));

    echo $this->Form->input('section_5_title', array('label' => 'Section 5 Title'));
    echo $this->Form->input('section_5_content', array('label' => 'Section 5 Content')); ?>
</div> 
<?php
echo $this->form->submit('Submit');
于 2013-09-13T19:19:55.063 に答える