Nested inline form

[MartijnThomas]

I was wondering how to nest an inline form, I've been trying to accomplish it with the options wrapInput, div and class and classes like controls-row, from-inline. And tried to place a div arround the with the mentioned classes.

A 'workarround' is adding the input-prepend class to the input field, this places the following input fields next to each other, but this messes up the use of input-prepend items that you deliberately used. And in this case the padding between the field is not right which messes up the outline.

If you want I can place images and code, but I tried a lot of different options and the result was the same; the input fields were placed on a new line.

Hope you can help me.

[slywalker]

Please, show me output HTML that you want.

[MartijnThomas]

I'd like to create forms like this:

<form class="form-horizontal">
    <div class="well">
        <div class="control-group">
            <label class="control-label" for="Titel">Titel</label>
            <div class="controls">
                <input type="text" id="Titel" class="span4" placeholder="Titel" />
            </div>
        </div>
    </div>
    <div class="well">
        <div class="control-group">
            <span class="control-label">Start</span>
            <div class="controls controls-row">
                <input type="text" class="span2" placeholder="Start date" id="start_date" />
                <input type="text" class="span2" placeholder="Start time" id="start_time" />
            </div>
        </div>
        <div class="control-group">
            <span class="control-label">End</span>
            <div class="controls controls-row">
                <input type="text" class="span2" placeholder="End date" id="end_date" />
                <input type="text" class="span2" placeholder="End time" id="end_time" />
            </div>
        </div>
    </div>
        <div class="well">
        <div class="control-group">
            <label class="control-label" for="Titel">Organizer</label>
            <div class="controls">
                <input type="text" id="organizer" class="span4" placeholder="Organizer" />
            </div>
        </div>
    </div>
</form>

Update Here is a fiddle with som aditional fields: http://jsfiddle.net/gJPKY/1/

[slywalker]

it is impossible that all form can be expressed in one method. Try this code.

<div class="control-group<?php if ($this->Form->isFieldError('start_date') || $this->Form->isFieldError('start_time')): ?> error<?php endif ?>">
    <span class="control-label">Start</span>
    <div class="controls controls-row">
        <?php echo $this->Form->text('start_date', array(
            'class' => 'span2',
            'placeholder' => 'Start date'
        )); ?>
        <?php echo $this->Form->text('start_time', array(
            'class' => 'span2',
            'placeholder' => 'Start time'
        )); ?>
        <?php echo $this->Form->error('start_date', null, array(
            'wrap' => 'span', 
            'class' => 'help-block'
        )); ?>
        <?php echo $this->Form->error('start_time', null, array(
            'wrap' => 'span', 
            'class' => 'help-block'
        )); ?>
    </div>
</div>

[MartijnThomas]

It is not working completely as it should. This is part of the code I used.

<?php
    echo $this->Form->create('Event', array(
    'class' => 'form-horizontal'
)); 
?>
<div class="well">
    <h2><? echo __('When is this all happening?'); ?></h2>
    <p><? echo __('Enter the start time and date of the event.'); ?></p>
        <div class="control-group<?php if ($this->Form->isFieldError('start_date') || $this->Form->isFieldError('start_time')): ?> error<?php endif ?>">
            <span class="control-label">Start</span>
            <div class="controls controls-row">
                <?php echo $this->Form->input('Event.start_date',array(
                    'type' => 'text',
                    'label' => false,
                    'placeholder' => 'Start date',
                    'class' => 'span2',
                    'id' => 'start_date',
                )); ?>
                <?php echo $this->Form->text('Event.start_time', array(
                    'type' => 'text',
                    'label' => false,
                    'placeholder' => 'Start time',
                    'class' => 'span2',
                    'id' => 'start_time',
                )); ?>
            </div>
        </div>
        <div class="control-group<?php if ($this->Form->isFieldError('End_date') || $this->Form->isFieldError('end_time')): ?> error<?php endif ?>">
            <span class="control-label">End</span>
            <div class="controls controls-row">
                <?php echo $this->Form->input('Event.end_date',array(
                    'type' => 'text',
                    'label' => false,
                    'placeholder' => 'End date',
                    'class' => 'span2',
                    'id' => 'end_date',
                )); ?>
                <?php echo $this->Form->text('Event.end_time', array(
                    'type' => 'text',
                    'label' => false,
                    'placeholder' => 'End time',
                    'class' => 'span2',
                    'id' => 'end_time',
                )); ?>
            </div>
        </div>
    <?php
        echo $this->Timezone->select('Event.timezone',array(
            'empty' => '-- Pick timezone of the Event --',
            'label' => 'Time',
            'placeholder' => 'Timezone of the event',
            'class' => 'span4',
            'div' => 'control-group',
            'wrapInput' => 'controls',
        ));
    ?>
</div>

And this is the result:

<div class="well">
    <h2>When is this all happening?</h2>
    <p>Enter the start time and date of the event.</p>
    <div class="control-group">
        <span class="control-label">Start</span>
        <div class="controls controls-row">
            <div class="required">
                <div class="input text required">
                    <input name="data[Event][start_date]" placeholder="Start date" class="span2" id="start_date" type="text" required="required"/>
                </div>
            </div>
            <input name="data[Event][start_time]" type="text" placeholder="Start time" class="span2" id="start_time"/>
        </div>
    </div>
    <div class="control-group">
        <span class="control-label">End</span>
        <div class="controls controls-row">
            <div class="required">
                <div class="input text required">
                    <input name="data[Event][end_date]" placeholder="End date" class="span2" id="end_date" type="text" required="required"/>
                </div>
            </div>
            <input name="data[Event][end_time]" type="text" placeholder="End time" class="span2" id="end_time"/>
        </div>
    </div>
    <div class="control-group required">
        <label for="EventTimezone">Time</label>
        <div class="controls required">
            <select name="data[Event][timezone]" placeholder="Timezone of the event" class="span4" id="EventTimezone">
                <option value="">-- Pick timezone of the Event --</option>
                <option value="">Removed all the options</option>
            </select>
        </div>
    </div>
</div>

Two issues remain, first the padding between the date/time fields is not present. And the position of the label for the timezone field is not correct.

When removing the div and wrapInput for the timezone field this is the result:

[slywalker]

Don't use $this->Form->input() inside controls-row, use $this->Form->text()

[MartijnThomas]

Thanks that solves the padding issue, but all other lines in the form (normal not nested input fields) have the same problem as the Timezone field, the label and input field are not inline.

[slywalker]

Try this code

<?php echo $this->Form->input('Event.timezone',array(
    'empty' => '-- Pick timezone of the Event --',
    'label' => array('text' => 'Time', 'class' => 'control-label'),
    'placeholder' => 'Timezone of the event',
    'class' => 'span4',
    'div' => 'control-group',
    'wrapInput' => 'controls',
)); ?>

[MartijnThomas]

Thanks, that solved this issue!