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
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="[{"op":":filled","msg":"Je nutné zadat text úkolu."}]" 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="[{"op":":filled","msg":"Je nutné vybrat, komu je úkol přiřazen."}]">
<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
- radas
- Člen | 225
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?