Support for switching between horizontal and vertical input layout

Daniel Hahler avatarDaniel Hahler created an issue

In a form with "vertical" layout I would like to have some field groups (label and input) aligned horizontally.

$form = $this->beginWidget('application.components.TbActiveForm', array(
    'type' => 'vertical',

)); ?>

I have tried to achieve this by wrapping the field row in a DIV:

echo '<div class="form-horizontal">';
echo $form->textFieldRow($model, 'attribute');
echo '</div>';

This did not work however, because the bootstrap CSS rules for the horizontal layout take into account the various control selectors (e.g. "control-label").

When comparing TbInputHorizontal.php and TbInputVertical.php I have noticed that they are very similar, but a major difference is the handling of these control classes.

I have now copied TbInputHorizontal.php to TbInputVertical.php (and adjusted the PHP class name) and it appears to work as expected.

I have not tested/looked at TbInputInline (which extends / is based on TbInputVertical).

So I suggest adding the "controls", "control-label" and "control-group" classes also to TbInputVertical fields, and it might make sense to re-factor these classes into a single one.

Apart from that, is there a better method currently available to switch label/field layouts in a single form?

btw: there is also a difference in handling $attribute with the checkBox and radioButton ($this->attribute vs. $attribute).

Comments (0)

  1. Log in to comment
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.