Pokus o formátování formuláře pro TwitterBootrap3

Upozornění: Tohle vlákno je hodně staré a informace nemusí být platné pro současné Nette.
motorcb
Člen | 552
+
0
-

Zdravim, mám následující formulář, kde se snažím zprovoznit TB3:

protected function createComponentTaskForm()
{
    $userPairs = array( 1 => "aaa", 2 => "bbb" );

    $form = new Form();
    $form->getElementPrototype()->addClass( 'form-horizontal' );

    $renderer = $form->getRenderer();
    $renderer->wrappers['pair']['container'] = 'div class="control-group"';
    $renderer->wrappers['label']['container'] = NULL;
    $renderer->wrappers['control']['container'] = 'div class="col-lg-10"';

    $form->addText( 'text', 'Úkol:' )
            ->addRule( Form::FILLED, 'Je nutné zadat text úkolu.' );
    $form->addSelect( 'userId', 'Pro:', $userPairs )
            ->setPrompt( '- Vyberte -' )
            ->addRule( Form::FILLED, 'Je nutné vybrat, komu je úkol přiřazen.' );
    $form->addSubmit( 'create', 'Vytvořit' );
    return $form;
}

vygeneruje následující kód:

<form action="/" method="post" id="frm-taskForm" class="form-horizontal" novalidate="">
   <div class="control-group required">
      <label for="frm-taskForm-text" class="required">Úkol:</label>
      <div class="col-lg-10">
         <input type="text" name="text" id="frm-taskForm-text" required="" data-nette-rules="[{&quot;op&quot;:&quot;:filled&quot;,&quot;msg&quot;:&quot;Je nutné zadat text úkolu.&quot;}]" value="" class="text">
      </div>
   </div>
   <div class="control-group required">
      <label for="frm-taskForm-userId" class="required">Pro:</label>
      <div class="col-lg-10">
         <select name="userId" id="frm-taskForm-userId" required="" data-nette-rules="[{&quot;op&quot;:&quot;:filled&quot;,&quot;msg&quot;:&quot;Je nutné vybrat, komu je úkol přiřazen.&quot;}]">
            <option value="">- Vyberte -</option>
            <option value="1">aaa</option>
            <option value="2">bbb</option>
         </select>
      </div>
   </div>
   <div class="control-group">
      <div class="col-lg-10"><input type="submit" name="create" value="Vytvořit" class="button"></div>
   </div>
   <div>
      <input type="hidden" name="do" value="taskForm-submit"><!--[if IE]><input type=IEbug disabled style="display:none"><![endif]-->
   </div>
</form>

To by šlo, jenže já bych chtěl k <label for=„frm-taskForm-userId“ class=„required“>Pro:</label> do class přidat: col-lg-2 control-label
aby výsledek vypadal takto:

<label for="frm-taskForm-userId" class="col-lg-2 control-label required">Pro:</label>

Nevěděl by někdo jak na to?
Děkuji za rady

enumag
Člen | 2118
+
0
-

Co takhle raději upravit BootstrapRenderer aby podporoval TB3?

sKopheK
Člen | 207
+
0
-

Mělo by fungovat

$form->addSelect( 'userId', 'Pro:', $userPairs )
            ->setPrompt( '- Vyberte -' )
            ->addRule( Form::FILLED, 'Je nutné vybrat, komu je úkol přiřazen.' )
            ->getLabelPrototype()->class('col-lg-2 control-label required');
radas
Člen | 225
+
0
-

To ale pořád neřeší to, že tlačítko většinou chceme mít zarovnáno pod input políčky.

Nestálo by za úvahu, zda by nešlo přistupovat v

$renderer->wrappers['control']['container'] = 'div class="col-lg-10"';

k hodnotě každého formulářového pole, takže změnit by to mohlo jít tak, že by se k divu obalujícímu pouze tlačítko doplnila k třídě col-lg-10 třída col-lg-offset-2?

radas
Člen | 225
+
0
-

Nebo přejít na UIkit, který umožňuje nastavit šířku přímo na formulářovém poli pomocí třídy, tak jak je tomu u TB 2.

Šaman
Člen | 2666
+
0
-

Bootstrap renderer mi nevyhovuje, protože se snažím o formuláře jako komponenty (i z jiných důvodů, než integrovaná šablona). Nevíte ale nějakém projektu, který by upravil formulářová makra tak, aby zohlednila boostrap formátování? Díky.