contributte / forms-bootstrap

👾 Bootstrap 4 + 5 forms for Nette framework

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Buttons in single line?

darkWolf-PR opened this issue · comments

Showcase that is linked in documentation shows buttons in line, but no matter what I try, they are getting added under each other(and it looks dumb having few buttons each on it´s line).

Is there a way to set-up buttons to be generated in single line? Literally, I have to render each form manually because of that, so whole extension pretty much looses any purpose...

I´ve tried to use the rows, but thats no good. It works for elements that fills whole line like text, textarea, but not buttons with lenght based on text in it. Without setting numbers for all breakpoints, it ends with buttons overflowing the rows or badly looking large space between buttons.

Also, I need to change shown buttons based on add/edit page and I did not found out, how to add the button into next column from actionEdit(id)?

Currently only way to have multiple buttons in row is through grid system:

$row = $this->addRow('buttons');
$row->addCell(1)->addButton('s', Html::el('strong')->setText('strong'));
$row->addCell(1)->addButton('i', Html::el('strong')->setText('italic'));

and every row will be rendered as:

<div class="col-sm-1">
<div class="form-group row">
	<div class="col-sm-9"><button type="button" name="s" class="btn btn-secondary"><strong>strong</strong></button></div>
</div>
</div>

if U want to get multiple in one cell for example:

$row = $this->addRow('buttons')->addCell(12);
$row->addButton('s', Html::el('strong')->setText('strong'));
$row->addButton('i', Html::el('i')->setText('italic'));

then we would need to change behaviour, maybe easiest would be to allow adding multiple controls to cell and allow changing renderer on cell. This should be possible and easilly implemented. Do U wish to prepare PR?
BootstrapCell is place where U should look at and I would accept such PR.
If U're waiting for me to implement this it could take some time because this is currently not needed on my projects and I'm to buisy in close future time.

@darkWolf-PR you're in luck :) I just needed this feature also, so I implemented it...

this is currently in master and v0.2 is not yet released, I'll release it at one point but you can try it out with this in composer.json:

{
	"require": {
		"contributte/forms-bootstrap": "^0.2"
	},
  "minimum-stability": "dev",
  "prefer-stable": true,

and this code:

$parentRow = $form->addRow();
$submitCell = $parentRow->addCell(12)->addHtmlClass('inline-buttons');
$submitCell->addSubmit('submit', 'Submit')->setBtnClass('btn-success');
$submitCell->addSubmit('random', 'Do random stuff')->setBtnClass('btn-secondary');
$submitCell->addSubmit('save', 'Save for later')->setBtnClass('btn-info');
<style>
	.inline-buttons .form-group {
		display:inline-block;
	}
</style>

if all ok with this please close issue :)

Had to move to front-end stuff lately, so no time to test this yet. But looks interesting.

ok, I'm closing this then, if U have issues with this feel free to reopen or open new issue.

Not sure how to reopen, but I´ve got to test it finally. Looks good. Just one question - if I want to add button in actionEdit() for example, is this the right way do do it?

$this['form']->getComponent('buttonsRow')->cells[0]->addSubmit()

I believe that should work... I think there's no other way ATM

Yeah, it seems to work as I tried, was just unsure about the construction if Im not missing some easier way to access that. Thx.